21 abril, 2009 por Wesley Oliveira Categorias :
Padrões
Tutoriais Tags: , , , ,

Como validar seu HTML de acordo com a W3C

valid-html401Um site deve ser bonito por dentro e por fora, ou seja, precisa ser apresentável de forma que seu usuário possa navegar nele com facilidade, a apresentabilidade deve estar presente também em seu código interno pois facilitará manutenções, ganhará agilidade e poderá focar nos negócios, assim trocar “A” por “B” no conteúdo de seu site será muito simples e rápido.

Para auxiliar nessa tarefa e garantir que nosso site seja bonito por dentro e por fora usaremos a ferramenta de validação de HMTL fornecido pela W3C que é o orgão regulamentador do HTML no mundo. Seu site é http://validator.w3.org.

Seguindo esses padrões teremos algumas vantagens imediatas:

  • Código mais limpo para manutenções
  • Uniformidade de apresentação entre browsers
  • Carregamento mais rápido.
  • Fácil indexação pelas ferramentas de busca (google, yahoo)


Preparamos aqui um código HMTL para estudos, não se engane esse código abaixo é muito traiçoeiro e o 1º desafio é você saber a quantidade de erros/warnings que esse código produzirá.

Código:

[html smarttabs="true" tabsize="4"]
<html>
<head>
<title>Página de Teste – Sr Web</>
</head>
<body>
<h1>Página Principal</h1>
<br><br>
<img src="arroba.png"/>
<br><br>
<table border=’1′>
<tr>
<td> Cabeçalho Coluna 1 </td>
<td> Cabeçalho Coluna 2 </td>
</tr>
<tr>
<td> Linha 01 a </td>
<td> Linha 01 b </td>
</tr>
<tr>
<td> Linha 02 a </td>
<td> Linha 02 b </td>
<tr>
<td> Linha 03 a
<td> Linha 03 b
</tr>
</table>
<br><br>
Aqui vai algum conteúdo para seu site, algum texto referente ao seu site.
<br><br>
<a href="arroba.png">Clique aqui para ver nosso logotipo</a>
</body>
</html>
[/html]

Iremos agora acessar o site http://validator.w3.org e colar o código acima na aba “Validate by direct Input”, temos outras duas opções que poderemos usar em casos diferentes. Uma delas é a “Validate by URI” que possibilita passarmos a URL da página (obrigatoriamente ele precisa estar hospedado em algum servidor. Pois a página de validação não tem acesso local. Ex: localhost).E a outra aba refere-se a inserção de código via upload de arquivo.

No nosso caso podemos simplesmente copiar o código acima, colar na aba “Validate by direct Input” e clicar no botão “Check”‘.

Validador

Para nossa surpresa são apresentados 2 erros e 6 warnings!!!!

Erros

Obviamente que a primeira reação de um bom programador é pedir pra ele validar novamente clicando no botão “Revalidate” (Como se realmente tivesse alguma chance de mudar esse status, heheheh).

Seguindo então o 1º mandamento dos programadores “Não discuta com o compilador/intepretador”. Resolveremos agora cada um desses erros e ensinaremos para esse validador quem que manda por aqui, ou por lá, depende do ponto de vista.

Nossa estratégia agora é arrumar primeiro os erros e na seqüência os warnings.

1º Ajuste: Arrumar o tipo de documento que ele já acusou no primeiro warning. Escolheremos aqui por questões didáticas o HTML 4.01 Transitional.

correção – colocar na 1ª linha do HTML o seguinte código:
[html toolbar="false"]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
[/html]

2º Ajuste: Incluir a propriedade “ALT” na tag img. Ela é utilizada pelos browsers quando por qualquer motivo a imagem não puder ser exibida.

correção – troque o código da linha 8 pelo código abaixo:
[html toolbar="false" firstline="7" highlight="8"]
<br><br>
<img src="arroba.png" alt="logotipo" />
<br><br>
[/html]

Pronto caso você queira conhecer a famosa “barra verde do sucesso”, citada pelo livro “HTML – Use a Cabeça“, ela está aí. Temos ainda alguns warnings para corrigir e já faremos na seqüência.

3º Ajuste: Colocar corretamente o final da tag title, pois, cuidadosamente colocamos apenas o no final causando esse erro.

correção – trocar o código da linha 3 pelo código abaixo:
[html toolbar="false" firstline="2" highlight="3"]
<head>
<title>Página de Teste – Sr Web</title>
</head>
[/html]

4º Ajuste: Tirar o “/” do final da tag IMG. O HTML Transitional não aceita short tags por padrão.

correção – trocar o código da linha 8 pelo código abaixo:
[html toolbar="false" firstline="7" highlight="8"]
<br><br>
<img src="arroba.png" alt="logotipo">
<br><br>
[/html]

5º Ajuste: Indicar qual codificação, encoding, utilizaremos em nossa página. Usaremos aqui o utf-8.

correção – incluir dentro da tag head o seguinte:
[html toolbar="false" firstline="2" highlight="3"]
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Página de Teste – Sr Web</title>
</head>
[/html]

O último warning que aparece é porque estamos entrando com o código diretamente na página do validador. Caso tivessemos uma página hospedada com esse conteúdo e validássemos pela url esse warning não apareceria.

Pronto! Seguindo todos esses passos, você tem agora um código HTML Transitional válido.

Válido

Código HTML 4.01 Transitional Válido:
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Página de Teste – Sr Web</title>
</head>
<body>
<h1>Página Principal</h1>
<br><br>
<img src="arroba.png" alt="logotipo">
<br><br>
<table border=’1′>
<tr>
<td> Cabeçalho Coluna 1 </td>
<td> Cabeçalho Coluna 2 </td>
</tr>
<tr>
<td> Linha 01 a </td>
<td> Linha 01 b </td>
</tr>
<tr>
<td> Linha 02 a </td>
<td> Linha 02 b </td>
<tr>
<td> Linha 03 a
<td> Linha 03 b
</tr>
</table>
<br><br>
Aqui vai algum conteúdo para seu site, algum texto referente ao seu site.
<br><br>
<a href="arroba.png">Clique aqui para ver nosso logotipo</a>
</body>
</html>
[/html]

Parabéns você agora está se tornando uma pessoa muito conceituada em HTML.

No próximo post vamos partir desse código já validado com HTML 4.01 Transitional para convertê-lo para HTML 4.01 Strict e o tão sonhado XHTML 1.0 Strict.

Arquivos do tutorial de hoje:

Tutorial HTML 4.01 Transitional

Até mais.

Trackbacks & Pingbacks


Comentários

fabiano 21 de abril de 2009

boa dica, mas fazer isso com um blog por exemplo já fica muito complicado, pois tem partes do html que não podemos alterar.

Wesley Oliveira 21 de abril de 2009

Foi muito boa sua observação Fabiano,

O grande segredo desse item é a hospedagem, por exemplo se você usa seu blog numa hospedagem onde não tem acesso aos fontes essa validação ficará sempre por conta de quem hospedou.
Fora isso tudo é possível, nós aqui da Sr Web fazemos sempre esse trabalho de adaptação no WordPress mas como sempre temos acesso aos fontes frequentemente damos uns ajustes no blog e plugins do WordPress para que a validação sempre seja realizada com sucesso.

Ainda essa semana estaremos fazendo mais alguns Posts sobre esse mesmo tema, fique ligado.

abraço

Lucas Cegatti 22 de abril de 2009

Muito bom, não sabia dessas validações.

Obrigado pelo conceito do artigo de HTML.

abraços

Paulo 22 de abril de 2009

Lembrando que o W3C valida também XHTML, SMIL, MathML, RSS/Atom feeds, CSS stylesheets, MobileOK content além de procurar por links quebrados e fornecer os respectivos selos para que os usuários dos sites possam verificar a validação.
Ótima matéria.
Parabéns

Roberto 21 de março de 2010

porra velho, ajudou bastante, vlw mesmo.

Deixe um comentário