Entender exatamente onde e quando usar os elementos introduzidos no HTML5 pode ser complicado para começar. A princípio, dei um tapa em todos os lugares com pouca cautela.
“Isso é semântico, certo?”
Li alguns artigos sobre como usar a verdadeira miscelânea de novos elementos HTML5 de maneira sensata – mas nunca tive certeza de ter entendido completamente.
“Esta é uma seção da página com um artigo, acho que cada coluna dentro é uma seção desse artigo e a imagem desse artigo é uma seção do artigo também, então é melhor colocá-la em uma seção. Ah, sim, e a coisa toda é filha de uma seção da página principal. “
Errado. A marcação do layout da página pode ser bastante complicada. É lamentável, mas para criar até mesmo os designs mais mundanos, muitas vezes é necessário recorrer a uma pequena marcação estranha e aninhamento de elemento duvidoso. Sim, dá para cortar muita sopa com um pouco de: antes e: depois, mas isso não vai cuidar de tudo. Se você está brandindo os elementos ‘semânticos’ do HTML5 da mesma maneira difícil de manejar que eu fiz inicialmente, você está apenas atingindo seu site com uma grande e velha barra de confusão.
Isso mudou quando executei minha marcação em uma ferramenta para analisar o esboço do documento. Eu uso uma extensão do Chrome útil para tornar isso fácil de fazer em todo o processo de desenvolvimento ( https://chrome.google.com/webstore/detail/html5-outliner/afoibpobokebhgfnknfndkgemglggomo ). O simples fato de verificar o esboço do documento de um site que construí recentemente me ajudou a entender todo o conceito muito melhor do que qualquer um dos artigos que li anteriormente.
Se você não fez isso antes, eu realmente recomendo se certificar de que a marcação que você está escrevendo está realmente aderindo à estrutura do conteúdo que você está marcando. A extensão de esboço de documento HTML5 do Chrome agora é usada (de certa forma) constantemente em meu processo de desenvolvimento de front-end. Confira os contornos de seus documentos agora!
(Aviso: ‘esboço do documento’ não é algo HTML5, mas não consigo imaginar que muitas pessoas que se importam com essas coisas não tenham começado a usar ‘HTMl5’ ainda. Há uma documentação mais abrangente do esboço do documento criado em HTML4 e HTML5 disponível no MDN: https://developer.mozilla.org/en-US/docs/Sections_and_Outlines_of_an_HTML5_document )