Como desenvolvedores web começou a usar técnicas de layout flutuante, eles divs quase sempre criados chamada nav

, cabeçalho, e rodapé. Os desenvolvedores do HTML5 decidiu criar novos elementos com esses nomes. Dê uma olhada no seguinte código para ver as tags semânticas em ação.

Este é o meu cabeçalho
Seção 1
Seção corpo ...
Seção 2
Seção corpo ...
Artigo
Artigo corpo ...

Como você pode ver, há uma série de novas tags de marcação semântica em HTML5:

• cabeçalho: Este não é o mesmo que as etiquetas h6-H1. Denota um pedaço da página que irá conter um cabeçalho para a página. Muitas vezes, o cabeçalho vai encher-se a largura da página, e vai ter algum tipo de imagem bandeira da. É frequentemente contém h1 conteúdo.

• nav: Esta tag indica algum tipo de seção de navegação. Não tem nenhum estilo particular de sua própria, mas é frequentemente usado como um menu horizontal ou vertical para navegação do site.

• seção: Uma secção é utilizada para especificar uma parte genérica da página. Você pode ter várias seções na mesma página.

• artigo: Um artigo é como uma seção, mas é projetado para uso com recursos externos. Muitas páginas são construídas automaticamente pelo software, e quando estas páginas integrar o conteúdo de outras fontes, ele pretende usar o artigo tag para integrar este conteúdo.

• rodapé: Um rodapé é destinado para exibir o conteúdo de rodapé na parte inferior de uma página. Tipicamente um rodapé cobre o fundo da página, ainda que este não é o comportamento padrão.

Note-se que nenhum destes elementos têm qualquer formatação específica. É até você para fornecer formatação por meio de código CSS. Cada um dos elementos pode ser formatado diretamente como um elemento HTML (porque isso é o que é). Todos os navegadores última versão apoiar as tags de marcação semântica, mas se você quer apoiar os navegadores mais antigos (especialmente isto é, antes da versão 8), você ainda vai precisar usar divs.