Estrutura de um site em HTML5 - As tags < header >, < footer > e < article >

Neste tutorial de nosso Curso de HTML5, iremos aprender os conceitos básicos para estruturarmos uma página que faz uso do HTML5.

Para isso, iremos estudar as tags <header>, <footer> e <article>, bem como falar de suas diferenças semânticas e de uso em relação as <div>.

 Obter CERTIFICADO do Curso de HTML5

O problema com as <div>

Sem dúvidas, um dos elementos mais importantes do HTML é a tag <div>, pois ele limita e faz divisões de quaisquer porções de código.

Ou seja, através da tag <div> podemos ter regiões, também chamadas de containers, com quantos e quais elementos quisermos.

Por exemplo, usamos a div para delimitar a parte superior de nossa página, outra div representado o menu lateral, também é comum vermos o conteúdo dentro de uma div principal, e dentro desta várias outras, como uma div para uma imagem e sua descrição, outra div para as informações do autor do artigo, outra div com informações que vão ficar no rodapé do site...e por aí vai.

É fácil notar a importância deste elemento. Porém, há um problema com ele: ele é muito, muito genérico. Apenas lendo o nome da tag não é possível saber para que serve aquele elemento.

Se você olhar códigos-fonte de diversos sites por aí, verá uma verdadeira enchente de divs dentro de divs, onde é complicado saber do que se trata cada uma destas tags, sendo necessário maior estudo e avaliação para fazer a manutenção e correção de código.



Site em HTML5 - As Tags <header>, <footer> e <article>

Usar divs não é algo ruim ou errado.
Pelo contrário, são importantíssimas, e você sempre vai usar. Porém, se passar a usar demais, seu site ficará cada vez mais complicado de se manter e controlar, pois para saber o que ocorre dentro de uma div, precisamos ler seu conteúdo.

Há maneiras mais eficientes e lógicas de se estruturar um site em HTML5 do que apenas usando as divs e span, que veremos agora.

Vamos agora, neste tutorial de HTML5, apresentar 3 grandes e importantes elementos do HTML5, que são as tags <header>, <footer> e a <article>.

Esses elementos, por si só, já são auto descritíveis, eles um significado lógico e semântico, não são gerais, como é o caso das tags <div> e <span>, que também são usadas pra estruturar o corpo de um site.

A tag <header> do HTML5

Como o próprio nome pode sugerir, ela que vai encabeçar uma região de seu site.
Cuidado para não confundir com a tag <head>, que serve para informar características da página.

O que existe no <header> será, de fato, exibido no seu site.
Geralmente é um o título de um artigo, slogan, logotipo de sua empresa/site.

<header>
 <h1>Bem-vindo ao Tutorial HTML Progressivo</h1>
 <h2>Apostila de HTML & CSS completa e grátis</h2>
</header>

A tag <footer> do HTML5

O elemento semântico <footer>, do HTML5, é análogo ao elemento <header>, mas este se refere ao rodapé, que geralmente fica abaixo, em seu site.

É costume usarmos o rodapé para divulgar informações de conteto e/ou direitos autorais:

<footer>
  <p>Todos os direitos reservados. Projeto HTML Progressivo 2014</p>
</footer>

A tag <article> do HTML5

Se já estudamos o elemento do topo (header) e do rodapé (footer), nada mais óbvio que mostrar algum elemento que seja responsável pelo escopo da página, pelo artigo e/ou conteúdo principal de seu site, tarefa esta que ficará a cargo da tag <article>.

Embora o uso da tag seja igual ao das tags anterior, as informações contidas dentro deste elemento geralmente são maiores, possuem um título, imagens, vários parágrafos, informações sobre o autor daquele artigo etc.

Por isso, também usamos a tag "header" dentro da tag "article", para definir um cabeçalho dentro do artigo (com o título do artigo, por exemplo).
Ao fim da tag "article", também é comum usar um "footer", para dar mais informações a respeito daquele artigo, de seu autor, referências bibliográficas etc, veja:

<article>
 <header>
  <h3>Como criar sites: HTML e CSS</h3>
  <p>HTML blá blá blá <br /> etc etc etc</p>
 </header>
 <footer>
  <p>Artigo criado por Zezinho Webmaster</p>
 </footer>
</article>

CSS no HTML5

Uma outra vantagem, além da semântica, destas novas tags do HTML5 se dá quando vamos estilizar nosso site usando CSS, pois é mais fácil acessar elementos únicos e bem definidos, do que as genéricas divs (além de ter que sar, nas div, seletores, como os class e ID).

Vamos criar um site com as tags <header>, <footer> e <article> (e dentro desta colocar outras <header> e <footer>).

Vamos estilizar as tags H1, deixando-as na cor vermelha, mas somente as que estão dentro de uma <header>, fezemos " header h1 { código CSS }"

Analogamente, para estilizar as tags H2 deixando-as na cor azul, mas só as que estão dentro de uma <header>: "header h2 { código CSS}

Vamos também colocar a fonte do rodapé (tags footer) em itálico, bem como definir um tamanho de 300 pixels de altura para o corpo do artigo (article).

Nossa folha de estilos fica:

header h1{
 color: red;
}

header h2{
 color: blue;
}

article {
 height: 400px;
 margin: 0 auto;
}

footer p{
 font-style: italic;
}


E nosso documento de HTML5:

<!DOCTYPE html>
 
<html> 
 <head>
 <title>Tutorial de HTML5</title>
 <meta name="description" content="Como usar as tags header, footer e article em HTML5">
 <meta charset="utf-8">
 <link rel="stylesheet" type="text/css" href="estilo.css"/>
 <script type="text/javascript">
  teste
 </script>
</head>

 <body>
  <header>
   <h1>Tutorial HTML Progressivo</h1>
   <h2>Apostila de HTML & CSS completa e grátis</h2>
  </header>

<article>
 <header>
  <h3>Como criar sites: HTML e CSS</h3>
  <p>HTML blá blá blá <br /> etc etc etc</p>
 </header>
 <footer>
  <p>Artigo criado por Zezinho Webmaster</p>
 </footer>
</article>

  <footer>
   <p>Todos os direitos reservados. Projeto HTML Progressivo 2014</p>
  </footer>
 
 </body>

</html>

Note como fica mais fácil para passar o olho e saber a estrutura da página.
Caso usássemos somente divs, teríamos que ler o conteúdo das divs. Agora temos só que ler o nome dos elementos semânticos para identificarmos onde cada parte da estrutura está localizada no código.

4 comentários:

Anônimo disse...

Ótimo tutorial...Adorei!!!

Andre Prado disse...

Ta mais se o meu conteúdo principal não for um artigo. Eu usaria uma no lugar do , ou obrigatoriamente eu devo usar para o conteúdo principal?

Anônimo disse...

Não Andre, não é obrigatório. A função dessas novas tags são para facilitar a manutenção e a organização da estrutura do código do site, sendo assim é apenas para lhe ajudar a entender melhor a sua linha de código.

Helio Santos disse...

Valeu! Ótimo artigo.