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.
35 Comentários
35 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?
OneWord » HTML 5 - Semântica e o que é importante na web 28/01/2009 às 12:09
[...] Fonte: http://www.tableless.com.br/html-5-semantica-e-o-que-e-importante-na-web [...]
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.
Sergiius Blog´s » HTML 5 29/05/2009 às 15:05
[...] Tableless http://www.tableless.com.br/html-5-semantica-e-o-que-e-importante-na-web [...]
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.