Busca

Boas práticas de Desenvolvimento com Padrões Web


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.

26/01/2009 por Diego Eis
38 Comentários

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.

38 Comentários

Sua opinião:

Vamos elevar o nível de discussão. Exponha sua opinião, sua crítica.



RSS dos comentários deste post
URL para Trackback

38 Comentários

romrocha 26/01/2009 às 10:11

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 26/01/2009 às 10:13

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 26/01/2009 às 10:16

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.

Chris Benseler 26/01/2009 às 10:23

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 26/01/2009 às 10:53

o HTML 5 nã seria o (X)HTML ???

Jackson 26/01/2009 às 13:38

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.

Cleo Morgause 26/01/2009 às 17:38

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:

;)

Linke 27/01/2009 às 10:00

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

Ana Claudia 27/01/2009 às 11:11

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 27/01/2009 às 13:19

Parabéns! Ótimo artigo! =)

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

Abraço

Rangel 27/01/2009 às 22:27

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

Joabe 28/01/2009 às 10:03

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 28/01/2009 às 10:35

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?

Eder 28/01/2009 às 12:14

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?

Por que usarmos Microformats? · Portfolio e blog sobre Web Standards - project.47 29/01/2009 às 09:20

[...] colocação muito interessante feita no tableless é que os Microformats são “uma tecnologia que veio [...]

RicardoOda 29/01/2009 às 12:20

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

Aguinelo Pedroso 29/01/2009 às 22:19

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 30/01/2009 às 12:31

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.

Thiago Pereira 30/01/2009 às 16:31

Muito bom o artigo…

Valew.

Eduardo Sganzerla 30/01/2009 às 17:34

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 31/01/2009 às 13:11

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 01/02/2009 às 02:49

foi se o tempo em que o HTML eram poucas tags….

Criação de Sites 02/02/2009 às 00:32

Ó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 02/02/2009 às 08:35

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 13/02/2009 às 18:20

Parabéns…
Ótimo artigo!

Abraço!!!

Eduardo Faria 14/02/2009 às 00:30

A verdade é que nem sempre a evolução caminha junto com os negócios, as empresas barram muito o crescimento.

Leonardo 16/02/2009 às 10:24

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.

Estrutura e Semântica do HTML 5 | Tableless.com.br 17/02/2009 às 10:11

[...] 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 [...]

Juarez 15/04/2009 às 23:41

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.

HTML 5 – Semântica e o que é importante na web @ Milton Andrade Designer 08/07/2009 às 12:56

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

Danilo Luiz 21/07/2009 às 10:56

Gostaria de saber qual a influência do html 5 no rankeamento dos sites nos buscadores alguém tem essa resposta ?

Breve introdução: diversidade dos meios acesso | Boas práticas de Desenvolvimento com Padrões Web 28/09/2009 às 17:02

[...] não estou querendo dizer que tudo deverá ser feito com Silverlight ou Flash, pelo contrário. O HTML 5 e o CSS 3 estão vindo para acabar com esse [...]

segurança na rede 23/12/2009 às 17:35

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.

» Blog Archive » HTML 5 – Mudanças na estrutura e semântica 12/05/2010 às 10:31

[...] 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 [...]

Blog Constant Web » Blog Archive » HTML 5 – Mudanças na estrutura e semântica 21/05/2010 às 16:35

[...] 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 [...]