`, `

` ou `

` forem mais apropriados - Não usá-lo a menos que exista, naturalmente, um título no início da seção ## Só use header e hgroup quando forem necessários [A tag "hgroup" foi descontinuada](http://lists.w3.org/Archives/Public/public-html-admin/2013Apr/0003.html). Fica o texto como registro histórico. Não faz sentindo escrever HTML de forma a **ferir a semântica**, certo? Infelizmente, não é difícil encontrar elementos `

` e `` sendo usados de forma inapropriada. Procure se informar mais a respeito da função deles, mas, resumindo: - `

` representa um grupo introdutório e/ou navegacional e, usualmente, contém o(s) título(s) de `

` - `` agrupa um conjunto de elentos `

`\-`

` quando o título de uma seção tem vários níveis, tais como subtítulos, títulos alternativos, etc ### Uso excessivo de header O elemento `
` pode ser usado quantas vezes forem necessários num documento, o que está causando confusões do tipo: ``` Título primário ``` Se o `
` contém somente um elemento de título, na verdade, ele não precisa ser usado. O elemento `
` já garante que o título vai constar no _outline_ do documento, e, porque `
` não contém múltiplos elementos ([como consta em sua definição](http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-header-element)), por que escrever código desnecessário? A solução é simples: ``` Título primário ``` ### Uso incorreto de hgroup Basicamente, não se deve usar `` com `
` quando: - Há somente 1 elemento-descendente de título - O `` funcionaria bem por conta própria (ou seja, sem `
`) O primeiro problema pode ser visto no código: ``` Título primário ``` No caso, deve-se, simplesmente, remover o elemento ``: ``` Título primário ``` O segundo problema é outro caso de incluir o elemento quando ele não se faz necessário: ``` Título primário Título secundário ``` Se não há elementos adicionais dentro de `
` (isto é, irmãos de ``), basta remover o `
`: ``` Título primário Título secundário ``` ## Não englobe todas listas de links com nav Com [mais de 40 novos elementos](http://dev.w3.org/html5/html4-differences/#new-elements) (no dia da publicação deste artigo), não é incomum haver dúvidas e erros de HTML5 na hora da utilização de alguns destes. Infelizmente, ainda é o caso com o elemento `
`. [Como consta em sua especificação](http://www.whatwg.org/specs/web-apps/current-work/multipage/sections.html#the-nav-element), > Nem todos os grupos de links em uma página precisam estar contidos em um elemento `
` - o elemento se destina, principalmente, a seções que consistem em blocos de navegação principal. (Grifo nosso) Atenção ao grifo "blocos de navegação principal" que, apesar de ser aberto a algumas interpretações, identifica-se mais com: - Navegação primária - Navegação secundária - Navegação _in page_ (dentro de um artigo longo, por exemplo) Como _diretivas gerais_ (e seguindo a lógica contida na especificação), não se aplica o elemento `
` a: - Controles de paginação - Social links - Categorias e Tags (de um artigo de blog, por exemplo) - Navegação terciária - Rodapés muito elaborados Nos momentos de dúvida ao usar `
`, pergunte-se a si mesmo: "Essa é uma navegação principal?". Para ajudar a responder, considere as seguintes "regrinhas": - Não use `
` a menos que você pense que `
` também seria apropriado com `` - Você adicionaria um link "Pular para o conteúdo" por questões de acessibilidade? Se a resposta para essas perguntas for "não", então, provavelmente, não se trata de um `
`. ## Erros comuns com o elemento figure ### Nem toda imagem é figure Os novos elementos não foram criados para que os desenvolvedores tivesse trabalho de escrever código a mais. Pensar isso é um erro comum de HTML5. Algumas pessoas, ao "atualizarem" seus sites para HTML5, colocam o elemento `
` em todas as imagens! Fazer isso não serve pra nada e a pessoa só está aumentando o próprio trabalho... [A especificação](http://www.whatwg.org/specs/web-apps/current-work/multipage/grouping-content.html#the-figure-element) define `
` como > algum conteúdo de fluxo, opcionalmente com um `
`, que é auto-contido e, tipicamente, referido como uma unidade única a partir do fluxo principal do documento. E é aí que reside a beleza do elemento `
`: ele pode ser afastado do conteúdo principal (para uma barra lateral, por exemplo) sem afetar o fluxo do documento. Se se tratar de uma imagem puramente de apresentação, que não é referenciada em outras partes do documento, definitivamente não se trata de um `
`. Outros casos de uso variam, mas, pra começar, pergunte-se a si mesmo: "Esta imagem é necessária para compreender o contexto atual?". Se não, provavelmente não é um `
` (pode ser um `
`, talvez). Se sim, pergunte-se novamente: "Eu poderia movê-lo para um apêndice?". Se a resposta para ambas as perguntas for "sim", então, provavelmente, trata-se de um `
`. ### O logo não é um figure Os mesmos princípios mostrados acima também se aplicam ao logo do site. Não é tão incomum se ver por esses dias códigos parecidos com: ``` Nome do site ``` Isso, simplesmente, não está certo... E não estou dizendo sobre o fato de o logo estar dentro de um `
` - isso, por si só, renderia um artigo inteiro. A real questão é o abuso do elemento `
`! No caso, a marcação poderia, simplesmente, ser feita assim: ``` Nome do site ``` ### figure pode ser mais que uma imagem Ao contrário do que muitos pensam, `
` pode ser áudio, vídeo, um gráfico (em SVG, por exemplo), uma citação, uma tabela, um bloco de código ou qualquer combinação destes e muito mais! Não se limite a usar `
` somente em imagens. Nosso trabalho como aficionados por padrões web também é de descrever com precisão nosso conteúdo através de uma correta marcação. ## Não inclua atributos de tipo desnecessariamente Este é, provavelmente, um dos erros mais comuns de HTML5. Embora não seja, tecnicamente, um erro, é uma boa prática evitar a inclusão de atributos de tipo. Em HTML5, não há necessidade de incluir o atributo `type` em `