Skip to content

Diferença entre HTML 4 e HTML 5 e algumas observações

5 de junho de 2009

Pegando carona num artigo do Treina Web, estou postando algumas diferenças de html 4 pra html 5 e abaixo algumas observações.

O html 5 veio realmente para facilitar nossa vida, usando-o, estamos simplificando nosso código, com isso conseguimos ter uma melhor manutenção do nosso site.

Peguei um exemplo de código de Blog citado no Treina Web para mostrá-lo a vocês. Este blog possui uma página simples de qualquer blog, cabeçalho, rodapé ,alguns posts, uma seção de navegação e uma barra lateral.

Em html 4:

<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>

Em 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>

Sim, o código ficou mais simples e limpo, com isso não precisamos acrescentar divs, mais classes, etc.. Os elementos adicionados foram:

  • 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.

Então, ficou ou não de fácil  de entendimento e consequentimente de fácil manutenção. Por enquanto isso ainda é um esboço do html5, ainda não saiu a versão final. Mas se nota o quanto tornou nossa vida mais fácil.

O html 5 é focado sempre na web semântica, onde toda tag terá um significado, não sendo necessária a criação de várias divs, porque teremos tags para cada elemento da página.

A Apple foi a primeira a introduzir o html5 no Iphone e logo após no Safari 4, logo depois o Google aplicou no Android e no Chrome 2.

Com a chegada do html5 os dias de dependência do Flash para visualizar vídeos nas páginas acabaram, um bom exemplo disso é o http://www.youtube.com/html5 (Você precisa ter Firefox 3.5, Google Chrome 2, Safari 4, Opera 10  instalado), acabando com esta dependência , assitir vídeos ficou mais acessível podendo controlá-lo com o teclado.

Agora o tratamento de acessibilidade, com o html5, serão recurso nativo do html, e não como um recurso “extra”, facilitando a acessibilidade, também temos melhores resultados com motores de buscas, pois eles priorizam sempre a semântica do site.

Muitas novidades por aí no novo HTML, enquanto isso vamos estudando para podermos colocar em prática.

O usuário Pedro Rogério levantou uma questão que não tinha posto , era sobre o DOCTYPE, resolvi então fazer uma atualização sobre:

O DOCTYPE para documentos HTML 5 não necessita mais de um DTD, sendo assim, o doctype fica da seguinte forma:

<!DOCTYPE html>

7 Comentários leave one →
  1. Leonardo L Procópio permalink
    6 de junho de 2009 11:30

    Bem legal a comparação!
    Grande abraço!

  2. 7 de junho de 2009 0:50

    É isso ai.. é preciso diminuir essa bagunça que éhojedesenvolver pra web😀

  3. 7 de junho de 2009 22:53

    Parabens pelo post guria… para aqueles que continuam resistindo as web Standards e a Web Semantica, chegará uma hora em que nada mais serão do que Profissionais Obsoletos.

    Hasta Luego…

  4. 7 de junho de 2009 23:26

    Bom! E como fica o CSS pra isso?

    #article {color: red} ?

    essas tags atuam como um div com id?

  5. 8 de junho de 2009 8:01

    Uma coisa também que você deveria ter citado é a mudança do Doctype. Abraços.

  6. blogdatay permalink*
    8 de junho de 2009 10:29


    4. Pedro Rogério | 8 08UTC Junho 08UTC 2009 at 8:01

    Uma coisa também que você deveria ter citado é a mudança do Doctype. Abraços.

    Obrigada por me lembrar, já atualizei o post falando sobre isso! =)

  7. blogdatay permalink*
    8 de junho de 2009 14:22


    4. Polo | 7 07UTC Junho 07UTC 2009 at 23:26

    Bom! E como fica o CSS pra isso?

    #article {color: red} ?

    essas tags atuam como um div com id?

    Não Polo, elas atuam como tag normal, você pode
    colocar no CSS article {color: red} mesmo, o id ou classe você pode colocar para cada tag como fizemos com div.

    O único problema é que o IE6 nao renderiza tags q ele nao conhece, então vai precisar de um javascript pra ele interpretar essas tags.

    Espero ter ajudado!

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s

%d blogueiros gostam disto: