Validação e Semântica

Por: Henrique Costa PereiraFriday 6 January 2006 às 14:6

Eu me lembro que tempos atrás eu acreditava que passar pelo validador da W3C era tudo! Acreditava que se eu conseguisse validar meu site em “XHTML strict” eu seria “o cara”! Me lembro até hoje como foi a sensação de ver aquela tela “This page is valid XHTML 1.0 Strict” pela primeira vez. Com certeza “um pequeno passo para um homem, mas um grande passo para humanidade”, eu pensava.

Vou ter que tirá-la da toca do coelho Alice!

Este mundo mágico que você acreditava existir onde você insere sua URL e um mecanismo verifica que você está com um código semântico não existe! Existe outra realidade que você deve saber sobre os validadores, e especificamente sobre o validador de HTML da W3C. O maior erro que a maioria dos desenvolvedores comete é associar que um código validado pela W3C é um código semanticamente correto. Não há nada mais enganoso que isto. Você pode ter um código sujo, sem respeitar nenhuma tag, sem nunca ter ouvido falar em semântica e ainda assim, tê-lo 100% validado em XHTML Strict.

Se você gritou na sua mente “isso é um absurdo” ou “o que este cara está falando?”, você precisa aprender algumas coisas sobre semântica.

Semântica é significado.

Como eu escrevi aqui anteriormente que semântica é o estudo do significado das palavras e sua relação uma com as outras. Não estou me referindo aqui a semântica de SGML da qual o XHTML é um dos derivados. É um assunto muito distante do escopo deste texto.  Estou falando de semântica de XHTML e nada mais. Neste sentido estrito, um código semântico nada mais é do que utilizar as tags no sentido real pelo qual elas foram criadas. Se você vai escrever uma lista, você pode usar <ol> <ul> ou <dl>, se vai escrever um endereço você deve usar <adderess>, se precisa de um título, você tem os headings <h1>, <h2>, <h3> e assim por diante. Utilizar as tags no sentido correto é igual a “código semântico” que por sua vez justifica o termo “web standards”. Seguir os web standards é respeitar a semântica!

O validador de HTML verifica a ortografia do seu código, ou seja, verificam se não há erros de escrita nele. E nada mais! É só isso que ele faz. Ele não avalia se o conteúdo que você inseriu, e que só tem significado para seres humanos, foi inserido dentro das tags correspondentes aquele tipo de conteúdo. Ou seja, o validador nem ao menos vai te falar se seu código está dentro dos padrões e nem ao menos significa que seu trabalho seja uma boa página! O validador não vai te informar se este trecho deve estar dentro de um <h1> ou dentro de uma <li>. Isso é impossível de ser feito!

Não existe e nunca vai existir um “validador semântico”. Você vai precisar estudar e ler muito para avaliar você mesmo se o seu XHTML segue os padrões ou não. A semântica é a alma dos web standards. Seguir os padrões é descrever seus dados usando as tags de forma correta (descrever dados te lembra outra coisa chamada Microformats?). Você precisa dizer para os user agents o que é um título, o que é uma lista ordenada, o que é um endereço e assim por diante.

Voltando aos Validadores

Para que servem os validadores então, se eles não avaliam se meu site está ou não dentro dos padrões? A função dos validadores é te ajudar a verificar se seu código tem erros de “ortografia”. Ele pode te mostrar onde você esqueceu de fechar uma tag, onde você esqueceu um atributo que não deveria ter esquecido ou o lugar onde você colocou aspas e não deveria ter feito. Um site “validado” significa simplesmente que ele não tem erros ortográficos! Não significa que ele segue os padrões. Mais vale um site semântico com alguns errinhos ortográficos na mão (leia-se não validado) do que dois sites validados feito todo em tabelas voando!

Algum tempo atrás me parece que havia um “status” maior em se ter um site validado. Alguns até diziam que se não fosse em XHTML Strict e validado, o site não merecia atenção. Mas lembre-se que o HTML 4 ainda é uma recomendação da W3C, e um site semanticamente correto, escrito em HTML 4 e com alguns errinhos de ortografia tem milhões de chances a mais de ser relevante para o Google ou qualquer outro mecanismo de busca, do que um site validado, não semântico e feito em tabelas. Os valores aqui se inverteram não é mesmo?

No final das contas, é ou não importante ter um site validado?

Sim. É importante. Significa que você não esqueceu nada onde não deveria e que seu documento não tem erros ortográficos e código mal escrito. Mas nunca se esqueça que isso não faz do seu site um “web standards conformance”.  E se vivêssemos no país das maravilhas e fizesse algum sentido fazer uma escolha entre as duas opções, ter um site dentro dos padrões, mas com erros de validação, é melhor! É tudo uma questão de relevância!

Este texto não pode ser copiado ou reproduzido em nenhum outro site na íntegra sem autorização do autor!. Mais detalhes sobre licença de uso aqui!

Tags: Semântica Web Tag User Agent Validação W3C Web Standards XHTML

33 Comentários para “Validação e Semântica”

# 1° Walmar Andrade Friday 6 January 2006 às 03:6 PM GMT

Um problema semântico que surge com isso diz respeito aos CMS’s e aos clientes que querem poder atualizar sempre seus conteúdos sozinhos. Para manter o código semântico, eles vão ter que marcar palavras estrangeiras (se não for XHTML 1.1), abreviaturas, siglas, etc. Será que isso vai dar certo?

# 2° Felipe Diesel Friday 6 January 2006 às 03:6 PM GMT

Concordo com essa história de validação. Mas e aquela sua função que abre o link em uma nova janela? Iso é só pra não colocar o target no link… Você não acha q no fundo é a mesma coisa? Que ela só serve pra validar? Se o W3C tira o target é por que não se deve abrir novas janelas, e deixar o usuário escolher se qr uma nova…

# 3° Michael Friday 6 January 2006 às 08:6 PM GMT

Para o caso dos CMS’s eu acho que seria melhor colocar um HELP ME ou um Leia Antes com alguns conselhos sobre certas TAGS, delimitando o usuário para algumas TAGs ou “coisas” que ele queira colocar.
Já no caso do LINK – eu vi hoje inclusive, achei demais – eu acho que é para validar sim, ainal… mais vale um site com erros ortográficos do que um site sem semantica, mas se for o dois, acho que fica melhor. Ah… eu discordo do fato de não poder colocar o _blank, mas acho que a W3C fez isso para freiar “webDesigners” que fazem isso com o site inteiro. Tipo, aquele link que vai para uma página só por causa de um foto.

# 4° Henrique Boaventura Friday 6 January 2006 às 10:6 PM GMT

Eu, assim como uma massiva quantidade de pessoas, está interessada em um código semânticamente correto.

Estou aprendendo diariamente através dos conteúdos aqui presentes e em vários outros lugares, o valor da websemantica. Isso sim é uma revolução!

A verdade é que devemos primar pelos dois caminhos, tanto a semantica quanto a validação, mas devemos fazer do jeito certo, assim como o Henrique escreveu.

Meus parabéns mais uma vez pelo excelente artigo!

# 5° Erick Wilder Monday 9 January 2006 às 08:9 AM GMT

Os CMS’s realmente acabam criando algumas barreiras quanto a validação e semântica. Ninguém quer ficar escrevendo tags num artigo a fim de “ter um código bonito e válido”; querem saber apenas de escrever, clicar em “OK” e pronto.
Agora, sobre o artigo, muito bom, eu também em meu primeiro contato com os padrões achava isso, mas hoje em dia eu tenho uma visão totalmente diferente, e pra falar a verdade eu sempre acabo pensando “porque eu não aprendi HTML semantico desde o princípio?”. É a vida, parte da evolução, o artigo serve para alertar quem não se tocou sozinho, com pesquisa e etc.

# 6° Wagner Rodrigues Monday 9 January 2006 às 10:9 AM GMT

Em matéria de relevância, de fato o código semânticamente deve ser priorizado… Mas nada como unir o útil ao agradável, em suma, busquemos sempre a perfeição!

Como sempre, ótimo artigo, Henrique. Parabéns!

# 7° Kico Zaninetti Monday 9 January 2006 às 05:9 PM GMT

Pegar um layout que um desinger fez no photoshop e destruir os miolos do cérebro pra montar tudo dentro dos padrões e sem hacks malditos para o IE é uma tarefa que demanda tempo e muito, muito café.
Sabemos também que tempo é dinheiro e infelizmente não há como chegar para seu cliente e falar: “Seu site vai ficar mais caro porque o código dele vai ficar mais bonito”. O cara não quer nem saber do código. Ele quer ver o site dele rodando lindamente, independente do que está por trás.

Estou migrando o site da minha empresa (que o atual tem um código medonho) para os padrões e tentando ser o mais correto possível na hora da apicação das tags. Mas ainda não aprendi como devo me dirigir a um cliente para explicar qual vai ser o real benefício que ele terá para pagar a diferença de preço.

Saber os padrões e entender como eles funcionam é um ponto positivo para MIM e meu curriculo, pois sei que estou melhorando meu procedimento de desenvolvimento, mas infelizmente esse resultado ainda não pode ser repassado para os clientes que pagam pelo meu serviço.

# 8° bruno chaves Tuesday 10 January 2006 às 10:10 AM GMT

sem sombra de duvida o q mais trava o desenvolvimento dos padrões web aqui no Brasil, e a desvalorização do serviço. É realmente frustrante ter q fazer serviços com prazos irreais, e ter q fazer codigo porco para cumprir as metas. E ainda mais frustrante é q a cada dia q se passa fico menos esperançoso de ver isso valorizado. Mas por enquanto ainda vou ser otimista e tentar melhorar o meu codigo cada vez mais :)
Abraço

# 9° Bruno Dulcetti Tuesday 10 January 2006 às 11:10 AM GMT

Concordo Henrique, boa visão, tava até pensando em escrever algo sobre, mas já postou ae e muito bem ;)
É impossível mesmo ter um validador semantico. Esse validador é o próprio desenvolvedor, com conhecimento para fazer o tal.
E acho que agora um grande desafio é como o pessoal tah falando, um CMS’s nos padrões, bem complicado conseguir um ótimo resultado…

# 10° Kico Friday 13 January 2006 às 02:13 PM GMT

Kiko,

Apenas chegue para seu cliente, e diga que está migrando o site para ocupar menos banda, ficar mais rápido, mais leve, e mais fácil de expandir ou modificar futuramente.

# 11° Kico Zaninetti Friday 13 January 2006 às 04:13 PM GMT

Pessoa do 10° comentário,
os padrões podem melhorar sim o desempenho do site, mas não é o único responsável. Eu posso usar os padrões e imagens gigantescas que o site vai ficar pesado do mesmo jeito.
Sobre expansão e atualização também não tem muita justificativa, porque pra mexer num site mantendo ele no padrão pode até custar mais tempo do que atualizar sem se preocupar com regras de semântica.
Ainda não é uma justificativa que vai fazer o cliente investir.

# 12° Felipe Diesel Friday 13 January 2006 às 06:13 PM GMT

Claro… mas isso depende do desenvolvedor. Se o projeto for bem pensado será menor que sua versão em tabelas. Para provar isso existia a seção convertido do tableless.com.br, onde TODOS os sites eram menos em versão tableless.

# 13° Kico Zaninetti Friday 13 January 2006 às 06:13 PM GMT

Mas Felipe, eu também não estou falando de tabelas. Estou falando de padrões. Eu só tenho utilizado tableless… o problema é fazer o código totalmente semanticamente correto. Eu tenho o máximo, mas nunca fica 100% por falta de tempo.

# 14° Bruno Soares Saturday 14 January 2006 às 02:14 PM GMT

Kiko,

Desculpe por utilizar seu nome antes, foi sem querer. :)

Bem, mais uma justificativa é que o site irá funcionar de forma “semelhante” em qualquer navegador ou sistema operacional. E isso são mais de 10% dos usuários!

Caso você não seja familiarizado com Tableless/Web Standarts, e acha que do método “tradicional” com tabelas vai ter uma produtividade maior, dependendo do tamanho do site, porque não, né?

É tudo uma questão de análise. Você pode sim desenvolver fora dos padrões. Mas lembre seu cliente de outros navegadores, consumo de banda, posteriores modificações no site e outras vantagens que pode estar perdendo.

# 15° Kico Zaninetti Sunday 15 January 2006 às 02:15 AM GMT

Bruno, voltando ao que eu disse, não estou dizendo que programar fora dos padrões é diagramar com tabelas. Programar nos padrões, com semântica correta é sim utilizar as tags corretas para as suas devidas funções.
Além do que é muito prezada a validação XHTML, embora, como disse o Henrique, apenas validar seu XHTML não queira dizer que você está com um código semanticamente correto.

Digo que se preocupar com todos os detalhes de semântica e correção do CSS para validação XHTML, bem com evitar os hacks do CSS pro ie, acabam demandando mais trablaho que o usual.
É esse trabalho extra-oficial que não há como repassar para o cliente, pois este não consegue entender o motivo do overprice.
O Brasil ainda está engatinhando nesse meio e acho que um dia, quando o mercado tiver crescendo, alguém vai dar valor real ao que estamos discutindo aqui…

# 16° Microformats » Revolução Sunday 22 January 2006 às 03:22 PM GMT

[...] Para aplicar Microformats é preciso aprender antes de mais nada a utilizar um código semanticamente correto. A primeira descrição de dados começa usando as tags certas com o objetivo pelo qual elas foram criadas. Eu já escrevi aqui alguns artigos sobre como definir isso, qual a melhor maneira de exibir dados tabulares, listas, headings etc. Com um código bem formatado, com tags sendo usadas corretamente, está lançado o ambiente perfeito para você aplicar microformats em trechos específico de códigos para resolver questões específicas. Uma característica de Microformats possui, é o conceito de modularidade. Microformats não é uma linguagem nova, são formatos de descrição de dados que podem ser aplicados em trechos específicos do seu código, sem precisar refazer nada. Se você tem um site e o seu código é semanticamente correto, basta você implementar e tratar estes trechos específicos sem precisar de alterações estruturais. O manifesto Microformat é o seguinte: [...]

# 17° As Dicas de CSS que você não deve deixar de saber » Revolução Wednesday 22 February 2006 às 01:22 PM GMT

[...] Os conselhos que dizem que XHTML não é algo para iniciantes tem sua justificativa e não consigo ver que uma perfeita aplicação de CSS não esteja intimamente relacionada com a maneira com que você escreve o seu XHTML. Mesmo que não seja XHTML com o mime type correto antes que alguém se preocupe com isso. É preciso várias considerações conjuntas para poder avaliar a qualidade de um trabalho. E a validação não é uma delas. Prefiro ter meu site semântico com alguns erros de validação do que o contrário. Escrever um (X)HTML cheio de divs, cheio de classes e se gabar de um CSS bem feito é jogar confete em si mesmo. Se você considerar que seus conhecimento de CSS não são algo em si mesmo, e sim parte de um conjunto de conhecimentos (user agents, XHTML, semântica etc) que necessariamente deve estar agregado a outros, com o tempo você vai ver que o conjunto dessas coisas não são tão simples assim. Mas como tudo que se aprende na vida deve ter um começo, vamos ver algumas dicas importantes de CSS. [...]

# 18° Eu já disse que validação não significa nada? » Revolução Etc Thursday 16 March 2006 às 09:16 PM GMT

[...] Muitas pessoas ficam presas a validação do (X)HTML. Elas associam validação com semântica e cometem o grande erro dos iniciantes. Eu já escrevi sobre isto e basta você rever meus argumentos. Mas semântica não é validação e nunca haverá algum tipo de relação entre elas. O validador da W3C serve para te ajudar a encontrar algum erro de sintaxe que está difícil de achar, serve pra te ajudar a ver se você deixou alguma tag aberta sem fechar mas ele nunca vai te informar se você está usando as tags corretamente nos lugares certos. A validação de um site não mede nunca a competência de um profissional. Se você tem o seu site validado isso não significada nada. [...]

# 19° Doctype - DTD - Document Type Definition » Revolução Etc - Web Standards em uma casca de noz! Wednesday 17 May 2006 às 01:17 PM GMT

[...] Se seus documentos possuem erros de sintaxe, os browsers vão ignorá-los e tentar renderizar seus documentos da forma em que cada um deles achar mais apropriado. Essa é a única importancia em manter um código válido e sem erros de sintaxe para não deixar nas mãos do browsers a escolha de como ele deve renderizar seu documento. E lembre-se que semântica nada tem haver com validação. [...]

# 20° No idea! » Blog Archive » A importância da semântica Tuesday 23 May 2006 às 04:23 PM GMT

[...] Usamos uma tag de lista para exibirmos uma lista. Essa maneira também sera aprovada pelo validador W3C, além de ser uma maneira semanticamente correta de se exibir uma lista. Em títulos use sempre <h1>, <h2>, <h3>, <h4>, <h5>, <h6>. Existe no site do maujor artigos muito interessante sobre menus com <ul>, um outro artigo muito bom sobre validação e semântica que busquei informações para tentar escrever esse post pode ser encontrado no revolução.etc.br. [...]

# 21° Token Thursday 26 October 2006 às 02:26 PM GMT

Você falou e falou e não exemplificou a semantica na prática. Afinal, quais são suas recomendações para a semantica?

E ainda disse bobagens. o validador W3C não analisa apenas os erros ortográficos e tags aberta. Ele alerta e valida sim para os padrões web (padrão XHTML).

Ele apenas não torna um site semântico nem acessível.

# 22° Tableless » Blog Archive » Validar é importante?! Wednesday 1 November 2006 às 10:1 AM GMT

[...] Validação e Semântica [...]

# 23° Validação vs. Semântica « RafaelMarin:Blog Wednesday 1 November 2006 às 01:1 PM GMT

[...] Lendo alguns artigos à respeito de Validação e Semântica, como o artigo que o Henrique do Revolução Etc escreveu sobre o assunto, resolvi criar a minha versão para este assunto. Talvez eu seja o centésimo que esteja escrevendo sobre isto, mas não importa. [...]

# 24° Web-Bem-Feita « . . : : ROCHESTER : : . . Sunday 5 November 2006 às 04:5 AM GMT

[...] Código semanticamente correto – Pois nem sempre a validação é tão importante. [...]

# 25° Validar ou não validar? Eis a questão… « Blog do Jader Monday 13 November 2006 às 07:13 PM GMT

[...] <update> Como leitura complementar, deixo um excelente artigo do Henrique, do Revolução Etc: Validação e Semântica. </update> [...]

# 26° Validação vs. Semântica » RafaelMarin.net Sunday 25 February 2007 às 02:25 PM GMT

[...] alguns artigos à respeito de Validação e Semântica, como o artigo que o Henrique do Revolução Etc escreveu sobre o assunto, resolvi criar a minha versão para este assunto. Talvez eu seja o centésimo que [...]

# 27° dinis Saturday 14 April 2007 às 05:14 PM GMT

não se trata de um comentario trata-se de uma pergunta: como se faz uma validação ao windows

# 28° Recursos para WebDev - Parte 6: TOP 21 sites sobre CSS e Tableless Tuesday 10 July 2007 às 02:10 PM GMT

[...] Validação e Semântica ~ ótimo texto do Revolução Etc sobre o [...]

# 29° Padrões Web e a importância da Marcação Semântica « Mundo web Friday 23 November 2007 às 02:23 AM GMT

[...] primeiro post sobre Padrões Web, gostaria de comentar um tema aparentemente já [batido] e muito [discutido], mas que infelizmente uma parte dos desenvolvedores não seguem os princípios, talvez, por [...]

# 30° Bruno Oliveira Monday 14 January 2008 às 03:14 AM GMT

Bom, primeira vez que vejo o blog e gostei do mesmo, ainda mais do polêmico assunto. Apenas uma observação pqp como tem “bruno” postando… caraca… Agora indo ao que interessa, eu trabalho a um certo tempo com web, e venho passando por uma evolução (natural, para com quem estuda para isso). Sempre procurei validar meus códigos após iniciar o XHTML, para que for conferir meu atual portal verá que está realmente grotesco e está passando por muitas mudanças de acordo com as normas e regras. Agora todos meus clientes estão com seus sites validados e teoricamente semanticamente corretos (digo teoricamente pois nem todos 100% foram mechidos por mim, eu tinha um funcionário que nao era ligado nem em validação e muito menos semantica) mas mesmo assim prezo por isso pela qualidade do meu serviço, mesmo que isso me tire mais tempo do que necessário para a entrega do serviço. Jamais pensei em fazer algo “mal feito” ou que fossem contra as regras que eu aprendo todos os dias, já deixo claro para os clientes que jamais entregarei algo “mais rapido” ou mais barato pelo simples fato de não cuidar ao máximo com o meu codigo e a minha maneira de programar. Quanto a justificar valores para o cliente eu já tenho os valores ajustados de acordo com a maneira com que programo, sendo assim não dou a opção ao cliente de reduzir custos pela não conformidade dos códigos. Muitos não dão nem bola para isso. Mas eu como programador dou sim e mantenho isso mesmo nos sites mais básicos. Trabalhar com a semantica correta posso não estar fazendo por ainda nao ter tido tempo para estudar mais mas a cada dia pretendo evoluir nesta área. Sobre a validação do XHTML eu acho importante sim, mas validar CSS tendo FF e IE juntos PRATICAMENTE IMPOSÍVEL ! Abraço e desculpe me prolongar! Boa iniciativa do blog discutir este assunto tão polêmico e aproveitando o espaço alguem algum site de referência para SEMANTICA?!

# 31° Por falar em Css « Blog da turma de design digital INFNET Friday 7 March 2008 às 10:7 AM GMT

[...] algumas coisas pra fazer o site vi em um blog que código validado não significa código semântico e achei interessante. Isso de código [...]

# 32° Felipe Thursday 31 July 2008 às 05:31 PM GMT

Concordo plenamente, mas acho que ter o site validado pela w3c é o primeiro passo e é muito importante, mas não essencial

# 33° Google e os padrões web » Revolução Etc Friday 10 October 2008 às 08:10 AM GMT

[...] Escreva HTML decente e limpo (veja mais sobre isso aqui) [...]

Avisos
Os itens com asterisco ( * ) são campos de preenchimento obrigatório.
Todos os links inseridos nos comentários possuem o atributo rel="nofollow" para impedir com que user agents (como os mecanismos de busca) sigam os links inseridos para desestimular spammers.
Todos devem se identificar através de e-mail válido.
Os e-mails dos usuários não serão divulgados no site.
Comentários:


Assine por feed

assinantes Assine o feed do Revolução Etc

Sobre o Revolução Etc

Foto do autor Henrique Costa Pereira O Revolução Etc é o site pessoal do Henrique C. Pereira que trabalha com design de interfaces, planejamento, arquitetura da informação e desenvolvimento para web. Ele escreve aqui sobre várias coisas relacionadas com acessibilidade, web standards, tecnologia, desenvolvimento e o que mais der na telha, além de eventualmente escrever alguma coisa ou outra para o Webinsider. Leia mais.

Livros que vão colocar minhocas na sua cabeça:

  • SEO Otimização de Sites - Paulo Teixeira
  • Não me faça pensar! - Steve Krug
  • Google Adwords a Arte da Guerra - Ricardo Vaz Monteiro
  • Design para Internet: Projetando a Experiência Perfeita - Felipe Memoria
  • Sopro no Corpo: Vive-se de Sonhos - Marco Antônio de Queiroz (MAQ)
  • 250 Segredos para Web Designers - MOLLY E. HOLZSCHLAG
  • O design do dia a dia - DONALD A. NORMAN
  • Ser e o Nada - Jean-Paul Sartre
  • Apocalípticos e Integrados - Umberto Eco
  • Ergodesign e Arquitetura de Informação - LUIZ AGNER
  • The Art and Science of Web Design - Jeffrey Veen
  • Ansiedade de Informação 2 - RICHARD SAUL WURMAN
  • Criando Páginas Web com CSS - ANDY BUDD, CAMERON MOLL, SIMON COLLISON
  • Mobile Web Design - Cameron Moll
  • Sigam-me no Twitter

Me encontre

Lugares onde digitalmente eu costumo estar presente.

Anúncios

Blogroll:

Alguns sites interessantes e blogs de amigos que eu leio com frequência. Em ordem alfabética.

Pessoas que trabalham comigo:

Sites dos colegas de trabalho na Webroom.

Já trabalharam comigo:

Som que faz a minha cabeça!

Procurando inspiração? Esta é uma breve lista do que eu ouço!

  • Diana Krall - The Very Best Of
  • U2 - How to dismantle an atomic bom
  • U2 - 18 singles
  • The Essential - Bob Dylan
  • Bob Dylan - Modern Times
  • Miles Davis - Cool & Collected
  • Miles Davis - Prestige Profiles Vol 1
  • Pink Floyd - The Division Bell
  • Pink Floyd - The wall
  • Pink Floyd - Delicate Sound Of Thunder
  • John Coltrane - The Best of John Coltrane
  • The beatles - The Beatles 1