Blog do TreinaWeb
Dicas, notícias e informações sobre cursos, programação, webstandards e desenvolvimento web.Posts com a Tag ‘html 4’
-
Diferença entre HTML 4 e HTML 5
4 de June de 2009
Continuando 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" class="column"> <div class="post" id="post-102"> <h2><a href="/page-test-2/"> Page Test 2</a></h2> <div class="entry"> <p>Texto Aqui</p> </div> </div> <div class="post" id="post-101"> <h2><a href="/page-test/"> Teste 1</a></h2> <div class="entry"> <p>Texto Aqui</p> </div> </div> </div> <div class="navigation"> <div class="alignleft"> <a href="/blog/page/2/">« Posts antigos</a> </div> <div class="alignright"></div> </div> </div> <div id="right" class="column"> <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)
Até a próxima!
Fonte: Hobo Blog