A W3C fornece um validador de (X)HTML para que os web designers possam verificar as suas páginas. Com certeza existe um motivo para isso.

Veja a explicação no site W3C

Se você não tem tempo para ler eu vou resumir o mais importante:

Para todo idioma, existe sua própria gramática, vocabulário e sintaxe. No entanto assim como nos textos escritos no seu idioma pode conter erros de gramática, documentos escritos em (X)HTML podem também (por várias razões) não seguir essas regras de escrita. O processo de verificar se um documento segue as regras de linguagem é chamado validação. Um documento que passa pelo processo de validação com sucesso é chamado de válido.

Ferramenta:
Validador html

as páginas que não são válidas funcionam, por que eu vou me preocupar em validar?

Problemas com o browser:

Paginas não válidas fazem com que o browser tenha que auto-corrigir o seu código e cada browser corrige de maneira diferente. Se você esqueceu de fechar uma tag o firefox talvez ignore, mas o interenet explorer não acarretando em problemas no layout.

Tempo de carregamento:

Se o seu código é válido o browser interpretará rapidamente a página pois ele não vai ter que corrigir problemas com tags.

Problemas futuros:

Com o código válido você provavelmente não terá problemas com os futuros browsers. Já vi páginas que funcionam perfeitamente com o Internet Explorer 5.5 e 6.0 mas ficam tudo fora do lugar com o Internet Explorer 7, 8, Firefox e etc.

O Google prefere código válido:

Does Google like valid code? Nesse site é feito um teste com 4 páginas de mesmo conteúdo, mas com diferença de HTML válido e de CSS válido. O resultado foi que o Google indexou o site válido ao invés dos outros.

Acessibilidade:

Um site válido pode ser acessado com todos os tipos de browsers, sistemas operacionais e leitores de tela.

Conclusão

vale a pena validar o código, é uma boa prática, é altamente recomendado validar um site, mas não é o fim do mundo se o seu site não tem um HTML válido.

Firebug

Ferramenta muito útil para desenvolvimento web. traz recursos para editar, monitorar e fazer debug em tempo real do html, css e javascript de qualquer página.

YSlow

YSlow é uma ferramenta do Yahoo que analisa as páginas web e nos mostra o porque a página demora a carregar. a analise é baseada nas regras do Yahoo para sites de alta performance. o YSlow também conta com o smush it que otimiza as imagens do site.
É necessário a instalação do Firebug

Measureit

Cansado de dar print screen do site e colar no fireworks/photoshop para medir as coisas?
O Measureit traz uma régua para dentro do firefox, ajudando você a medir os pixels direto do browser.

Colorzilla

Pegue as cores dos sites com um conta gotas direto no browser e cole em qualquer outro programa.

Web Developer

Barra repleta de ferramentas para desenvolvedor. Desabilite o javascript, css, e imagens de qualquer site. veja informações sobre o css e sobre as imagens, sobre os elementos html e sobre a paleta de cores dos sites. indispensável para os desenvolvedores.

Fire FTP

FTP para firefox, muito bom e intuitivo. Conta com recursos a mais para conexões seguras.

html validator

Valida suas páginas quando você observa o código fonte da mesma.

Com certeza existem mais plugins bons e interessantes para o firefox, mas esses listados acima ajudam muito os desenvolvedores e valem a penas serem baixados.

Empolgado?
Veja como instalar ele no windows usando o Aptana ou Dreamweaver

Instalando no Aptana

Para usar o zen coding você precisa instalar:
Aptana studio (http://www.aptana.org/studio )
Plugin Zen Coding (http://code.google.com/p/zen-coding/downloads/list [zen coding for aptana V x. x.x]). o arquivo é um .zip

1- Com o aptana aberto crie um novo projeto web – FILE > NEW > OTHER > WEB > DEFAULT WEB PROJECT. Salve o projeto com o nome Zen Coding.

2- Clique com o botão direito em cima do projeto e coloque NEW > FOLDER – salve a pasta com o nome scripts (tem que ser “scripts”, não “script” porque no singular não funciona).

3- Extraia o arquivo .zip do zen coding para uma pasta. Copie(CTRL+C) todos os arquivos e pasta, exceto a pasta __MACOSX (que é para o MAC, óbvio).  Agora cole esses arquivos dentro da pasta scripts do aptana.

Deve estar exatamente assim:

Vá em Scripts, menu ao lado do Run e você verá o Zen coding:

Agora é só digitar algo para testar.

Abra o index.html e digite div#header, aperte ALT+E e Pronto, já está funcionando.

OBS:  Você não precisa copiar o zen coding e nem criar uma pasta script em todo o projeto que for criar, basta manter o projeto Zen Coding salvo e criar um novo projeto web.

Se após fazer isso não funcionar, vá em  FILE > RESTART.  Se ainda não funcionar reveja os passos acima.

Funciona no eclipse com aptana plugin.

Instalando no Dreamweaver

Para instalar o Zen Coding no Dreamweaver no Windows ou no Mac, você precisa:
baixar o plugin para o DW (http://code.google.com/p/zen-coding/downloads/list [Zen Coding for Dreamweaver vx.x].

Nesse exemplo estou utilizando o DW CS4 (foi o único DW que testei o zen coding)

Descompacte o .zip em uma pasta do seu computador e abra o arquivo Zen Coding v0.6.mxp. (Você vai precisar ter o extension manager instalado)

Feito isso basta aceitar os termos para instalar a extensão do Zen Coding.

Problemas conhecidos da instalação no DW

# No Windows Vista ou no Windows 7, você precisa desligar o controle de conta do usuário (painel de controle > usuários) para que o Zen Coding funcione.

# No caso do Windows Vista ou 7, o arquivo descompactado não pode ser colocado na pasta do usuário. coloque diretamente no C: ou em outra partição

Após a instalação o menu comandos no DW deverá estar assim:

Note que o atalho da foto está diferente do seu atalho pois eu mudei.

Muitos pensam que só porque existe banda larga você pode sair desenvolvendo as coisas e colocando elas na web sem pensar, carregando os sites de bytes e mais bytes. A verdade é simples; ninguém gosta de sites demorados.

Veja algumas dicas para aumentar a velocidade de suas páginas:

Dica 1: Use CSS Sprites

Se você for usar várias imagens de fundo, combine essas imagens em uma só e depois use CSS Sprites para apenas alterar o posicionamento do background. Isso diminui as requisições HTTP.

Dica 2: Javascript no fim do HTML

Coloque o Javascript (jquery, mootools, prototype e outros)  no fim do código.
“Ah mas eu aprendi que tem que colocar dentro da tag <head>” você agora está aprendendo algo novo. Coloque o JS antes de fechar a tag </body>.

Motivo: o javascript não carrega simultâneamente com o css. Então carregue primeiro o seu design e depois o JS.

Dica 3: faça o CSS e o Javascript externo

Coloque o css entre entre as tags <head>

Coloque o Javascript antes do fechamento do body

Se for usar bibliotecas JS como Jquery, Mootools e outros. Faça link de que está hospedado em outro site. Assim os usuários não precisam carregar o script, já vai estar no cache.

O google fornece essa biblioteca externa:

http://code.google.com/intl/pt-BR/apis/ajaxlibs/documentation/index.html

Dica 4: otimize as imagens para web

Use o photoshop para salvar as imagens para web assim você poderá alterar o tamanho e a qualidade da imagem. Ou se você estiver com preguiça, use o YSlow do firefox e na aba tools use a opção smush it. O smush pega as imagens do seu site e usa ferramentas para otimizá-las e te devolve um arquivo .zip com todas as imagens já otimizadas.

Dicas 5: Use o google minify

O google minify combina seus vários arquivos em um único arquivo diminuindo requisições HTTP.
http://code.google.com/p/minify/

Acesse leandrozambelli.com.br

Desenvolvimento de sites, blogs e logotipos