HTML e CSS 12: Apresentação do HTML5

1. Comparação entre HTML4 e HTML5

Vamos começar a colocar a mão na massa abordando algumas tags do html5:

  • <header>
  • <section>
  • <nav>
  • <article>
  • <footer>
  • <aside>

Em primeiro lugar, quero comparar um código html4 com html5. Você vai reparar que, apesar de algumas mudanças de nomes, o formato permanece o mesmo.

Aqui estão as páginas nas versões HTML4 e HTML5.

Primeiro, em html4.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Este código é em HTML4</title>
  <link href="estilos.css" rel="stylesheet" type="text/css">
 </head>
 <body>
  <div id="geral">
  <div id="topo"> </div>
  <div id="nav" class="redondo">
    <ul>
      <li class="active"><a href="#">home</a></li>
      <li><a href="#">portfolio</a></li>
      <li><a href="#">blog</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </div>
  <div id="lateral">
    <p> Este é um texto para aside, daqueles que Shakespeare usava.</p>
  </div>
  <div id="conteudo">
    <div id="artigo">
      <p>Cras pulvinar metus non lacus lacinia laoreet. Mauris enim nibh, imperdiet sed auctor.</p>
    </div>
    <div id="artigo"> Nullam id felis vitae leo iaculis tincidunt. Phasellus pharetra facilisis dignissim.</div>
    <div id="artigo"> Nulla potest tantum se dicere amatam vere quantum a me, Lesbia, amata mea est. </div>
  </div>
  <div id="footer">Este é o rodapé!</div>
</div>
</body>
</html>

E abaixo em html5.

<!DOCTYPE HTML>
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Meu primeiro código HTML5</title>
  <link href="estilos.css" rel="stylesheet" type="text/css">
 </head>
 <body>
  <div id="geral">
  <header class="redondo"> </header>
  <nav class="redondo">
    <ul>
      <li class="active"><a href="#">home</a></li>
      <li><a href="#">portfolio</a></li>
      <li><a href="#">blog</a></li>
      <li><a href="#">contact</a></li>
    </ul>
  </nav>
  <aside>
    <p> Este é um texto para aside, daqueles que Shakespeare usava.</p>
  </aside>
  <section id="conteudo">
    <article>
      <p>Cras pulvinar metus non lacus lacinia laoreet. Mauris enim nibh, imperdiet sed auctor.</p>
    </article>
    <article> Nullam id felis vitae leo iaculis tincidunt. Phasellus pharetra facilisis dignissim.</article>
    <article> Nulla potest tantum se dicere amatam vere quantum a me, Lesbia, amata mea est. </article>
  </section>
  <footer>Este é o rodapé!</footer>
</div>
</body>
</html>

2. Novas tags

Se você reparar, o código é bem parecido, mas algumas linhas divergem entre uma versão e outra. Por exemplo, a declaração de linguagem, logo no começo, é diferente. A declaração html5 é mais simples, e define somente que a linguagem que usaremos é HTML.

A próxima diferença aparece por conta de uma das novas tags inseridas recentemente. Ao invés de definir uma DIV para a região do topo assim: <div id=”topo”> </div> , o HTML5 faz isto: <header class=”redondo”> </header>. A tag header foi projetada para definir qual a parte do documento que representa o cabeçalho da página. No cabeçalho, supostamente, vão a identidade visual do site, um logotipo e, eventualmente, mais algumas informações e recursos. Por exemplo, você pode colocar o endereço da empresa no header, ou uma barra de ferramentas.

O mesmo acontece com as tags nav, aside, section, article e footer. Cada uma tem uma função diferente dentro da página.

tag função
header cabeçalho, a porção superior de uma página, que contém informações de identificação do site
nav itens de navegação: menus, tag cloud, lista de links etc
aside literalmente, à parte. Qualquer tipo de informação que complementa a informação principal da página
section seção, ou seja, uma subdivisão da página
article artigo, uma porção de conteúdo da página
footer rodapé, informações de finalização da página

A página do código HTML5 pode ser vista aqui e a do HTML4 aqui.

A aparência do site em si não muda nada, se codificado em HTML4 ou HTML5.

Mas, então, qual a vantagem? E para que estas tags novas se o site tem a mesma aparência? Aliás, qual a vantagem de se usar HTML5?

Bem, dê uma olhada neste post daqui do site mesmo.