Como organizar adequadamente as tags em seu documento HTML5.

As tags são os principais elementos que compõem um documento HTML, só que não podemos simplesmente ir colocando tag atrás de tag e remendar o documento conforme for necessário. Devemos saber onde podemos e onde devemos colocar as tags. Saber isso é fundamental para um bom entendimento do documento pelo navegador ou por qualquer outra pessoa que vá dar continuidade ao seu trabalho, e a melhor forma para aprender a colocar corretamente as tags em seus devidos lugares é saber como elas são divididas e categorizadas.

Inicialmente as tags são divididas em dois grupos principais, os elementos de linha e os elementos de bloco. Os elementos de linha são aqueles que geralmente marcam texto, alguns exemplos: a, strong, em, img, input, abbr, span, etc. E como você pode perceber, são elementos que geralmente são curtos no documento, ocupando poucas linhas ou simplesmente servem para estilizar o texto. Já os elementos em bloco, são aqueles que, como o próprio nome já diz, agrupam os elementos do documento em blocos específicos. Segundo Ferreira, Eis(2010, p.19)”são como caixas, que dividem o conteúdo nas seções do layout.”

Algumas regras que você deve seguir na hora de criar o seu documento HTML:

• Os elementos de linha podem conter outros elementos de linha, dependendo da categoria que ele se encontra. Por exemplo: o elemento a não pode conter o elemento label.
• Os elementos de linha nunca podem conter elementos de bloco.
• Elementos de bloco sempre podem conter elementos de linha.
• Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se encontra. Por exemplo, um p não pode conter uma div. Mas o contrário é possível.

Além dos dois grupos citados anteriormente as tags também são divididas em categorias. Essas categorias são: Metadata content, Flow content, Sectioning content, Heading content, Phrasing content, Embedded content e Interactive content.

Metadata content: são os elementos que são essenciais para o funcionamento do documento, porém eles não são visíveis para o usuário. Geralmente são aqueles elementos que ligam outros documentos ao HTML principal ou que fornecem algum tipo específico de informação para os navegadores. As tags que fazem parte desta categoria são: base, command, link, meta, noscript, script, style, title.

Flow content: são a maioria dos elementos utilizados dentro da tag body, responsáveis pela fluidez do site. Fazem parte da categoria: a, abbr, address, area (se for um decendente de um elemento de mapa), article, etc.

Sectioning content: são os elementos que agrupam os textos do documento. Fazem parte desta categoria: article, aside, nav e section.

Heading content: são os elementos que definem os títulos ou cabeçalhos do documento. Fazem parte desta categoria: h1, h2, h3, h4, h5, h6 e hgroup.

Phrasing content: são as tags que marcam os textos do documento, também fazem parte desta categoria os elementos que marcam texto dentro de parágrafos. Fazem parte desta categoria: a, abbr, area (se ele for descendente de um elemento de mapa), audio, b, bdo, br, button, etc.

Embedded content: são os elementos que servem para importar informações de outros documentos. Fazem parte da categoria: audio, canvas, embed, iframe, img, math, object, svg e video.

Interactive content: são os elementos que o usuário pode interagir. São eles: a, audio (se o atributo control for utilizado), button, details, embed, iframe, img (se o atributo usemap for utilizado), input (se o atributo type não tiver o valor hidden), keygen, label, menu (se o atributo type tiver o valor toolbar), object (se o atributo usemap for utilizado), select, textarea e video (se o atributo control for utilizado).

Concluindo, páginas HTML possuem diversas tags, só que obviamente você  não irá usar todas elas em seu projeto. Entretanto, aprender como os elementos que você mais utiliza nos seus documentos (p, a, img, div, etc.) devem ser implementados, só trará benefícios para o seu projeto. Os navegadores irão entender e categorizar facilmente o seu site, gerando posições mais altas em sites de pesquisa, a quantidade de problemas que ocorrem irá diminuir drasticamente e a facilidade em entender o código vai aumentar e será compartilhada com qualquer pessoa que entre em contato com o seu código.

Referência biblográfica:

FERREIRA, E.; EIS, D. Modelos de conteúdo. Apresentando o HTML5. in:______. [S.l. : s.n.], 2010. cap.4, pag.19-24. Disponível em: <http://www.w3c.br/pub/Cursos/CursoHTML5/html5-web.pdf>. Acesso em: 07 out. 2014.

Leia mais:
Parte anterior
Próxima parte