A função desses elementos é tão simples quanto o próprio nome sugere: ao declarar elementos no seu documento, os nomes dos elementos também expressam o significado (ou função) deles.
Em vez dos velhos elementos como <div> e <span> (que continuam lá, você pode usá-los como sempre usou), entram novas tags como <article>, <header> ou <footer>.
Por quê usar as tags semânticas?
Observe os dois trechos de código abaixo:
Sem tags semânticas:
<body>
<div id="header">...</div><div id="menu">...</div>
<div class="articleContent">...</div>
<div class="advertise">...</div>
<div class="copyright">...</div>
<div class="copyright">...</div>
</body>
Com tags semânticas:
<body>
<header>...</header>
<nav>...</nav>
<article>...</article>
<nav>...</nav>
<article>...</article>
<aside>...</aside>
<footer>...</footer>
<footer>...</footer>
</body>
Num exemplo tão simples não parece grande coisa. Mas mesmo ele nos permite identificar um pouco da importância das tags semânticas:
- Código mais fácil de ler. O nome das tags identifica seu objetivo na página. Fica muito mais fácil entender a intenção de um determinado trecho de html.
- Otimização para search engines. Elementos semânticos tornam sua página mais fácil de ler e indexar, pois é mais fácil distinguir títulos, subtítulos e conteúdos relevantes.
- Otimização para leitores de tela. Softwares de leitura de tela conseguem diferenciar melhor entre títulos, seções, conteúdos e elementos estruturais da página com o uso das tags semânticas.
Usando os Elementos Semânticos
Vamos agora entender quais são os elementos semânticos do HTML5 e suas respectivas funções. No final, veremos um exemplo completo, usando todos os elementos em seu contexto.
<header>
Representa o título ou cabeçalho de uma página ou de uma seção dentro de uma página.
<hgroup>
Um grupo de headers.
<nav>
Usando para agrupar elementos de navegação. Por exemplo, um menu a ser apresentado na parte superior da tela.
<article>
Um artigo compreende uma área principal da página, com conteúdo relevante. Um exemplo de candidato a article é um post de um blog. Uma mesma página pode conter vários articles (de fato, qualquer elemento semântico pode aparecer várias vezes numa mesma página).
<section>
Representa uma unidade de conteúdo distinto. Se o post de blog que criamos com o elemento article contém diversas partes distintas, cada uma delas pode ser representada por uma section.
<figure>
Adivinha? Representa ma figura.
<figcaption>
Representa a legenda de um elemento figure.
<aside>
Compreende pequenas seções de conteúdo que não fazem parte do fluxo principal da página. Por exemplo, um anúncio.
<mark>
Define conteúdo que deve ser destacado. É a caneta marca-texto verde florescente do HML5.
<progress>
Mostra o progresso de uma tarefa.
<footer>
Representa o rodapé de uma seção da página ou da própria página.
Juntando as Peças: Um exemplo completo
e feio. Vai ficar bonito num post subsequente, quando falarmos de CSS3!
Nesse exemplo, criamos uma página que engloba todos os elementos semânticos. Salve esse código num arquivo .html e abra em diversos browsers diferentes. Veja que alguns browsers oferecem uma formatação padrão para alguns desses elementos, buscando destacar a função semântica de cada um dentro da página.
É claro que essa formatação padrão é bastante pobre em comparação com o que esperamos de uma página pronta para produção. Mas leve em consideração que da mesma forma que o browser é capaz de distinguir o "significado" das diferentes partes da página usando a semântica das tags, mecanismos de busca e leitores de tela também serão capazes de fazê-lo com a mesma facilidade.
Chega de enrolação. Hora do código:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Um Exemplo de Tags Semânticas</title>
</head>
<body>
<header>
<h1>Esse é o título da página!</h1>
</header>
<nav>
<a href="#">Home</a> |
<a href="#">Link 1</a> |
<a href="http://www.vidadeprogramador.com.br">Pra Descontrair...</a>
</nav>
<article>
<header>
<hgroup>
<h2>Título Principal de um Arigo Qualquer</h1>
<h3>Junto com um subtítulo</h3>
</hgroup>
</header>
<section>
<header>
<h4>Título da Primeira Seção do Artigo</h4>
</header>
<p>Um parágrafo da seção que contém <mark>um trecho de texto que deve ser destacado!!!!!</mark>
<p>Um outro parágrafo, que contém uma figura (veja!)
<figure>
<img src="http://www.pudim.com.br/SiteBuilder/UploadUsers/pudim.com.br/pudim.jpg" alt="Conheça o pudim!">
</figure>
<figcaption>
<a href="http://www.pudim.com.br/">Conheça o Pudim!</a>
</figcaption>
</p>
</section>
<section>
<header>
<h4>Título da Segunda Seção do Artigo</h4>
</header>
<p>
Lorem ipsum sit dolor amet...
</p>
</section>
<footer>
Algumas notas de rodapé para nosso artigo
</footer>
</article>
<aside>
<p>
Você pode colocar uns anúncios aqui...
</p>
<p>
... ou uma barra de progresso!!! <progress value="22" max="100"></progress> (mas por quê você faria isso???)
</p>
</aside>
<footer>
E finalmente um rodapé para nossa página... :) <br/>
(aquela mensagem de copyright que ninguém vai ler pode vir aqui!)
</footer>
</body>
Uma nota sobre DOCTYPE e Charset
Repare que na especificação do HTML5 a declaração do DOCTYPE no começo da página ficou muito mais simples. Para um comparativo das declarações de DOCTYPE entre as diferentes especificações do HTML veja o site do W3Schools aqui!
