Tableless - Desenvolvimento inteligente com Padrões Web

16/02/2009
Artigos

HTML 5 – Mudanças na estrutura e semântica

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.

Por

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 novas aplicações e oportunidades pudessem utilizar melhor a informação distribuída na web. Acontece que o resto do HTML não foi a 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, por exemplo.

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 a 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 post, 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:





...



...

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



...






      ...
  





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

Exemplo Elemento HEADER

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:



Logo






Título do artigo


texto

Subtitulo


Mais texto

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:





Destaque 1


Texto





Destaque 1


Texto

Nesse caso estou usando os DIVs apenas por motivos de formatação. Ali não caberia um article, porque o conteúdo não é uma redação de um post, artigo e etc… Também não caberia uma section porque eu já agrupei este conteúdo dentro de uma section pai.

Para saber mais sobre isso, leia: The Elements Of HTML 5.
Irei escrever outros artigos sobre a inserção de vídeo e audio 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!

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

Newer Comments →
  • http://www.c2cballoon.com Fred Figo

    Olá Diego, boa noite.
    E como serão posicionados os elementos “header”, “section”, “aside” e por ai vai.
    Abs,

  • http://www.c2cballoon.com Fred Figo

    O post acima foi uma pergunta e não uma afirmação! :)
    Abs,!

  • gustavo

    Muito bom esses esquma do html 5
    não vejo a hora que ele entrar na ativa… vai facilitar muito! mas muuuuuuuuuito mesmo!

  • http://www.comunicaweb.com.br Leonardo

    Nossa sensacional esse artigo!
    Estamos conversando sobre isso ontem mesmo, sobre a nomenclatura e tals.
    Ainda não tínhamos começado com esse trabalho de nomenclatura, mas com esse ponta-pé inicial fica mais fácil.
    Parabéns.

  • Diego Felix

    Muito interessante.

    Com o html mais semântico, consequentemente o css tambem será, além do fato de não precisarmos criar tantas classes e Id’s.

    Valeu Diego.

  • http://webcomfarinha.com Matheus

    Muito bom o post!! Realmente prezar pela Web Semântica é algo indiscutível e inadiável, então as tecnologias devem evoluir afim de oferecer melhores e mais eficientes maneiras de tornar a Web um “lugar” mais organizado sem perder suas características inerentes!

    Parabés pelo post

  • Frank

    Ótimo post! Diego, sempre trazendo as novidades relacionadas a web, com boas explicações, parabens continue sempre assim :)

  • http://www.thomazcia.com.br Thomaz Cia

    Muito bom, acredito que melhor organizar na estruturação, será a indexaão nos buscadores, com ctz irá facilitar só dependerá que os navegadores não entrem em conflito como ocorre hoje.
    Parabéns pelo post, acredito que todos aguardam novas informações.
    abraços;

  • TIGOS

    E ai Diego, tudo bom?!

    Cara, só não ficou claro uma coisa: quando usar um e quando usar outro, ou esse novo padrão vem a ser um tipo de padrão XML?

  • Rodrigo Gnoatto Amaral

    O que me incomoda é a compatibilidade com browsers antigos. Continuaremos com a Síndrome do IE6, mas talvez englobando mais browsers.

  • Marcio B D A

    Muito legal o post. Ontem mesmo estava pensando que deveria começar a padronizar o modo como nomeio as divs. Mas sobre o html 5, não sei se fico triste ou feliz. Ele deveria ter sido implementado a um bom tempo… mas a última previsão que eu ví era apenas em 2012. E tem gente que acha que não sai antes de 2020.

  • http://www.juliocavalcanti.com Júlio Cavalcanti

    Muito bom o artigo! Faz tempo que eu espero por esse dia! E tb poder utilizar as facilidades do CSS 3 sem problemas. Quando poderemos começar a implementar nossos sites com o HTML 5? Vc sabe dizer? Valeu cara!
    Abraço.

  • Danilo Riedel

    Qual a possibilidade disso funcionar no ie6?

  • http://tableless.com.br/ Diego Eis

    Possibilidade nenhuma! :D
    O IE6 não existirá quando o HTML5 for lançado de vez. Tomara.

  • http://tableless.com.br/ Diego Eis

    Não entendi Tigo, como assim quando usar e outro? Você sempre usará esses novos objetos. Eles funcionarão como DIVS, receberão classes e ids normalmente. Mesmo porque você deverá diferenciar os headers, footers, asides e tudo mais.

  • http://tableless.com.br/ Diego Eis

    Obrigado Frank! :D

  • http://www.chrisb.com.br/blog Chris Benseler

    Quando vejo isso, me vem mais à cabeça o (x)html do que uma nova versão do html…

    []s!

  • http://www.capuski.com.br Rodrigo

    Existe projeto para lançamento de XHTML com essas novas tags?

  • http://www.pegrande.xpg.com.br Alex Leandro Medeiros

    Eu acredito que isso irá realmente resolver o problema de semântica. Lembro-me de ter lido um artigo uma vez falando sobre microformats que afirmava que microformats se dava utilizando o atributo class para informar que determinada informação era um e-mail, telefone ou nome de uma pessoa. Ora, não são as tag utilizadas que regem a semântica do conteúdo?
    Não existe atualmente a preocupação de utilizar tabelas apenas para dados tabulares. O correto seria ter tag para tambem representar esse tipo de informação. Em meu trabalho sempre discutimos muito essa questão de semântica. Sempre pensamos na Microestrutura e Macroestrutura. Saber que no HTML5 está pensando na semântica da Macroestrutura me alegra muito. Finalmente vou parar de utilizar id nas div. Ao conversar com minha equipe sempre achei fascinante abrir um html e apenas olhando para o código saber exatamente o que cada trecho de código faz, mas agora isso vai melhorar muito pois não vamos precisar ficar procurando div e id e sim as tags e (respeitando o caractere minúsculo claro aehaehahehae)

    E isso ae, um dia quero poder participar dos grupos da w3c para dar meus pitacos.

  • André

    Tá tudo muito interessante, o html5 veio para trazer mais semântica organizar a web, coisa que o microformats tentou fazer através de remendos.

    Mas alguem me explica o HTML 5 e o XHTML são iniciativas paralelas? e em algum momento irão entrar em conflito?

    Não seria melhor para a comunidade de desenvolvedores comemorar o falecimento do HTML e festejar a unificação das idéias, implementando essa estrutura semântica no XHTML ?

    Eu to falando bobeira? Caso sim, desculpe existir, mas alguem me explica. : )

  • http://tableless.com.br/ Diego Eis

    XHTML é uma história que os caras começaram e para finalizar vai ser difícil. É uma idéia sonhadora que eles tiveram. A idéia é genial, mas agora, nesse exato momento, o HTML é a saída mais inteligente.

  • http://alexandre.gaigalas.net Alexandre

    Na verdade, é possível usar alguns elementos do HTML 5 nos IEs 6 e 7. O Engine do IE funciona pré-carregando propriedades dos elementos para depois renderizá-los. Cada parágrafo, lista, h1 ou qualquer outra tag é um elemento criado nessa engine.

    Se montarmos um documento cru de HTML5 e aplicarmos um estilo CSS nele, não funcionará, porque o objeto não está pré-carregado. Existe um workaround, que é dizer pro IE montar essa estrutura antes… um simples document.createElement(‘section’) por exemplo, daria cabo disso e permitiria a aplicação de CSS… já coisas como as extensões de script e outras tecnologias que vão além de meras tags estruturais com certeza terão mais problemas.

    Outra coisa interessante, que é o doctype do HTML5, também funciona no IE6 e IE7, renderizando a página em Standards Mode. Foi extremamente bem pensado =)

  • http://www.csslab.cl Jorge Epuñan

    Ambas ideias, HTML5 e XHTML 2 sao excelentes mais pessoalmente acho q o HTML5 ainda deixa muito para noçao de cada developer. Se um menu deveria usar <menu> ou outra etiqueta… eh uma desiçao a criterio de cada um e nao existiria um concenso; o mesmo q acontece agora se usar ID ou CLASS e qual o nome de cada uma; se uso cite ou blockquote, em, strong, p…. enfim nao muita gente as usa e ainda nao existe muita uniformuidade em quanto ao uso semantico das equitetas, menos ainda no HTML5. Acho q XHTML2 por ser strict nao da passo a erros ja q ao ser XML se ha uma etiqueta sem fechar definitivamente nao renderiza o HTML, e pronto. exigiria mas habilidade de programaçao e isso levaria a mais aperfeiçoamento e valorizaçao do nosso codigo e portanto, trabalho.

    Agraços!

  • http://webdeleve.net tigo di

    O assunto não é novo e mais uma vez me faz lembrar do já antigo post do Bruno sobre o uso do HTML e do XHTML: http://brunotorres.net/xhtml-pensando-no-futuro

    Independente do rumo das coisas, algo que não pode acontecer é o desenvolvedor ignorar uma das duas linguagens e focar os seus estudos em somente uma delas.

    É preciso ter certo domínio sobre ambas ( e outras ) linguagens de marcação e suas especificações.

    Daqui um tempo talvez haja no mercado um tipo de desenvolvedor que irá ignorar o estudo do XHTML e nem saberá o que é XHTML-MP.

    Ooo Diego, caso tenha se confundido, o “Tigo” ali de cima é outro tigo ;]

    Abraço/t+

  • http://flaviowd.wordpress.com Flávio Araújo

    Só precisamos agora dos navegadores entendendo o HTML 5, os usuários atualizarem os navegadores e o mais importante de todos, os desenvolvedores conhecerem de fato como funciona o HTML.

  • http://www.agaum.com.br Saulo Barbosa Oliveira

    Pois é Flávio, mas acho que essa mudança não será fácil, pois o HTML5 será semanticamente incompatível com o HTML4! Não consigo enxergar uma mudança gradativa…
    Será que chegaremos ao ponto de exigir do usuário uma atualização de browsers?!

  • Mark de Souza Costa

    O HTML 5 vai ser muito bom mesmo…. daqui a uns 15 anos.

  • Isaias Alexandre

    Quero ver como os engines atuais irão se comportar ao tentarem interpretar estas novas tags, digo isso para dispositivos móveis principalmente, também não dá para esquecer os browsers. Atualmente somos obrigados a salvar nossos XHTML com extensão .html por conta do IE 6.

    Como disseram isso vai funcionar bem daqui a alguns anos.

  • Simão Neto

    Ola…

    Com essa estrutura que o HTML5 tras sera muito melhor de se trabalha e não teremos de criar tantas id’s e class pelo menos no corpo em si do site, sera estipulado um padrão de como devemos escrever o html e com isso vai melhorar ainda mais o uso do css.

    valeu….

  • http://www.nomadinterativo.com/blog/ Raphael Martins

    Tá certo que o HTML5, CSS3 são evoluções da WEB, web XXX.0 (sabe-se lá em que Web estamos vivendo hoje).

    Mas ficam algumas perguntas:
    - Do ponto Comercial: Oq que meu Cliente tem haver com isso!? como posso agregar isso para conseguir uma venda?
    - Do ponto de Vista Estrutural / Usual (usabilidade): Quanto tempo levará para todos os browsers se atualizarem e ‘entederem’ essa ‘EVOLUÇÃO’ tendo em vista q o IEca 6 é o atual dos browsers e nao entente nem XHTML 1.0 direito e CSS 1;
    Os leitores de tela (os que cegos e afins usam) deve ser mais fácil, pois não teem mts softwares no mercado e só mandar um pack com a atualização.

    Eu como programador / desenvolvedor (web-master) lógico que vou me adaptar à essas novas técnicas, mas sinceramente, vou tratar de me atualizar e aprender o FLEX, pois tudo indica que o mais seguro e ‘vísivel’ para todos no futuro vai ser sites em Flash / Flex / AIR.

    Estou um tanto que indignado! acho que deveriam ir por partes! primeiro fazer que os browsers sejam todos iguais na renderização, depois partiremos para a evolução!

  • http://designcombolachas.blogspot.com/ Thiago Cavalcanti

    Olá Diego! Excelente artigo! Só tem um errinho besta: no primeiro bloco de código, logo depois de “Uma estrutura conhecida é mais ou menos assim:”, se você contar as tags div de abertura e fechamento, vai ver que tem uma sobrando(fechamento), na sétima linha. Nada que comprometa o artigo, mas achei bom avisar. Até a próxima!

  • Pingback: As novas tags do HTML5 » Luiz Paulo - tecnologia web

  • Marcos araujo

    Isso pode ser uma jogada para promover os novos navegadores como
    ie 8 ou algo similar!

    não vejo por que mudar isso não trara reais vantagens aos desenvolvedores.

    vou preferir usar o bom e velho

    ate porque se for tratar uma dessas div com js acho que ficaria muito mais facil atraves da sua class ou id !!!

  • http://culturaatual.blogspot.com/ leonardo

    muito boa essa materia ótimo aviso

  • http://edipo.com.br Édipo

    Realmente, sempre procurei muito uma forma que pudesse descrever os dados de uma forma padronizada, cheguei em microformatos, consegui um otimo resultado com eles, conseguindo site links no google em menos de 15 dias, mais ainda sim, não é algo satisfatoria, parece mais uma imenda do que uma solução, estava querendo estudar um pouco de rdfs, que embbora não se use hoje, pode ser o meu ganha pão de amanhã. resumindo, tomara que esse html 5 resolva um pouco desse problema de como descrever os dados em uma pagina web de forma legivel a todos, deficientes, maquinas, etc.

  • http://Muitos Cleber

    Bom ao meu ver isso caira como uma luva para sites porém para quem utiliza o html para programação de grande escala o bom e velho html ainda vai viver nesse mundo com as baratas

  • http://www.mudancas-sua-mudanca.com.br Mudanças

    Muito legal o post.

    Peter

  • Pingback: IE6 ainda é um mal necessário | CarlosSoler.net

  • Pingback: Elementos e Atributos removidos no HTML5 » Luiz Paulo - tecnologia web

  • Pingback: Como melhorar o posicionamento de um site em buscadores? « Groupweb

  • http://www.tecnovomundo.com Gustavo Henrique

    Opa, gostei muito do post, achei interessante, é importante sabermos e acompanhar-mos algumas mudanças, eu particularmente me interesso muito por avanços em programação.
    É bom tb saber que vc usa o #WordPress rsrs
    Abraços, voltarei para ver os outros posts, sobre o assunto.
    Gustavo Henrique

  • http://www.sosalternativas.com Marcio Figueiredo Mesquita

    Pra ser sincero gostei dessa estrutura definindo melhor as regiões do layout. Bem melhor que id ou class que acho muito mais difcil de entender. Mais sincero ainda, fico triste um pouco com o fim do frameset. O frameset realmente prende a estrutura do site, mas exclusivamente pensando como designer atuando em Flash, não há nada melhor que o frameset. Só precisa definir um e carregar um menu.swf. Aí vc faz o que quiser com o Flash. Fiz isso em http://www.marciofiguiredo.com
    Mas entendo q para indexação é ruim e decidi aprender mais sobre html, e a versão 5 me parece bem melhor que a 4.01

  • http://www.blog.ljunior.com Leo Baiano

    Diego, li seu artigo a um tempo atrás e recente lembrei dele enquanto visitava o site w3schools, mais especificamenteo artigo que fala sobre a tag (http://www.w3schools.com/tags/html5_article.asp).

    Lá me pareceu que a tag deve ser utilizada para tratar conteúdo externo ao site, por exemplo, blogs que divulgam noticias de portais na sidebar, e não para definir a parte onde o fica o conteúdo do site como foi citado aqui.

    Fiquei bastante confuso com relação a isto, poderia explicar melhor o que define a tag ?

  • http://blog.igorescobar.com/ Igor Escobar

    Diego, pelo que eu ví no site da W3C a tag article serve para outra coisa.

    E no site da W3School ele da outra definição também para a tag article.

    “The tag defines external content.

    The external content could be a news-article from an external provider, or a text from a web log (blog), or a text from a forum, or any other content from an external source.”

    Ou seja a tag article é usada para representar um conteúdo externo…

    Abraços!

  • http://blog.igorescobar.com/ Igor Escobar

    Ou sei lá, parece que você explicou certo mais ficou faltando algumas palavras para ficar claro.

  • Pingback: » HTML5 Flávio L Mendes

  • http://www.leobaiano.com Leo Baiano

    Diego, dei inicio a uma discussão em uma lista sobre este assunto pois fiquei com algumas dúvidas após ler um texto do W3School, esse seu texto e as especificações do W3C.

    A questão é relacionada a tag article e o Igor, que participou da discussão na lista, até já adiantou… afinal, em que casos devemos utilizar a tag articles? Para indicar conteúdo? Para indicar conteúdo externo?

    Aproveitando, no seu post acredito que há algum erro no bloco de códigos com um exemplo de estrutura, a tag article não deveria ficar dentro da tag section?

    Obrigado!

  • Leonardo Rente

    Realmente fascinantes a nova semantica vai facilitar e muito o desenvolvimeto e navegação.

    Otimo post

  • Pingback: » HTML 5 Diggest

  • Pingback: Kaleb Web » HTML 5 – Mudanças de como a web é construída

Newer Comments →