---
title: Afinal, o que muda com o HTML 5?
authors: Thaiana Poplade
type: post
date: 2010-09-15
excerpt: Há algumas mudanças que vão ocorrer tanto nas estruturas técnicas do desenvolvimento de webpages quanto na postura e parâmetros que o profissional deverá apresentar na criação de um website.
url: /afinal-o-que-muda-com-o-html-5/
aktt_notify_twitter:
  - yes
tweetbackscheck:
  - 1356435020
shorturls:
  - 'a:3:{s:9:"permalink";s:54:"https://tableless.com.br/afinal-o-que-muda-com-o-html-5";s:7:"tinyurl";s:26:"https://tinyurl.com/3fj9k83";s:4:"isgd";s:19:"https://is.gd/lIDIQh";}'
twittercomments:
  - 'a:0:{}'
dsq_thread_id: 503039494
categories:
  - Artigos
  - HTML
  - HTML5
tags:
  - 2010
  - CSS3
  - desenvolvimento web
  - html
  - Na Prática
  - padroes web
  - tableless

---
Você desenvolvedor web, antenado, com certeza vem acompanhando a evolução, as críticas, as observações, os elogios e, claro, os tutoriais para entender um pouco mais do que efetivamente significa esta versão “5” do HTML.
  
Já você desenvolvedor, que limita-se a saber que uma nova versão está a caminho, talvez ainda não tenha tido a chance de conhecer quais serão essas importantes mudanças e o que trarão de novo para as bases do desenvolvimento web.

Aproveitando esta lacuna de compreensão do assunto procuro explanar, abaixo, sobre algumas mudanças que vão ocorrer tanto nas estruturas técnicas do desenvolvimento de webpages quanto na postura e parâmetros que este profissional deverá apresentar na criação de um website.

Lendo um “guia de aprendizado rápido para HTML5”, em meio à tantas outras informações que recebo todos os dias a respeito (desde jogos à músicas), percebi que além das diversas sinalizações quanto à nova estrutura que os códigos html vão apresentar, vai ficar cada vez mais claro que o trabalho do Htmler ou Front-End Engineer estará diretamente ligado à arquitetura de exibição de informação, já que no HTML5 vamos agrupar as informações de acordo com a sua relevância tanto para o usuário, quanto para os mecanismos de busca.
  
Aproveitando, deixo a primeira dica: este processo vai exigir que seja realizado um estudo sobre a importância e a hierarquia das informações e como elas devem ser exibidas no site, por isso caro desenvolvedor, ampliar seu leque para conhecer o gigante mundo da arquitetura de informação para websites, pode ser um grande diferencial em seu currículo.
  
Além disso, conhecer um pouco melhor o conteúdo do site, sem limitar-se à ao “Loren Ipsun” no HTML5, auxiliará na construção da semântica do código e numa comunicação mais direta com os mecanismos de busca, como por exemplo, conseguir perceber mais claramente se numa lista usaremos os tipos UL, OL ou DL, levando em consideração principalmente a ordenação e subordinação das informações na tela e na leitura dos mecanismos.

Talvez caro leitor, você esteja pensando: “mas hoje, isso já é possível e deve ser feito” então, lhe explico o porque de ressaltar a importância de um cuidado com a semântica da informação nos websites:  infelizmente muitos desenvolvedores limitam-se a conhecer apenas o uso de DIV’s em substituição às tabelas, afim de resolver “problemas” de diagramação de imagens e textos quando feito o cross-browsers, bem como ignoram qualquer estrutura hierárquica que a informação exibida possa ter no site, e com o HTML5,  isso não poderá mais ser ignorado assim
  
como as incompatibilidades entre browers, também devem diminuir.

Em termos técnicos no html5, teremos a tag **<header>** que poderá ser utilizada para toda informação introdutória ou elementos de auxílio a navegação como H1, H2, etc;  a tag **<nav>** para utilizar em estruturas que representem a navegação do site, como os menus; as tags **<section>** para as secções da página;  as tags **<article>** que vão representar uma parte do conteúdo como notícias ou novos posts de um blog;  as tags **<aside>** que vão representar um grupo de conteúdo com pouca relação ao conteúdo principal, mas de considerável relevância para estar presente na página &#8211; neste caso, o exemplo que podemos citar são os sidebar’s com banners ou informações de atendimento à clientes ao lado do conteúdo principal e por fim e não menos importante, as tags **<footer>** que utilizaremos para informações de rodapé do site &#8211; assinaturas, endereços, copyright, etc.

Percebe? Teremos que nos familiarizar muito mais com a estratégia comunicacional do site, através das informações textuais e visuais, do que costumamos fazer nos projetos de hoje para que a construção dos nossos códigos, dentro da nova versão, tragam ainda mais benefícios de usabilidade e acessibilidade ao site. Sem contar claro, com o fato de poder alterar a posição do seu site nos resultados de busca orgânica, através da clareza na exposição das informações e na linearidade de comunicação entre seu código e o robô de resultados.

Enfim, teremos muito a aprender e muito a compartilhar com os designers de interfaces e arquitetos de informação, mas acima de tudo, vejo como uma situação positiva aos htmler’s, afinal estaremos participando ainda mais da concepção dos projetos como um todo e tendo a chance de desenvolver um trabalho muito mais direcionado e minucioso, valorizando a posição e a existência de profissionais Front-End nas empresas e agências de soluções web.

<div style="width: 1px; height: 1px; overflow: hidden;">
  Você desenvolvedor web, antenado, com certeza vem acompanhando a evolução, as<br /> críticas, as observações, os elogios e, claro, os tutoriais para entender um pouco mais do que<br /> efetivamente significa esta versão “5” do HTML.<br /> Já você desenvolvedor, que limita-se a saber que uma nova versão está a caminho, talvez<br /> ainda não tenha tido a chance de conhecer quais serão essas importantes mudanças e o que<br /> trarão de novo para as bases do desenvolvimento web.</p> 
  
  <p>
    Aproveitando esta lacuna de compreensão do assunto procuro explanar, abaixo, sobre<br /> algumas mudanças que vão ocorrer tanto nas estruturas técnicas do desenvolvimento de<br /> webpages quanto na postura e parâmetros que este profissional deverá apresentar na criação<br /> de um website.
  </p>
  
  <p>
    Lendo um “guia de aprendizado rápido para HTML5”, em meio à tantas outras informações<br /> que recebo todos os dias a respeito (desde jogos à músicas), percebi que além das diversas<br /> sinalizações quanto à nova estrutura que os códigos html vão apresentar, vai ficar cada<br /> vez mais claro que o trabalho do Htmler ou Front-End Engineer estará diretamente ligado à<br /> arquitetura de exibição de informação, já que no HTML5 vamos agrupar as informações de<br /> acordo com a sua relevância tanto para o usuário, quanto para os mecanismos de busca.<br /> Aproveitando, deixo a primeira dica: este processo vai exigir que seja realizado um estudo<br /> sobre a importância e a hierarquia das informações e como elas devem ser exibidas no<br /> site, por isso caro desenvolvedor, ampliar seu leque para conhecer o gigante mundo da<br /> arquitetura de informação para websites, pode ser um grande diferencial em seu currículo.<br /> Além disso, conhecer um pouco melhor o conteúdo do site, sem limitar-se à ao “Loren Ipsun”<br /> no HTML5, auxiliará na construção da semântica do código e numa comunicação mais direta<br /> com os mecanismos de busca, como por exemplo, conseguir perceber mais claramente<br /> se numa lista usaremos os tipos UL, OL ou DL, levando em consideração principalmente a<br /> ordenação e subordinação das informações na tela e na leitura dos mecanismos.
  </p>
  
  <p>
    Talvez caro leitor, você esteja pensando: “mas hoje, isso já é possível e deve ser feito” então,<br /> lhe explico o porque de ressaltar a importância de um cuidado com a semântica da informação<br /> nos websites: infelizmente muitos desenvolvedores limitam-se a conhecer apenas o uso de<br /> DIV’s em substituição às tabelas, afim de resolver “problemas” de diagramação de imagens e<br /> textos quando feito o cross-browsers, bem como ignoram qualquer estrutura hierárquica que a<br /> informação exibida possa ter no site, e com o HTML5, isso não poderá mais ser ignorado assim<br /> como as incompatibilidades entre browers, também devem diminuir.
  </p>
  
  <p>
    Em termos técnicos no html5, teremos a tag <header> que poderá ser utilizada para toda<br /> informação introdutória ou elementos de auxílio a navegação como H1, H2, etc; a tag <nav><br /> para utilizar em estruturas que representem a navegação do site, como os menus; as tags<br /> <section> para as secções da página; as tags <article> que vão representar uma parte do<br /> conteúdo como notícias ou novos posts de um blog; as tags <aside> que vão representar um<br /> grupo de conteúdo com pouca relação ao conteúdo principal, mas de considerável relevância<br /> para estar presente na página &#8211; neste caso, o exemplo que podemos citar são os sidebar’s com<br /> banners ou informações de atendimento à clientes ao lado do conteúdo principal e por fim e
  </p>
  
  <p>
    não menos importante, as tags <footer> que utilizaremos para informações de rodapé do site &#8211;<br /> assinaturas, endereços, copyright, etc.
  </p>
  
  <p>
    Percebe? Teremos que nos familiarizar muito mais com a estratégia comunicacional do site,<br /> através das informações textuais e visuais, do que costumamos fazer nos projetos de hoje para<br /> que a construção dos nossos códigos, dentro da nova versão, tragam ainda mais benefícios de<br /> usabilidade e acessibilidade ao site. Sem contar claro, com o fato de poder alterar a posição do<br /> seu site nos resultados de busca orgânica, através da clareza na exposição das informações e<br /> na linearidade de comunicação entre seu código e o robô de resultados.
  </p>
  
  <p>
    Enfim, teremos muito a aprender e muito a compartilhar com os designers de interfaces e<br /> arquitetos de informação, mas acima de tudo, vejo como uma situação positiva aos htmler’s,<br /> afinal estaremos participando ainda mais da concepção dos projetos como um todo e tendo a<br /> chance de desenvolver um trabalho muito mais direcionado e minucioso, valorizando a posição<br /> e a existência de profissionais Front-End nas empresas e agências de soluções web.
  </p>
</div>