Diferença entre HTML 4 e HTML 5
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:
<div id="page"> <div id="header"> <h1><a href="http://marcusantonius.info">Marcus Antonius: Web versão Beta</a></h1> </div> <div id="container"> <div id="center" class="column"> <div id="post-102" class="post"> <h2><a href="/page-test-2/"> Page Test 2</a></h2> <div class="entry"> Texto Aqui</div> </div> <div id="post-101" class="post"> <h2><a href="/page-test/"> Teste 1</a></h2> <div class="entry"> Texto Aqui</div> </div> </div> <div class="navigation"> <div class="alignleft"> <a href="/blog/page/2/">« Posts antigos</a></div> </div> </div> <div id="right" class="column"> <ul id="sidebar"> <li> <h2>Informações</h2> <ul> <li><a href="/contato">contato</a></li> <li><a href="/curriculo/">curriculo</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">Marcus Antonius: Web versão Beta © 2009</div> </div>
Aqui a mesma página nas regras da W3C para o HTML 5:
<h1><a href="http://marcusantonius.info">Marcus Antonius: Web versão Beta</a></h1> <h2><a href="/page-test-2/"> Page Test 2</a></h2> Texto Aqui <h2><a href="/page-test/"> Teste 1</a></h2> Texto Aqui <a href="/blog/page/2/">« Posts antigos</a> <ul> <li> <h2>Informações</h2> <ul> <li><a href="/contato">contato</a></li> <li><a href="/curriculo">curriculo</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> Marcus Antonius: Web versão Beta © 2009
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.
fonte: treinaweb
post atualizado! faltaram algumas tags, mas meu grande amigo @isaacmarinho me avisou. Valeu Isaac!
Eu senti mesmo falta das tags que você citou… =D
Mas tudo bem. Post atualizado, bola pra frente. =)
Precisando, estamos por aqui.
Falow!
Muito bom o blog! =DDDDDD