Feeds
Newsletter
HTML 5 - Mudanças na estrutura e semântica
A Semântica sempre é um dos pontos mais importantes do desenvolvimento com Padrões Web. Algumas iniciativas com o Microformats vieram na tentativa de trazer mais semântica ainda para nossos códigos, com o intuito de que novas aplicações e oportunidades pudessem utilizar melhor a informação distribuída na web. Acontece que o resto do HTML não foi há bastante tempo modificado. Por exemplo, como você consegue distinguir de forma automática as informações do "header" (cabeçalho) dos sites? Não consegue. Você não consegue, por exemplo, de maneira automatizada, identificar o que é um rodapé ou a parte do layout que está exibindo um artigo.
Todos os dias sites e mais sites são publicados na internet e nenhum deles com um padrão de nomenclatura de classes e ids que possamos utilizar para extrair informação de maneira inteligente. O HTML 4.01 é a versão atual da linguagem básica da Web, e não é atualizado há alguns anos. Esses detalhes de semântica não podem ser supridos para sempre por tecnologias como o Microformats. A versão 5 do HTML tende a suprimir essas necessidades e também atualizar pontos antigos do HTML 4, por exemplo, formulários.
Como disse no começo deste artigo, a estrutura de um site não é óbvia para as máquinas. Não existe nenhum padrão de construção dos elementos para indicar o que é o cabeçalho e o que é o rodapé, por exemplo. No HTML 5, iremos utilizar um padrão de tags que nos ajudará a marcar estas estruturas. Uma estrutura conhecida é mais ou menos assim:
<body>
<div id="header">...</div>
<div id="menu">...</div>
<div class="post">...</div>
<div id="sidebar">...</div>
<div id="rodape">...</div>
</div>
</body>Na estrutura acima, utilizei alguns nomes de classes e ids que costumamos utilizar no dia-a-dia. Eu mesmo não utilizo a classe POST, uso mais CONTENT ou algo parecido. A estrutura do HTML acabará com isso. A idéia é substituir esse amontoado de DIVS por elementos que se encarreguem dessas funções, um exemplo da estrutura serial:
<body>
<header>...</header>
<nav>...</nav>
<article>
<section>
...
</section>
</article>
<aside>...</aside>
<footer>...</footer>
</body>- O elemento header define o cabeçalho. Nav define o menu ou a navegação do site.
- Article define uma parte da página que tem uma composição de formulários, textos etc. Por exemplo, pode ser um post de forum, blog, comentários etc.
- O elemento Section define uma seção do layout em um determinado element. Ele pode conter um header e também um footer se preciso.
- O elemento aside consiste em envolver informações que tem algo a ver com o conteúdo principal do site. Pode ser um menu lateral, um sidebar padrão com menu, banner, busca etc...
- Footer define o rodapé do elemento ou do layout.
Entenda que, agora, qualquer elemento pode ter seu conteúdo separado por seções com o elemento section. Note também que os elementos podem ter também um header e um footer independentes do resto do layout. Como na imagem.
Uma dúvida comum entre os desenvolvedores é como fazer a estruturação e distribuição das tags de títulos (h1 até h6). Por exemplo, se eu utilizei já a tag H1 no logo do site, poderei utilizar para o título do artigo? Se repetirmos muitas vezes as mesmas tags de títulos, a importância que cada título tem sobre o outro se perderá. O Google poderá indexar de forma diferente e etc.
No HTML 5 esse problema ser resolverá, porque cada section que você inicia, você poderá começar novamente uma nova ordem de títulos. Por exemplo:<header>
<h1>Logo</h1>
</header>
<article>
<section>
<h1>Título do artigo</h1>
<p>texto</p>
<h2>Subtitulo</h2>
<p>Mais texto</p>
</section>
</article>Dessa forma você conseguirá definir exatamente qual a importância de cada título e os leitores de tela, sistemas de busca e outras aplicações conseguirão fazer uma separação mais eficaz dos elementos textuais.
Entenda que os divs não irão deixar de existir. Você os usará em casos muito específicos, por exemplo, para fazer caixas de destaque:
<section>
<div class="destaque">
<h1>Destaque 1</h1>
<p>Texto</p>
</div>
<div class="destaque">
<h1>Destaque 1</h1>
<p>Texto</p>
</div>
</section>Para saber mais sobre isso, leia: The Elements Of HTML 5.
Irei escrever outros artigos sobre a inserção de vídeo e áudio no código e uma série de outros assuntos interessantes sobre HTML 5. E o que você acha disso tudo? Deixe seu comentário!Interação
11 comentários
Necessário!
Muito bom! A web semântica é se faz extremamente necessário hoje em dia. O html 5 já está operando?
Entretanto, todavia, porém...
Boa pergunta Vinicius! Diego, você sabe se existe um cronograma de implementação do HTML 5 para adequação dos browsers? E mais: o HTML substituirá o XHTML ou existirá HTML 5 e XHTML 2?
Mateus Moura
03/03/2009 17h19
Mateus
Fera demais!!
Goste do Post!!!
To esperando mais informações!!! \o/
Bom!
No entanto você está criando limites, fazendo com que o desenvolvedor siga uma linha/ordem de layout. O div da a flexibilidade de organização de layout, e o id e comentários servem para idenficação.
O que eu vejo no HTML5 que será bastante útil é o uso da tag <video> entre outros.
Rafael Cesar
03/03/2009 20h14
Paulo, não acho que isso cria limites, a idéia da semântica não é essa e sim padronizar um universo com bilhões de páginas todas feitas de qualquer jeito.
O que foi sugerido no texto do Diego é simplismente o que nós desenvolvedores esperamos há muito tempo! Quanto ao layout sinceramente não entendi o porquê achou que ficaria "engessado" se adequando aos padrões web. Como diria um antigo sabio: "Uma coisa é uma coisa, outra coisa é outra coisa".
Abços!
Leonardo De A. Pereira
04/03/2009 09h40
Presos na liberdade? Organização ainda é o melhor!
Isso não me parece uma questão de 'dar liberdade' ou 'limitar' o desenvolvedor, pois, creio que isso seja psicológico, já que a única coisa que pode limitar um desenvolvedor no HTML é o próprio universo do HTML, ou seja, seus recursos.
Os desenvolvedores estão tão acustumados a ter liberdade para usar divs em qualquer lugar desenfreadamente que acabam por ficar presos a uma metodologia desorganizada de produção, onde cada site é produzido de uma maneira(como é dito no artigo) sem haver um padrão de organização genérico.
O que o HTML 5 propõe é justamente isso, organização!
Organizar o conteúdo de um site é a coisa mais inteligente que um desenvolvedor pode fazer, tanto pra sí quanto para os outros (humanos ou robôs).
Achei muito legal o artigo, parabéns Diego!
Leonardo Cabral
04/03/2009 17h17
Enfim, nome aos bois...
Confesso que quando li pensei "oras, isso é XML puro."; mas depois vi que ainda preserva cânones da marcação HTML, necessário para browsers. Entendo que os comentários ainda não vislumbrem o potencial de ter liberdade de codificação das suas tags dado à confusão embrionária que existe em mesclar apresentação com estrutura. Vejo um futuro promissor para a Web; webservices mais intuitivos, websites conversando entre si com maior facilidade e agentes organizando informações contextuais com maior facilidade.
...
Realmente, vai ficar mais padronizado, bem mais semantico. Quando li pensei que as divs fossem sumir, agora vi "Entenda que os divs não irão deixar de existir.". Muito bom, vlw.
Rafael Cesar
06/03/2009 08h12
Realmente Paulo, eu acho que construir Layout utilizando DIVs ainda não é o ideal, mas é o melhor que temos...
wellington carvalho
06/03/2009 11h04
HTML 5 quando começa
muito bom mesmo, quando vi tb tive a mesma impressão do XML, hahahhaha, mas só umas perguntas q ainda ficaram no ar, ja esta valendo? essas mudanças ja começaram? ja podermos usar sem problemas? ainda será implementado isso? quando começa?
acho q dessa forma vai facilitar mais, e não acredito q teremos limites
Duvidas...
Se um site é feito todo desta maneira, usuário utiliza Windows XP com IE6, o navegador irá reconhecer ou simplesmente irá entender como xml?
A Microsoft já se posicionou em relação a isto? que uma forma ou de outra que praticamente dita a internet no Brasil e no Mundo são os usuários que por sua vez ficam presos ao navegadores muitos deles desconhecendo outras possibilidades como Firefox e etc.
O CSS já reconhece as novas tags?
Essas são algumas das duvidas que gera, que podem aumentar com o passar do tempo.
Ajax - Guia Prático para Windows
iMasters
- Sobre o iMasters
- Política de privacidade
- Anuncie
- Feeds iMasters
- Fóruns iMasters
- Fale conosco
2001 - iMasters FFPA Informática Ltda - Todos os direitos reservados.