Estrutura HTML5 com Microdata pronta

Nenhum produto encontrado nessa seleção.

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.