Vamos Conhecer um pouco sobre a diferença entre HTML 4 e HTML 5

Vamos Conhecer um pouco sobre a diferença entre HTML 4 e HTML 5

htmlContinuando o tema de terça-feira, resolvemos exemplificar as diferenças entre o html 5 e o html 4 e vocês verão que não existem grandes diferenças e que os novos elementos só vieram para facilitar.

 

Por exemplos, vamos ver uma simples página de um blog, com o cabeçalho na parte superior, o rodapé na parte inferior, alguns posts, uma seção de navegação, e uma barra lateral, com mostra o código abaixo:

<html>  <head> <title>BLOG - TreinaWeb: Webstandards e programação WEB e Desktop</title> </head> <body> <div id="page"> <div id="header"> <h1><a href="/blog/">Blog TreinaWeb: Webstandards e programação WEB e Desktop</a></h1> </div> <div id="container"> <div id="center"> <div id="post-102"> <h2><a href="/page-test-2/"> Page Test 2</a></h2>        <div> <p>Texto Aqui</p> </div> </div> <div id="post-101"> <h2><a href="/page-test/"> Teste 1</a></h2> <div> <p>Texto Aqui</p> </div> </div> </div> <div> <div> <a href="/blog/page/2/">« Posts antigos</a> </div> <div></div> </div> </div> <div id="right"> <ul id="sidebar"> <li><h2>Informações</h2> <ul> <li><a href="/blog/politica/">Politica</a></li> <li><a href="/blog/listas/">Listas</a></li> </ul></li> <li><h2>Arquivos</h2> <ul> <li><a href='/blog/2009/04/'>Abril 2009</a></li> <li><a href='/blog/2009/03/'>Março 2009</a></li> <li><a href='/blog/2009/02/'>Fevereiro 2009</a></li> <li><a href='/blog/2009/01/'>Janeiro 2009</a></li> </ul> </li> </ul> </div> <div id="footer"><p>BLOG - TreinaWeb © 2009</p> </div> </div> </body> </html>

Aqui a mesma página nas regras da W3C para o HTML 5:

<html> <head> <title>BLOG - TreinaWeb: Webstandards e programação WEB e Desktop</title> </head> <body> <header> <h1><a href="/blog/">Blog TreinaWeb: Webstandards e programação WEB e Desktop</a></h1> </header> <section> <article> <h2><a href="/page-test-2/"> Page Test 2</a></h2>        <p>Texto Aqui</p> </article> <article> <h2><a href="/page-test/"> Teste 1</a></h2> <p>Texto Aqui</p> </article> <nav> <a href="/blog/page/2/">« Posts antigos</a> </nav> </section> <nav> <ul> <li><h2>Informações</h2> <ul> <li><a href="/blog/politica/">Politica</a></li> <li><a href="/blog/listas/">Listas</a></li> </ul></li> <li><h2>Arquivos</h2> <ul> <li><a href='/blog/2009/04/'>Abril 2009</a></li> <li><a href='/blog/2009/03/'>Março 2009</a></li> <li><a href='/blog/2009/02/'>Fevereiro 2009</a></li> <li><a href='/blog/2009/01/'>Janeiro 2009</a></li> </ul> </li> </ul> </nav> <footer> <p>BLOG - TreinaWeb © 2009</p> </footer> </body> </html>

Notou que o código ficou mais limpo e mais compreensível?

Foram acrescentados alguns elementos e com isto não precisamos mais colocar as divs e o layout ficou bem mais compreensível. Se você não conseguiu notar os elementos que foram acrescentados, estão listados abaixo, com uma breve explicação:

  • section: Uma seção, como um capítulo ou parte de um livro.
  • header: O cabeçalho da página mostrada.
  • footer: O rodapé da página mostrada, como uma assinatura de e-mail.
  • nav: Uma coleção de links.
  • article: Um artigo, uma entrada independente, em um blog, revista, jornal, e assim por diante.

Como não saiu a versão final do html 5, isto foi apenas um esboço, a versão definitiva pode ter algumas diferenças (esperamos que não)

Leave a Reply

Your email address will not be published.

Esse site utiliza o Akismet para reduzir spam. Aprenda como seus dados de comentários são processados.

Abrir chat
💬 Posso Ajudar?