Algumas dicas de como validar e corrigir seu Blog no W3C

O sistema do W3C serve ao propósito de melhorar a qualidade do código fonte de seu blog, verificando erros e possíveis conflitos que tornam o seu blog menos compatível com os navegadores ou menos acessível aos mecanismos de busca. Como eu havia prometido em meu último post (Porque validar meu blog no W3C?), hoje vou dar algumas dicas de como validar seu blog no W3C, ou seja, corrigir alguns dos erros mais comuns.

Nã0 pretendo ensinar XHTML, quero apenas mostrar alguns erros que vejo acontecer frequentimente em blogs e que podem ser evitados.

Um pré requisito para ler e entender este post é já saber alguma coisa de XHTML.

As dicas aqui presente estão adequadas aos padrões do XHTML Transitional.

Não deixe nada sem fechar.

Aqui esta um erro bem comum: no XHTML você não pode deixar nada sem fechar. O que complica é que existem dois jeitos de fechar uma tag HTML:

Por exemplo usando uma tag para abrir e outra para fechar:

Abrir uma div: <div>
Fechar uma div: </div>

Exemplo tags que não precisam de outras para fechar:

Quebra de linha: <br />
Linha divisoria: <hr />

Existem poucas tags que não necessitam uma outra para fechar, exemplo delas são:
<br />
<hr />
<img />
<link />
<meta />
<param />

Observação importante: Fiquem atentos com isso, nunca abra uma tag para imagem sem fechar ela no final com />.

O Blogger tem algumas características incomuns quando olhamos o código fonte diretamente no menu “Editar HTML”. Não sei exatamente porque, porém no editor do código fonte do Blogger, quando você abre uma <div> ou um <p> para algo e dentro deles não existem nenhum conteúdo, o próprio editor fecha ele de forma errada, exemplo:

<div class=”post-footer-line post-footer-line-3″ />

Porém na hora que o Blogger é renderizado pelo navegador a marcação costuma aparecer de forma correta que seria:

<div class=”post-footer-line post-footer-line-3″></div>

Então cuidado para não ficar “viciado” nisso e quando for criar uma página fora do Blogger usar esta forma de fechamento.

Nunca esqueça do atributo ALT nas imagens.

Algo que todos sempre esquecem na hora de chamar uma imagem é de colocar o atributo ALT nela, ele é algo obrigatório, pois caso a imagem não seja carregada o texto que está no ALT irá aparecer. Usuários com certas deficiências de visão usam sistemas em seus computadores lêem o atributo ALT e lhes dizem o que é aquela imagem e, o mais importante, também é que os motores de busca usam o ALT para indexar suas imagens. Recomendo que leia: Otimização de Imagens – SEO de Imagem.

Forma correta de usar a tag IMG:
<img src="LINK DA IMAGEM" alt="TEXTO ALTERNATIVO" />

Outra forma de usar é deixar o ALT vazio, vai ser validado pelo W3C, porém isso não é recomendado para SEO.
<img src="LINK DA IMAGEM" alt="" />

As TAGs não podem estar em CAIXA ALTA.

Esta aqui uma “barbeiragem” que eu particularmente não entendo. Várias pessoas quando escrevem o código usam caixa alta e isso é errado.

Todas as tags devem estar escritas sem CAIXA ALTA, então desligue seu Caps Lock na hora de escrever.

Forma errada de usar:
<BR>
<P>texto<P>


Forma correta:
<br />
<p>texto</p>


É engraçado, mas alguns navegadores antigos como por exemplo o Internet Explorer 6 na hora que renderiza seu site entende todas as tags como se fossem em CAIXA ALTA. Porém o correto, como já falei, são todas escritas em minúsculo.

Respeite a hierarquia do HTML.

Existe uma certa hierarquia dentro do código HTML. Por exemplo as DIVs (divisórias) não podem estar dentro de tags P (parágrafos). Quando é necessário usar algum estilo em certas partes do seu texto é necessário o uso da tag SPAN.

O <span> age de forma similar ao <div> sendo possível atribuir classes a elas e assim personalizar na sua folha CSS ou personalizar com CSS Inline. Veja exemplo dos dois:

<p>exemplo de parágrafo <span class="texto-destacado">destacado</span>, viu como é fácil?<p>
<p>exemplo de parágrafo <span style="color:red;font-size:15px;">destacado</span>, viu como é fácil?<p>

O editor de textos do Blogger tem o pessimo costume de inserir DIVs dentro do seu texto. Para evitar isso use a aba HTML do seu editor ou melhor ainda, use o Windowns Live Writer para publicar em seu Blogger. (No WordPress não temos este tipo de problema, já que por padrão o editor da ferramenta elimina as DIVs).

• Windows Live Writer – Editor de blog

Aprenda a fazer listas em HTML.

Nas listas existem também hierarquia, não admitindo que tenha dentro delas tags do tipo DIV ou até mesmo quebra de linhas formadas por <br /> entre uma lista e outra.

Temos que lembra antes de tudo que na hora de criar uma lista você deve usar <ul> (para listas comuns) ou <ol> (para listas ordenadas).

Exemplo comum de uma lista feita de forma errada:
<li>Primeiro Item da Lista
<br />
<li>Segundo Item da Lista

Exemplo correto de como deve ser uma lista:
<ul>
<li>Primero Item da Lista</li>
<li>Segundo Item da Lista</li>
</ul>


Caso seja necessário personalizar algum item especifico da lista use uma class dentro da <li> ou um CSS inline, similar com o que falei da tag SPAN.

Exemplo:
<ul>
<li class="item-destacado">Primeiro Item da Lista</li>
<li style="color:blue">Segundo Item da Lista</li>
</ul>


Lugar de CSS é dentro do <head>:

Chamadas de CSS devem estar sempre dentro do <head> de seu código, nunca dentro do <body>.
Esta é uma má pratica muito comum na hora de inserir Widgets no Blogger ou até mesmo no WordPress, onde quem faz o Widgets apenas passa o código dele e lhe manda inserir em seu blog através daqueles Gadgets – HTML/JavaScript (como o nome já diz, é para inserir HTML ou Javascripts).

Sempre que for instalar algo assim, retire a parte do CSS, normalmente indicados por tags do tipo <style> e insira junto com o resto do CSS do seu blog.

Outra alternativa para isso é inserir CSS inline, este é aceito no XHTML Transitional (no Strict não).

Indique o TYPE de seu arquivo CSS ou Javascript:

Assim como você deve indicar o DOCTYPE do seu XHTML é necessário indicar também o tipo de arquivo que você esta chamando para dentro do seu código.

Para CSS e Javascripts devemos sempre falar que tipo de linguagens estamos usando.

Exemplos de como se usar com CSS:

CSS dentro do HTML:
<style type="text/css">
body {
background:#fff;
}
</style>

CSS por link:
<link href="style.css" rel="stylesheet" type="text/css" />

Exemplo com Javascript:

Javascript dentro do HTML:
<script type="text/javascript">
if(top.location!=this.location) top.location=this.location;
</script>

Javascript por link:
<script type="text/javascript" src="jquery.js"></script>

Erros com elementos em Flash:

Sempre que exportamos algo do Flash para HTML, o próprio programa trás centenas de erros no seu código.
Geralmente todos causados por não fechar as tags <param />.

Então na hora que for usar algo assim não se esqueça de sempre fechar todos os PARAM do seu código.

Existem também erros por HTML personalizados, particularmente não são necessários.

Aqui um exemplo de um código limpo para seus arquivos em Flash:

<object height="ALTURA DO ELEMENTO" width="LARGURA DO ELEMENTO" data="LINK DO ARQUIVO SWF" type="application/x-shockwave-flash">
<param value="DE NOVO LINK DO ARQUIVO" name="movie" />
<param value="transparent" name="wmode" />
<param name="quality" value="high" />
<p>CONTEÚDO ALTERNATIVO CASO O VISITANTE NÃO TENHA O PLUGIN DE FLASH EM SEU COMPUTADOR (ESTE CONTEÚDO PODE APARECER TAMBÉM ENVOLVIDO POR UMA <DIV>)</p>
</object>

Considerações finais:

Fiquem atentos, pois as vezes esquecer de fechar uma DIV como falei ai, pode gerar centenas de erros na validação, então observe seu código com calma, tanto na hora de montar como na hora de corrigir.

Então você deve sempre estudar HTML se pretende manipular bem a linguagem. Isso possibilita que seu blog será aberto de forma correta em qualquer navegador e também ser bem lido pelos motores de busca.

Não adianta aprimorar suas técnicas em SEO sem aplicar melhorias em seu código.

param name="quality" value="high"/>