A validação W3C na sua grande maioria das vezes não perdoa, mas oferece-lhe sempre a possibilidade de verificar os erros que cometeu ao produzir os layouts dos seus blogs e websites. Muitos erros e avisos geralmente indicam que o seu código XHTML não está em grande forma, e que provavelmente não será consistente no processo multi-browsers. Hoje trazemos-lhe 10 problemas de validação comuns que geralmente deixam os programadores/desenvolvedores completamente de rastos, e como resolvê-las!

Antes de começarmos, vejamos algumas regras importantes a ter em conta antes de correr o W3C validator.

  • Esqueça um pouco os avisos – Se o validador refere que o seu blog tem 12 erros e 83 avisos, preocupe-se em solucionar primeiro os erros.
  • Elime um erro de cada vez – Faça o seu trabalho como se este se tratasse de uma lista. Comece pelo primeiro erro e termine no último, resolvendo cada um deles de cada vez. O HTML é lido normalmente pelos browsers do topo para o fundo, pelo que os erros também.
  • Re-valide o código após cada alteração – Muitas vezes um erro pode reproduzir múltiplos outros erros numa única página ou em várias. Para evitar ser apanhado de surpresa, re-valide o seu código depois de cada uma das alterações que vai implementando para assegurar que o seu problema está de facto resolvido.

1. UMA TAG DIV POR ENCERRAR

Uma das razões mais comuns para os layouts não validarem é precisamente esta. É impressionante a quantidade de vezes que um layout não valida a 100% por culpa de uma “div” que não foi encerrada. As tags div não encerradas são na sua grande maioria um dos problemas mais comuns dos erros de layout, e também um dos erros mais complexos de resolver, muito por culpa da dificuldade que existe em encontrar o erro. O validador nem sempre consegue encontrar a “div” que se encontra aberta, pelo que nem sempre é simples resolver o problema.

2. UMA TAG DE EMBED

No início dos anos 90, os browsers como o Internet Explorer e o Netscape começaram a reconhecer declarações únicas de fontes que nunca haviam sido standardizadas. Infelizmente, isso significa que o W3C validator ainda não reconhece algumas das tags HTML mais comuns do momento, como a tag ‘embed’, mesmo que estas sejam amplamente utilizadas nos dias de hoje. Se pretende conseguir uma validação a 100% no seu template, você precisa camuflar a sua embed. Se você pretende ter ambas as coisas uma validação W3C e media integrada no seu website, experimente utilizar o método Flash Satay.

3. DECLARAÇÃO DOCTYPE IMPRÓPRIA

Outro erro comum passa por não declarar um DOCTYPE, ou declarar o DOCTYPE errado no cabeçalho do documento. Obviamente, se pretende validar o seu website com sucesso, é necessário que faça uso da declaração de DOCTYPE e se possível (ironia ligada) de forma correcta.

4. FALTA DO TRAVESSÃO

Se o seu website ou blog não está a validar correctamente, então existe uma grande probabilidade de você se ter esquecido de um travessão de encerramento algures no seu código. É muito fácil nos esquecermos de um simples travessão para encerrar uma chamada qualquer, especialmente em tags de carregamento de imagens. Por exemplo:

<img src=”" alt=”">

Este código nunca validaria num DOCTYPE restrito. Adicione um travessão ‘/’ antes da tag de imagem encerrar e tem o seu problema resolvido. Veja:

<img src=”" alt=”" />

5. ALINHAMENTO

Você pode utilizar a tag “align” as vezes que desejar, se o seu DOCTYPE estiver especificado para “Transitional”, mas caso você escolha uma validação do tipo “Strict validation”, provavelmente irá ver erros. O alinhamento é mais uma tag não muito considerada no meio, que na verdade nem deveria ser utilizada na produção de código. Ao invés de utilizar uma tag de alinhamento, é recomendável utilizar o float ou text-align para mexer com os elementos das suas páginas.

6. JAVASCRIPT

Se você declarou um “Strict DOCTYPE”, você terá de envolver as tags CDATA envolta do seu código JavaScript. Este aspecto de validação deixou desenvolvedores muitas vezes à beira de um ataque de nervos, uma vez que os sites e blogs de hoje tendem a utiliza JavaScript para coisas tão simples como anúncios de publicidade e scripts de gestão estatística.

7. ATRIBUTO “ALT” EM IMAGENS

Se por ventura ainda não reparou, as imagens são um dos aspectos mais importantes da validação de um site ou blog. Tal como acontece com a falha de travessão que vimos no ponto 4, as imagens necessitam também de um atributo “alt”, do tipo alt=”Paisagem Moderna”. Os motores de busca trabalham também com base neste atributo “alt” para identificarem imagens numa página, o que significa que se pretende atrair também alguns visitantes dos motores de busca, é bom que se preocupe em definir a tag “alt” em todas as imagens que utiliza.

8. ENTIDADES DESCONHECIDAS

As entidades são também uma das maiores armadilhas que se colocam na frente de uma validação. Ao invés de utilizar símbolos do tipo “&”, você deverá utilizar caracteres de código correctos e standardizados. Poderá visualizar aqui uma lista inteira de entidades e código para utilizar nas suas produções XHTML.

9. ELEMENTOS DENTRO DE ELEMENTOS

Quando você tem elementos dentro de elementos, como por exemplo:

<div><strong>Doce!</strong></div>

É muito fácil você complicar a sua validação, especialmente quando os elementos se misturam e a sua ordem deixa de estar correctamente definida. Por exemplo, começar com a tag “strong” antes da tag “div”, mas fechar primeiro a tag “div”, é algo que provavelmente não afecta o aspecto do seu layout, mas que seguramente o impede de validar correctamente o seu trabalho.

10. TAG “TITLE”

Embora pareça um problema óbvio, muitos desenvolvedores (eu incluído), esquecem-se de definir a tag ‘title’ na secção de cabeçalho dos seus templates. Se você por ventura for brindado com um erro do tipo “missing a required sub-element of HEAD” aquando da sua validação, já sabe que se esqueceu de definir a tag “Title” para o seu website ou blog.

validation3

 

Autor: Paulo Faustino

Blog do Autor | Artigos do Autor:

Fundador da Escola Dinheiro. É um empreendedor e blogueiro que dedica a sua vida à produção e partilha de conteúdos de grande qualidade, contando já com alguns dos mais reconhecidos blogs de Portugal e do Brasil.

  • Explorer - Factory Construction & Ship Building Joomla Theme
  • Justice - Attorney and Law Firm Joomla Template
  • OwnFolio - One Page Personal Portfolio / vCard / Resume / Showcase Joomla Template
  • Big Business - Responsive Template
  • Merab - Creative Multipurpose Drupal 8 Theme
  • Fitness Academy Joomla Template
  • Fruition - Business Joomla Template
  • Educate | Education & Courses, Kindergartens Joomla Template
  • Constructive - Contractors Multipurpose Joomla Landing Page Theme
  • Vina Bubox - VirtueMart Joomla Template for Online Stores
  • BizOne - One Page Parallax Drupal Theme
  • LawHouse - Responsive Lawyers Attorneys Joomla Template

Gostou deste artigo? Então torne-se fã do Blog no Facebook!



Comentários dos Alunos


  1. Vinicius Câmara
    15 de janeiro de 2010

    Sensacional o seu artigo.
    Realmente a questão de validação é uma pedra no sapato das pessoas.
    Com suas dicas o codigo fica limpo e claro.
    Vida Longa e Prospera!



  2. Angelo
    19 de janeiro de 2010

    Cara… perfeito esta dica! Me ajudou muito… vlw



  3. monteiro
    13 de dezembro de 2010

    mais explicado que esse tutorial ainda não vi.
    parabens!



  4. Cristiano
    13 de fevereiro de 2011

    Sinceramente, com o passar dos anos a trabalhar nesta área, não estou sempre a pensar se o código está totalmente validado.

    Isto porque tal como explicas no artigo, eu próprio segui essas regras de forma a que hoje em dia fica quase tudo correcto, sendo no final necessário apenas dar uns toques.

    Acho que é importante ainda referir que a validação do w3c não é algo obrigatório mas é importante para PROGRAMAR BEM (XHTML)

    Existe também a validação do CSS que deixo já agora aqui o link:
    http://jigsaw.w3.org/css-validator/

    Cumprimentos,
    Cristiano Perdigão



    • José Almy
      9 de maio de 2011

      Paulo,

      Muito bom!

      Tem projetos que são bem complicados para validar de acordo com os padrões W3C, principalmente quando o cliente não quer entender que aquela “firulinha” está inviabilizando toda a validação do website e que futuramente pode comprometer a sua indexação nos mecanismo de busca.
      Um abraço!



  5. José Almy
    23 de setembro de 2011

    Muito bom!
    Parabens!



  6. Andréia Treptow
    22 de setembro de 2012

    Como faço pra validar o códgigo do Button Like do Facebook no W3C???? Os únicos erros que aparecem são desse plugin.

    Espero que possa me ajudar. Obrigada.



  7. Daniel Ferreira
    19 de julho de 2014

    Ótimo artigo, eu estava precisando.


RSS
Twitter
Facebook
Comentários
ASSINANTES
SEGUIDORES
FÃS
COMENTÁRIOS
7794

Subscrever Newsletter
Subscreva a Newsletter:



Aplicativos Android, iPhone e Muito Mais!




Assine a Escola Criatividade Assine a Newsletter da Escola Criatividade Escola Criatividade no Twitter Escola Criatividade no Facebook Escola Criatividade no Youtube Escola Criatividade no Google Buzz