Dicas para seguir os padrões W3C e fazer seu site funcionar em qualquer navegador

Todos os desenvolvedores de um site visam desenvolver algo que funcione em qualquer navegador, mas nem sempre isto ocorre.

Por isto, existe um órgão responsável em determinar atualmente novos padrões para a Web, e atualmente, segui-los é a melhor forma de garantir que seu website não tenha erros de HTML e que venha continuar funcionando no futuro.

O padrão HTML5 ainda está sendo estabelecido, mas o que entra em seu escopo principal, dificilmente será alterado à não ser que haja alguma grande revisão ou algum grande erro ocorrido.

Veremos à seguir, dicas essenciais para que seu site seja validado no W3C e garanta sua renderização na maioria dos navegadores de forma correta:

DOCTYPE

Sempre defina o doctype correto ao documento, isto irá determinar qual o modelo de validação e renderização necessária para o documento. Um doctype errado faz seu navegador renderizar a página de outra forma e ter resultados não esperados.

Meta tags

As meta tags sempre devem ter a barra fechando para cada item:

<meta http-equiv="refresh" content="200" />

Isto também vale para links e/ou scripts e qualquer outro conteúdo na página. Isto simula o mesmo que <meta http-equiv="refresh" content="200"></meta>, entretanto de forma abreviada.

X-UA-Compatible

Sempre defina a compatibilidade de sua página ao navegador. Com esta meta tag, você pode indicar para o Internet Explorer por exemplo para utilizar componentes ActiveX (flash), versão do Internet Explorer suportada e até mesmo se é para utilizar o Google Chrome Frame para renderizar sua página.

Parâmetros:

"IE=EDGE" : Significa que seu site é totalmente compatível com as mais recentes tecnologias, e pode dispensar o modo de compatibilidade do navegador ao usuário final.

"IE=EmulateIE8": Significa que o site funciona apenas no modo compatível ao Internet Explorer 8, e que a compatibilidade deve simular este modo de renderização para o cliente.

"IE=9" ou "IE=10": Significa que o site foi feito para esta versão, e que qualquer outra versão precisará executar o modo compatiblidade para que seja exibido corretamente.

"requiresActiveX=true": Indica ao Internet Explorer 10 ou superior que componentes ActiveX poderão ser executados. Em algumas versões, até componentes flash são bloqueados, e então com este recurso, os componentes flash voltam à ser executados. (A Microsoft em update já removeu o bloqueio, mas quem tem o navegador desatualizado precisará disto para ver conteúdos Flash).

"Chrome=1" : Força renderizar a página web com o Google Chrome Frame para Internet Explorer (se disponível).

<meta http-equiv="X-UA-Compatible" content="IE=Edge,requiresActiveX=true,chrome1" />

Quebra de linha (<br />)

Sempre realizar a quebra de linha com "<br />" ao invés de "<br>". Como dito anteriormente, este padrão é necessário para que o navegador consiga traçar antes de renderizar a página, todos os elementos como se fosse um documento XML, e neste tipo de documento, todas as chaves necessitam ser fechadas, e com a "/" no final da própria tag, significa que está fechando automaticamente a mesma.

Este contexto também é válido em documentos XML como o Web.Config. Você pode usar o <clear /> para remover todo conteúdo herdado do servidor e substituir pelas suas entradas.

Imagens

Todas as imagens precisam ter a tag "alt". Isto é necessário pois se caso a imagem não seja carregada e/ou caso a pessoa desabilite baixar as imagens automaticamente, exiba um texto informativo à respeito daquela imagem. O correto é sempre ter um texto, mas o obrigatório é que ao menos a tag exista, nem que o conteúdo dela seja em branco.

Também é necessário fechar a tag com "/" no final.

Sempre especifique o tamanho da imagem com width e height, pois isto garante que o elemento não tome outros tamanhos durante sua renderização para o usuário final e evite que o layout do site fique fora do seu contexto.

<img src="http://www.google.com/imagem.png" alt="Imagem no Google" width="300" height="300" />

ID de referência

Jamais utilize em uma única página HTML, elementos com ID repetido. O ID não foi feito para repetir, ele foi feito para identificar uma referência única. Se caso precisa estilizar com CSS, prefira utilizar a tag "class", pois a mesma pode ter conteúdo repetido para estilizar vários elementos ao mesmo tempo. Não utilize ID para folha de estilo, utilize apenas para controles JavaScript.

<div id="superElemento1" class="formElemento" />

<div id="superElemento2" class="formElemento"> </div>

JavaScripts

Evite utilizar JavaScript no meio de seu HTML, sempre prefira utilizar arquivos separados e neste caso, sempre será necessário fechar a tag <script> com a tag </script>.

Sempre defina o tipo de programação associada ao script para que o navegador saiba utilizar o interpretador correto. No Internet Explorer, existem variações como JavaScript ou VBScript.

Insira no header de sua página.

<script type="text/javascript" src="http://googleapis.com/javaScriptExample.js"></script>

 Ou no meio do HTML, insira com a seguinte tag para ignorar verificações de erro de HTML pela W3C:

<script type="text/javascript">
/* <![CDATA[ */
// Aqui sua área de seu código que será ignorado pelo parser do HTML. Isto será tratado pelo processador do JavaScript no seu navegador.
alert('Olá mundo!');
/* ]]> */
</script>

 CSS

Assim como JavaScript, sempre utilize arquivos externos ao seu projeto. Não deixe junto e evite utilização das tags "style". Prefira estilizar tudo com "class", pois assim poderá rapidamente criar novas folhas de estilo e ter várias versões de layout conforme necessário sem afetar o HTML e JavaScript atuais configurados. Se trabalha em equipe, este é o melhor método pois evita de utilizar o mesmo arquivo que outras pessoas, te deixando livre para estilizar conforme o trabalho aparece.

A W3C iniciou a exibir uma atenção para as tags "style". No HTML que vem do server-side, evite utilizar. Não há indicação de problemas na utilização da tag "style" por JavaScript, pois o W3C não valida ações de JavaScript, apenas o HTML que vem do servidor, e que é renderizado pelo motor de renderização do navegador.

Caso haja muitas tags "style" em seu site, mesmo que manipuladas por JavaScript, considere talvez a opção de trabalhar utilizando class, pois assim será menor o trabalho no momento da manutenção do layout, e quem cuida do design, nem sempre sabe lidar com JavaScript.

Caso não tenha jeito, e precise colocar o "<style>" dentro do HTML, siga o modelo:

<style type="text/css">
/* <![CDATA[ */
/* Sua folha de estilos inline aqui. */
/* ]]> */
</style>

E claro, nunca esqueça de definir o "type" para <style> ou <script>.