26 de janeiro de 2009 Artigos

HTML 5 – Semântica e o que é importante na web

Bem como o CSS3 o HTML 5 vem para mudar totalmente a forma que a web é construída.

O HTML é a primeira camada do desenvolvimento client-side. Como você sabe, existem 3: a primeira que é a informação, que é o HTML que vai exibi-la na página. A segunda é o CSS, que vai formatar esse HTML de forma que fique legível, usável, bonito. E a terceira que vai definir o comportamento desses elementos, que é o Javascript e Ajax.
Deles o HTML é mais importante. É o HTML que cuida da exibição da formatação. É ele que serve os buscadores e leitores de tela. É ele que serve a informação para aplicações e te dão toda a informação que você busca na web todos os dias.

Hoje em dia, a maioria dessa informação tem significado. Leitores de tela e o Google conseguem distinguir o que é um título, parágrafo, ênfase, listas, etc… Mas como eles sabem o que é um telefone? Ah, sim, fazendo microformatos. Mas microformatos é uma tecnologia que veio para tapar um buraco de semântica do HTML. E esse é um assunto interessante.

Na nova versão do HTML, a 5, o pessoal do W3C está estudando novas formas de inserir significado no HTML. Hoje, só o básico é feito. Você define o que é título, parágrafo, links, endereços, e só. Com algum microformato, você consegue definir um contato, localização e outras informações.

Abaixo, segue uma lista de alguns elementos que podemos utilizar no nosso dia-a-dia para trazer mais significado para a informação dos seus sites:

a: Define a ancora de um elemento.
abbr: Define uma abreviação.
acronym: Indica um acrônimo.
address: A tag address é utilizada para conter informações de endereço e contatos.
blockquote: Blockquote define longos blocos de citação.
cite: Define uma citação ou referência a outra fonte
code: Define que aquele texto é um código.
dfn: Define que certo texto é a definição de um termo.
div, span: Div e Span definem a estrutura dos elementos. Div é um elemento de bloco e Span um elemento de linha.
dl, dd, dt: Listas de definição são feitas para criar um grupo de termos e definições. Muito usada para fazer glossários, dicionários ou entrevistas textuais.
del, ins: INS é utilizado para mostrar que certo texto foi inserido e DEL define o texto que foi deletado da redação. Isso é bastante utilizado para corrigir artigos, textos e etc.
em: Como o strong, indica uma ênfase no texto.
h1 .. h6: Grupo de títulos definidos por importância, onde o H1 é o mais importante e o H6 o menos importante.
ul, ol, li: Listas ordenadas (OL) e listas não ordenadas (UL) são utilizadas para definir e criar listas de itens.
p: Define um parágrafo.
q: Define uma citação ou reposta que não necessita de quebra de linha ou marcação de um parágrafo.
strong: Define uma ênfase, como o EM.
var: Indica uma instância de uma variavel ou argumento de programa.

Além dessas tags, podemos também trabalhar com a semântica com atributos. Alguns deles: Alt, Title, classe, cite, id, lang, longdesc, rev, rel.
Tudo isso traz mais significado ao HTML. Mas ainda não é o bastante.

Como o John Allsopp disse em seu artigo no A List a Part. Nós precisamos de tipos de mecanismos no HTML, que solucionem a necessidade dos desenvolvedores de enriquecer as informações exibidas no HTML dando significado inteligentes para os elementos. Essa é a verdadeira meta do HTML 5.

Infelizmente a adoção do HTML 5 não é tão simples assim. Temos que lembrar da regra Don´t Break the Web. Esse suporte deve ser leve, caso contrários, browsers como o Internet Explorer 6 ou 7 podem sofrer com a falta de compatibilidade com as novas características.

romrocha

Muito interessante o artigo, estou pretendendo iniciar no mundo do desenvolvimento web e acredito que seria interessante já iniciar com o estudo do HTML5 e o CSS3 ! talvez isso seja um diferencial interessante para um iniciante nessa área! obrigado pelos textos informativos!
Marcus A. G. Maia

Olá diego,
O HTML 5 está ficando muito bom! as coisas vão ficar muito melhores quando os navegadores começarem a se adaptar, o que deve demorar um pouco =/
Só uma observação, os links aqui do blog estão com erro, eles abrem a página principal do site.
Abs
Marciobda

Olá,
Eu lí esse artigo no “A list a part” um tempo atrás e tive a impressão de que ele era uma dura crítica ao que se está fazendo com o HTML5. Que justamente o que faltava era a capacidade de se inserir novos elementos com o passar do tempo. Ele deveria ser compatível com aquilo que está por vir. E por isso no fim das contas deixaria muito a desejar.

Bem, mas é bom saber que tem gente por essas bandas se preocupando com isso também. Parabéns pelo tableless! Atualmente é o único site brasileiro sobre webdesign que eu acompanho.
http://www.chrisb.com.br/blog Chris Benseler

Eu gosto muito do conceito dos Microformats para dar significado ao html, além do que ele não tem essa questão de retrocompatibilidade.
O que me preocupa é que nem o HTML4 é seguido a risca, estamos a anos-luz do CSS3 ser um padrão solidificado; novos padrões estão aparecendo, são ótimos na teoria, mas não vemos a comunidade de desenvolvedores adotando-os em pse

Abraços!
Magno da Costa

o HTML 5 nã seria o (X)HTML ???
http://www.profissionaisti.com.br Jackson

Sinceramente, se continuarmos a ver navegadores que não seguem corretamente os padrões (leia-se Internet Explorer) no top de utilização, vamos conseguir aplicar as novas especificações efetivamente daqui uns 4 ou 5 anos, isso sendo otimista

Mas claro que, aprender antes do suporte total pelos navegadores pode ser sim um diferencial, conforme o comentário do romrocha.

To gostando de ver. Os posts estão voltando com frequencia

Grande abraço.
http://www.wdcss.com.br Cleo Morgause

Legal, essas tags eu já usava. Mas e quanto as tags novas? etc. Quando vamos poder usa-las? E tem as tags para deixar as tabelas no formato semântico também:
http://linke.viscountbox.com Linke

Nunca tinha pensado nos microformats como “tapa buracos”, mas enfim é o que parece ser mesmo… e são pouco usados… mesmo tendo muito a oferecer: http://www.pinceladasdaweb.com.br/blog/2007/09/24/o-poder-dos-microformats/

Enquanto lia o post, pensei que teria mesmo que ter esse último parágrafo, falando do IE para atrapalhar tudo de novo…. heheh
http://www.anaclaudia.com.br Ana Claudia

O grande problema para o uso de novos desenvolvimentos tem um Nome:IE6. Enquanto houver muitos usuários que ainda insistem em utiliza-lo, vamos continuar parados no mesmo lugar.
Eduardo Sganzerla

Parabéns! Ótimo artigo! =)

Agora é só esperar o dia do internet explorer ser extinto =/

Abraço
http://rwstudio.site90.com Rangel

Legal, bom eu acho q dessa forma fica bem melhor o trabalho!!!
Joabe

Até pouco tempo nem o Firefox entendia HTML 5, e assim como tem gente que não migra do IE6 para o 7 tem gente que não migra do Firefox antigo para o novo. E ainda temos que esperar pelo IE7 que também não funciona direito. Eu sou mais pessimista, se levar em consideração o tempo que o IE6 esta vivo, vamos ter que esperar mais uns 10 anos pra começar a trabalhar com HTML5 e CSS3.

@Magno da Costa – Não, não seria.
http://dev.w3.org/html5/spec/Overview.html
http://www.w3.org/TR/xhtml2/
Seyfertt

Que venha o HTML 5 =]
Ótimo post, muitas das tags uso no meu dia a dia, outras nem tanto, e realmente elas deixam um HTML de forma legível.

Infelizmente temos esta “guerrinha” de browsers para atrapalhar um pouco as coisas, mas que graça teria se não houvessem obstáculos?
Pingback: OneWord » HTML 5 - Semântica e o que é importante na web
http://www.ederprado.com Eder

O que mais me preocupa no cenário atual e nesse texto é são os navegadores. Há ainda uma incompatibilidade tremenda em renderização de páginas. E as vezes fico me perguntado: “O que seria ideal? Definir o HTML primeiro ou acertar os browsers?”.

Enfim, quem se encaixaria em quem?
Pingback: Por que usarmos Microformats? · Portfolio e blog sobre Web Standards - project.47
RicardoOda

As diferentes versões de browsers e suas respectivas peculiaridades dificultam bastante o desenvolvimento. Deveríamos ter WEB Browsers Standards obrigatório a todos…rs
http://www.aguinelopedroso.com Aguinelo Pedroso

Como o Eder citou acima o problema realmente são os navegadores, no entanto eles só podem se adaptar e oferecer suporte a uma especificação já pronta e definida completamente, como citado no post Don´t Break the Web
Acelio Filho

Só pra incomodar, como sempre

Enquanto os novos padrões não vêm e todos os navegadores não os suportam:

Elimine de suas idéias as coisas que não funcionam em todos os navegadores.
Seja correto nos códigos e funcionará bem.
Obs.: se os floats com margin não ficarem bem no Explorer, adicione “display:inline” e nada mudará para os outros.

Lembro dos anos 90 que todo mundo queria pintar as barras de rolagem do navegador, usava-se filtros alpha e backgrounds em degradee automáticos. Ficava-se “puto da cara” com o Netscape, que não funcionava nada.
Ele é que era o vilão.

Pense desta mesma forma agora e estará equivocado.
Querer achar um vilão é o erro.

Se você usar as bordas arredondadas do Firefox (ou qualquer atributo -moz-), não validará seu CSS, e não funcionará nos Outros.
Se usares um CSS aural com argumentos de volume, balance, tipo de voz e sons wave nos links, só quem usa o Opera poderá aproveitar.
É uma pena, mas é assim.

PRECISO DE AJUDA:
Alguém me diz como faço para o google reconhecer um número de telefone. Os Microformatos mencionados no post.
http://webdesignerthiago.com/ Thiago Pereira

Muito bom o artigo…

Valew.
Eduardo Sganzerla

Pra quem quiser mais informações sobre que tags usar e quando, achei um site muito bom: http://htmldog.com/reference/htmltags/

Abraço
Paulo Moura

Internet Explorer?
As tecnologias de acesso à web, assim como os navegadores devem todas serem de código aberto, para não ter esse problema de ficar esperando que uma empresa que tem praticamente o mundo nas mãos adotar os padrões que beneficiam a todos.
Thiago Brena

foi se o tempo em que o HTML eram poucas tags….
http://www.fatorclick.com.br Criação de Sites

Ótimo Post.
Utilizar todos os recursos do HTML fará não somente o seu código ficar mais semântico, mas fará o site em si estar preparado para as próximas regras da W3C.

Onde alguns desenvolvedores “pecam”, é na hora de desenvolver o código.
Fazem o site pensando no dia de hoje, quando deveriam pensar no site para daqui a 5, 6 anos.

Abraços
Paulo de Deus

Acho que não adianta ter pressa, pois os usuários são conservadores e o Explorer ainda é e será por tempo indefinido, o padrão de acesso. Outros browsers tem mais recursos, mas, se juntarmos todos eles, não somam 20% do mercado mundial. Até mesmo a Aplle, do festejado Mac teve de inserir o windows em seus equipamentos para continuar existindo no mercado de PCs.
Conclusão: a Microsoft ainda manda (e muito) no mercado. O jeito é esperar para ver no que vai dar…
Marcelo Blackout

Parabéns…
Ótimo artigo!

Abraço!!!
http://www.nextgti.com Eduardo Faria

A verdade é que nem sempre a evolução caminha junto com os negócios, as empresas barram muito o crescimento.
http://www.comunicaweb.com.br Leonardo

Muito bom o artigo.
Estamos estudando cada dia mais sobre semântica e é importante termos bases para sempre melhorar o trabalho que é feito em cada caso.
Cada vez mais a evolução bate a porta, e detalhes que eram considerados “meros detalhes” passam a ser “decisivos detalhes”.
Semântica hoje em dia é indispensável para o sucesso de um site.
Pingback: Estrutura e Semântica do HTML 5 | Tableless.com.br
http://www.comerciosdobutanta.com.br Juarez

Muito importante esse assunto, no meu ultimo trabalho (www.comerciosdobutanta.com.br)tentei trabalhar já nestes padrões, não tive problemas com os navegadores e tive a aprovação do w3c, quem puder dar uma olhada e depois me mandar um email falando o que achouo ficarei agradecido, e parabens pelo artigo. Obrigado.
Pingback: Sergiius Blog´s » HTML 5
Pingback: HTML 5 – Semântica e o que é importante na web @ Milton Andrade Designer
http://www.otimaideia.com.br Danilo Luiz

Gostaria de saber qual a influência do html 5 no rankeamento dos sites nos buscadores alguém tem essa resposta ?
Pingback: Breve introdução: diversidade dos meios acesso | Boas práticas de Desenvolvimento com Padrões Web
http://www.tudocondominio.com.br segurança na rede

Gostei do post

Espero que hajam novos posts a respeito do html 5 e seus recursos de programação, principalmente os novos recursos e diferenças.
Pingback: » Blog Archive » HTML 5 – Mudanças na estrutura e semântica
Pingback: Blog Constant Web » Blog Archive » HTML 5 – Mudanças na estrutura e semântica
Pingback: 4 – Victor Cavalcante discute web semântica, HTML5, ASP.Net MVC, jQuery, carreira, e mais « Tecnoretórica
Pingback: HTML 5 – Mudanças na estrutura e semantica : www.escovandobits.com.br
S.Primo

Valeu Ajudou Bastante…
Felipe

Vilao é o navegador que não segue os padrões, se o desenvolvedor insistir em soluções especificas(propriedades -moz, -webkit) não pode culpar os outros navegadores.
Ai que mora o problema, o IE é um dos que menos segue os padrões, isso é ser vilão.

Mais artigos