Tableless - Desenvolvimento inteligente com Padrões Web

11/01/2012
HTML/CSS

O dilema da sintaxe no HTML5

Fechar ou não as tags? Colocar os valores de atributo entre aspas? Estas escolhas nem sempre podem ser uma questão de gosto.

Por


Com o HTML5, a sintaxe volta a ser aquela do HTML, sem as restrições preconizadas pelo XHTML (todas as tags com fechamento, tags e propriedades em minúscula, valores de propriedades entre aspas, etc). E os desenvolvedores voltaram a se sentir livres para codificar o HTML da forma que lhes é mais conveniente.

Bom, não é bem assim. Embora o XHTML fosse frustrante com relação à semântica e não era tão revolucionário quanto propunha, as regras mais rígidas de sintaxe foram seu maior legado. O código escrito era consistente e, se não seguisse as regras, não iria renderizar corretamente no navegador. Além disso, era compreensível para qualquer desenvolvedor. É uma questão de organização e padronização, como uma diretriz que normatiza o comportamento dos elementos para que haja qualidade e consistência.

Pense nas linguagens que você conhece, tanto de programação, quanto de marcação, estilo, etc. Por exemplo: PHP, CSS, XML, JS.  Todas possuem regras de sintaxe que, se não forem seguidas, o código não funcionará. Quem programa em PHP sabe que se esquecer um único ponto-e-vírgula, compromete a interpretação de todo o código. O JS, apesar da flexibilidade com relação a o ponto-e-vírgula no final da linha, é case sensitive, ou seja, há diferença entre o que é escrito em maiúsculas e minúsculas.

Em grande parte das linguagens existentes, há uma sintaxe a ser respeitada e esta serve para que o código seja bem formado e tenha uma estruturação lógica, definindo um sentido para a interpretação do código. Basta remetermos ao significado original de sintaxe, que herdamos da linguística:

A sintaxe é a parte da gramática que estuda a disposição das palavras na frase e das frases no discurso, incluindo a sua relação lógica, entre as múltiplas combinações possíveis para transmitir um significado completo e compreensível. [...] É o ramo que estuda os processos generativos ou combinatórios das frases das línguas naturais, tendo em vista especificar a sua estrutura interna e funcionamento.

Fonte: http://pt.wikipedia.org/wiki/Sintaxe (grifo nosso)

E no HTML5 nada impede que você use a sintaxe do XHTML, portanto, continuar mantendo as principais características de sintaxe do XHTML no HTML5 (uma prática que muitos chamam de XHTML5), para manter um formato consistente de codificação. É como realizar um merge entre as duas linguagens.

Algumas práticas recomendadas:

  • Utilizar todos os elementos e atributos em minúsculas;
  • Incluir tag de abertura de fechamento para as tags que possuem conteúdo (no caso de tags órfãs, como <img>, <input>, <meta>, isto não fica tão grosseiro se for escrito com a sintaxe do HTML);
  • Inserir todos os valores de propriedades entre aspas duplas;

 

Artigos relacionados

HTML5 syntax guidelines

My preferred syntax style for HTML5 markup

Por Talita Pagani

Talita Pagani, 24 anos, mora em Bauru, interior de SP. Trabalha como web designer desde 2005, mas começou a se interessar pela área em 2001. É graduada em Ciência da Computação. Apaixonada por usabilidade, design de interface e padrões web.

http://www.twitter.com/talitapagani

Veja os outros posts de

  • http://twitter.com/AlineBossi Aline Bossi

    Ótimo texto, so

  • http://twitter.com/AlineBossi Aline Bossi

    Em relação as tags órfãs é correto a utilização do fechamento logo após os elementos de atributos (Ex: ) ???

    ótimo texto! 

  • http://twitter.com/talitapagani Talita Pagani

    Olá Aline! 

    Sim, não há problema algum, acontece que como estamos acostumados com a sintaxe do XHTML, isso causa estranheza, mas é a melhor forma na sintaxe HTML ;) Abraços

  • lhvolso

    Não acho legal escrever elementos e atributos em maiúsculas, na minha opinião o código fica mais difícil de ser lido.

  • http://twitter.com/talitapagani Talita Pagani

    Olá Ihvolso, exatamente, por isso que uma das recomendações que citei no texto é  ”Utilizar todos os elementos e atributos em minúsculas”, Abraços ;)

  • http://www.gabrielmagalhaes.com.br/ Gabriel Magalhães dos Santos

    Ótimo texto²!

    Quando comecei  a ver html5 algumas tags seguiam padrão de xhtml, outras não, acho que a principal diferença do html5 pro xhtml é o lance da maracação, como nav pra navegação, header pra topo, footer pra rodapé, etc…

  • lhvolso

    Vejo MUITO código por aí todo em maiúsculas, é horrível…

  • http://go2gerson.com.br/ gersondouglas

    Great post Talita.

  • Mateus Ávila Isidoro

    Fica como treino fechar as tags img, hr, br, entre outras. O foco na semântica do código faz que a gente reaprenda HTML, e faz com que velhas atitudes como deixem de existir para a gente criar , que é mais bonito e organizado. 

    Parabéns pelo artigo.

  • http://twitter.com/lucasmoraes81 Lu Moraes

    Muito bom Talita!
    eu sempre digo que um código bem escrito complementa a documentação seja qual for a linguagem.

  • qgustavor

    Uso a HTML5 Boilerplate ( pura preguiça de escrever tudo por mim mesmo ), a sintaxe recomendada por eles é boa, semelhante a sua, por exemplo usar aspas duplas no HTML ajuda no javascript.
    Uma questão que eu tive dúvida é em relação a atributos como disabled=”disabled”, atributos que não deveriam ter algum valor. Com HTML5 usar só disabled estaria correto, porém no javascript o atributo tem que ter seu valor especificado. Fica difícil isso.

  • http://www.cavico.com.br/ Camilo

    Acredito que uma boa sintaxe é interessante até mesmo por questão de organização. Quando uma equipe trabalha com consistência, inclusive na formatação do código, você “sabe” o que esperar, podendo prever situações e adiantar passos. Quem nunca passou por situações de fazer um script que não funciona, e quando vai revisar tudo, o target do script está escrito com sintaxe incorreta.

  • Deivid Marques

    Penso exatamente assim! Otimo post Talita.

  • http://www.eduardorabelo.com.br/ Eduardo Rabelo

    Um exemplo é o próprio Tableless,

    As tags das thumbs, não contém a barra final ;)

  • http://twitter.com/leandromatias Leandro Matias

    Ótimo texto, Talita. Parabéns!

    Depois de acostumado com o XHTML parece um tanto ilógico uma sintaxe tão livre quanto é a do HTML. Vejo com bons olhos a manutenção dos bons hábitos do XHTML, até mesmo pela legibilidade e padronização do código, ainda mais se tratando de equipes.

    O Bruce Lawson também abordou esse assunto algum tempo atrás, vale a leitura: http://html5doctor.com/html-5-xml-xhtml-5/.

  • Jonathan Dos Santos

    eu gosto de um nível de flexibilidade, como no html5, os próprios PHP e JS são por vezes criticados por fan de linguagens mais “intrusivas” por caracteristicas como tipagem dinamica e serem case insensitive.

    no final essa é a mesma discussão que case sensitive versus case insensitive, é mais facil iniciar uma guerra que chegar a um consenso…

    eu sou da turma que acha que a linguagem tem que ser permissiva e é responsabilidade do programador zelar pelo código, como o artigo sugeriu, e da equipe ter linhas guia de estilização bem definida.

    eu por exemplo sempre achei mais legível escrever atributos compostos em camelcase, onClick e não onclick , mas como o W3C falou que não podia eu acredito!

  • Matheus Salmi

    Realmente. A sintaxe HTML meio que perdeu o sentido para mim. Acho que o código fica mais confuso e feio.

  • http://twitter.com/talitapagani Talita Pagani

    Este é mesmo um dos casos mais controversos quanto à sintaxe. Eu ainda optaria pelo 
    disabled=”disabled”

  • Adinan Cenci

    mas que mimimi choradeira de viado é essa?
    faz certo ou não faz, segue-se o padrão, fecha tag e bota aspas e ponto.

  • Andrew Santos

    Talita, o xhtml não foi tão revolucionário no geral, mas em particular pra mim foi hahaha

    Eu já pensava exatamente da maneira como vc escreveu. Espero que a maioria dos desenvolvedores front-end também tenham esse bom senso.

    …e xhtml5 é um nome legal para essa simbiose :D

    Valeu!

  • Host Vlag

    Venda seu carro em nosso site http://www.saopaulomotors.com.br

  • http://twitter.com/cacacobra Cassiano Aquino

    Acredito que a sintaxe do XHTML ainda é muito útil e elegante.
    O xHTML5 seria ideal.

  • Frank Gilber

    Parabens Talita pelo artigo!

  • Flávio Araújo

    Concordo plenamento Talita. Apesar de estar começando a por em produção de verdade agora algums coisas em HTML, eu mantenho a marca estrita do xhtml

  • Danilo Fernandes de Oliveira

    Mais um ótimo texto! Pessoal… aproveitando, quem puder dá um pulinho no meu blog: www.estradaweb.wordpress.com estou iniciando ainda no aprendizado web, mas sempre que puder vou tentar postar algo interessante lah! Abço

  • Ofelquis

    Recentemente li o livro de HTML5 do Maujor, o livro é bom, no inicio Maujor mostra as várias maneiras de escrever em HTML5 e realmente o que eu adotei é o XHTML5 

    primeiro que eu aprendi a desenvolver em xHTML e não em HTML
    segundo que fechando as tags fica bem mais fácil de se encontrar no código
    terceiro que eu acho o fechamento mesmo das tags órfãs muito sexy!

    para tags órfãs o ideia é fechar com /> desde META, IMG, HR, BR etc..

    Esse é meu estilo de escrever HTML

  • Henrique da Penha

    perfeito. Alguem no mundo que parou pra pensar e há de convir comigo que liberdade não é liberalidade…

  • Pingback: O Dilema da Sintaxe no HTML5 | Blog do Expert

  • Pingback: O Dilema da Sintaxe no HTML5 | SWX Softwares - Desenvolvimento e Design Web

  • http://twitter.com/eocampos Eric de O. Campos

    Ótimo artigo Talita, estou voltando a estudar HTML, até pra não enferrujar no HTML4, pois sinceramente não cheguei a migrar pro xHTML com tanta vontade como aprendi o 4, estou gostando muito de ler seus artigos. Obrigado por compartilhar seu conhecimento

  • Pingback: Documentos poliglotas com XHTML5 | Tableless