Com a especificação da nova linguagem, os documentos HTML passaram a possuir elementos que adicionam semântica a seu conteúdo.

Por mais que visualmente seja fácil perceber a diferença entre as diferentes seções de um site, para os robôs de busca, esta percepção não é tão clara. O HTML 5 trouxe novos elementos que ajudam a definir os principais setores de um documento, sendo possível diferenciar diretamente pelo código, áreas importantes como: cabeçalho, rodapé e menu.

Elementos novos

  • section: define uma nova seção genérica no documento (ex: introdução, novidades, chamadas para contato)
  • nav: representa uma seção com links para outras partes do website; nem todos os links devem ficar contigos em um elemento nav, apenas os mais importantes; geralmente localizados no topo / rodapé
  • article: representa uma parte da página que poderá ser reutilizada e reutilizável (ex. Feeds); pode ser um post, um bloco de comentários ou um somente algum texto
  • aside: representa um bloco de conteúdo com informações separadas do conteúdo principal do site; ex: textos impressos, publicidades
  • hgroup: agrupa elementos de título de h1 até h6 quando eles tem múltiplos níveis com título e subtítulo
  • header: pode ser utilizado para agrupar índices de conteúdo, campos de busca, logos
  • footer: o rodapé da página
  • time: marca parte do texto que exibe uma data / horário precisos em um calendário gregoriano

Elementos modificados

  • b: passou a ter o mesmo nível semântico que o span; ainda mantém o estilo em negrito, sem atribuir importância ao texto marcado
  • i: passou a ter o mesmo nível semântico que o span; ainda mantém o estilo em itálico e seu uso indica ênfase. Útil para marcar termos em outros idiomas.
  • a: quando não possui o atributo href, agora representa um placeholder no exato lugar que este link se encontra
  • address: agora é tratado como uma seção do documento
  • hr: possui o mesmo nível semântico que um parágrafo, mas é utilizado para quebrar linhas e fazer separações
  • strong: passou a atribuir maior importância ao texto marcado

Elementos descontinuados

  • Possuem efeitos apenas visuais
    • basefont, big, center, font, s, strike, tt, u
  • Ferem os princípios de acessibilidade e usabilidade
    • frame, frameset, noframes
  • Elementos que não tiveram uso entre os desenvolvedores ou porque sua função foi substituída por outro elemento
    • acronym (abbr), applet (object), isindex, dir (ul)