Estrutura HTML5 com Microdata pronta

Com dúvidas sobre como criar seus sites com a nova estrutura HTML5? Não se preocupe, vamos falar exatamente sobre isso. Além da estrutura, também vou passar um método para a criação de microdata (schema.org), o que vai melhorar a pontuação de SEO do seu site.

Então vamos lá.

Estrutura HTML5

Antigamente, quando íamos criar nossos templates HTML, fazíamos algo parecido com o trecho abaixo:

<body>
	<div class="main">
		<div class="header"></div>
		<div class="menu"></div>
		<div class="article"></div>
		<div class="sidebar"></div>
		<div class="footer"></div>
	</div>
</body>

Ou seja, uma série de DIVs, uns dentro dos outros, que são diferenciados por classes ou IDs.

Atualmente já temos tags com nomes corretos para cada uma das áreas, veja o mesmo exemplo acima em HTML5.

<body>
	<main role="main">
		<header class="header"></header>
		<nav class="menu"></nav>
		<article class="article"></article>
		<aside class="sidebar"></aside>
		<footer class="footer"></footer>
	</main>
</body>

Isso melhora drasticamente a semântica do nosso HTML.

Mas vamos entender melhor o que cada classe faz.

  • <main> – Essa é a tag principal do seu site, ou seja, deve ser utilizada apenas uma vez apontando para o conteúdo principal da página. Nada que repete em todas as páginas do site deve ser incluído nessa tag, como logos, nome do site, navegação e coisas do tipo. Em um blog, essa tag representaria o conteúdo do artigo principal, que é diferente para cada página.
  • <header> – Essa tag pode ser apresentada como um cabeçalho sozinho, ou para um cabeçalho de outra tag, como section e/ou article. Você pode ter quantos cabeçalhos preferir dentro do seu documento, e deve utilizar as tags de heading (de H1 até H6) dentro da mesma.
  • <nav> – Essa tag representa um grupo de links de navegação (geralmente menus).
  • <aside> – Essa tag pode ser um conteúdo relacionado ao artigo (quando dentro da tag article), ou conteúdo que não é relacionado ao artigo, como barras laterais, anúncios e coisas do tipo (quando fora da tag article).
  • <article> – Essa tag representa um artigo, um texto, um post de um blog, um post em um fórum e coisas do tipo. Dentro dela é necessário ter um cabeçalho (<header>) e as tags de heading (H1 até H6). Você pode aninhar tags article, o que seria algo como um texto dentro do artigo.
  • <time> – Representa uma data. O atributo "datetime" deve indicar uma data no padrão correto.
  • <footer> – Essa tag representa o rodapé de um artigo, ou do site como um todo. Você pode utilizar quantos rodapés preferir dentro da estrutura HTML5.
  • <section> – Essa tag serve para agrupar conteúdo do mesmo tipo (parecida com <div>). Você pode ter quantas sessões quiser na sua estrutura HTML5. Ela deve receber um cabeçalho e tags de H1 – H2.

Mas como isso funciona na prática? Vamos ver.

Estrutura HTML5 com Microdata pronta

Veja um exemplo de um blog em HTML5:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		
		<link rel="stylesheet" href="css/style.css">
		
		<script src="js/html5.js"></script>

		<title>Estrutura HTML5 - Tutsup</title>
	</head>
	<body>
		<!-- Header principal -->
		<header>
			<h1>Precisa existir um h1 aqui.</h1>
			<p>Conteúdo (Opcional)</p>
		</header>
		
		<!-- Menu -->
		<nav>
			<ul>
				<li><a href="#">Item</a></li>
				<li><a href="#">Item</a></li>
				<li><a href="#">Item</a></li>
				<li><a href="#">Item</a></li>
			</ul>
		</nav>
		
		<!-- Barra lateral -->
		<aside class="sidebar">
			<h2>Sidebar (Opcional)</h2>
			<p>Conteúdo da Sidebar</p>
		</aside>
		
		<!-- Parte principal do site -->
		<main role="main">
			<!-- Artigo -->
			<article role="article" itemscope itemtype="http://schema.org/BlogPosting">
				<header>
					<h2 itemprop="headline">
						<a href="#" itemprop="url">
							Título do artigo
						</a>
					</h2>
				</header>
				
				<!-- Data da publicação -->
				<time itemprop="datePublished" datetime="2014-07-14">Segunda-feira, 14 de Julho de 2014</time>
				
				<!-- Imagem em destaque (Opcional) -->
				<img src="exemplo.jpg" alt="Nome da imagem" itemprop="image" />
				
				<!-- Descrição (Opcional) -->
				<div itemprop="description">Descrição do artigo.</div>
				
				<!-- Texto HTML do artigo -->
				<div class="post" itemprop="articleBody">O HTML do artigo vem aqui.</div>
				
				<!-- Sessão do autor -->
				<footer itemprop="author" itemscope itemtype="http://schema.org/Person">
					<h3 itemprop="name">Nome do autor</h3>
					<p itemprop="description">Biografia do autor.</p>
				</footer>
			</article> <!-- Fim do primeiro artigo -->
		</main>
		
		<!-- Barra lateral -->
		<aside class="sidebar">
			<h2>Outra Sidebar (Opcional)</h2>
			<p>Conteúdo da Sidebar</p>
		</aside>
		
		<!-- Conteúdo do rodapé -->
		<footer>
			Conteúdo do rodapé vem aqui
		</footer>
	</body>
</html>

No exemplo acima, teríamos um cabeçalho, um menu, uma barra lateral, um artigo principal, outra barra lateral, e um rodapé. Veja na imagem abaixo o exemplo:

  Exemplo de estrutura HTML5

Perceba que já incluí os dados de microdata para um blog (https://schema.org/BlogPosting), você pode alterar como preferir, porém, mantenha a estrutura.

Além disso, evite utilizar mais de um <h1> por página, isso pode atrapalhar os mecanismos de pesquisa a entender qual é o título principal da página.

Download da estrutura HTML5 acima

Se você quiser baixar o exemplo acima, já com CSS, o script HTML5 Shiv v3.7.0 para que as tags HTML5 funcionem nos navegadores mais antigos, e microdata, utilize o link abaixo:

Qualquer dúvida é só falar.