Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Checklist para HTML

Índice do conteúdo

Instruções para desenvolvimento

Para o desenvolvimento de um bom código HTML devemos estar atentos, principalmente, à semântica do código, ou seja, utilização correta das tags em seus devidos lugares. Também nunca podemos nos esquecer do “KISS”, ou seja, “Keep it simple stupid”, mantendo-o mais simples possível, tentando eliminar o uso de tags como <hr>, por exemplo, com a finalidade de aproveitar a propriedade CSS “clear” em certos casos.

É sempre bom frisar que o bom código HTML é aquele que não precisa ser ajustado no momento do desenvolvimento da parte CSS, ou seja, você escreve o código de acordo com o conteúdo, prevendo como o CSS será executado. Desta forma, há grande economia de tempo, mais precisão e coerência em seu código.

Checklist

Segue abaixo uma lista de itens importantes que não devem ser esquecidos ao produzir o HTML:

  • Utilizar DOCTYPE adequado às necessidades do projeto. Na maioria dos casos o XHTML 1.1 está de acordo, pois requer uma escrita perfeitamente correta do código mas, em certos casos, como em portais que necessitam de ferramentas para administração do conteúdo, é necessário o uso do XHTML 1.0 Transitional, pois não há um controle total sobre o código que será gerado no site;
  • Inserir as meta tags “keywords” e “description” de acordo com o que for definido pelo setor de SEO, obviamente, visando melhor desempenho nos sistemas de busca;
  • Usar a codificação “iso-8859-1″ para facilitar o intercâmbio dos arquivos entre a equipe. Já que escrevemos nosso código, facilita o fato de escrevermos acentos e outros caracteres especiais de maneira correta, sem a necessidade de convertê-los para utf-8;
  • Ao “anexar” os arquivos CSS, lembrar de especificar para que tipo de mídia este se destina, por exemplo “screen” para monitores convencionais ou “print” para impressão;
  • Inserir um id para cada seção do site na tag , facilitando a distinção entre elas. Por exemplo, se o site possui a página inicial, produtos e contato, utilizar um id para cada uma dessas páginas. Nas páginas internas, podemos usar a classe “interna”, facilitando a aplicação de certos elementos comuns à elas;
  • Nunca esquecer de utilizar o atributo “title” nos links e “alt” nas imagens, pensando na usabilidade do site. No caso dos links, o title serve como instrução, uma informação sobre o que o usuário encontrará ao visitar o link. No caso do atributo alt, deve ser descrito o que há na imagem, servindo como legenda.
  • Para produção de formulários, utilizamos o tipo de lista numerada para exibição dos campos, por exemplo:
<form action="#" method="post>
<fieldset>
<ol>
<li><label for="nome">Nome:</label> <input type="text" name="nome" id="nome" /></li>
</ol>
</fieldset>
</form>

Desta forma o formulário realmente funciona como uma lista ordenada, onde cada campo tem sua ordem de apresentação e preenchimento. Nunca devemos esquecer da ligação do label com o input, através do atributo “for” no label e “id” no input.

  • Em formulários, utilizar a tag <button> ao invés de <input type=”submit”>, pois permite melhor estilização e flexibilidade;
  • Utilizar comentários no código afim de facilitar sua manutenção posteriormente;
  • NUNCA utilizar estilos inline, ou seja, inserir o atributo “style” em tags no HTML;
  • Utilizar o atributo “lang” para links que direcionam a sites estrangeiros, por exemplo:
<a href="http://www.yahoo.com/" title="Visitar o site Yahoo" lang="en">Yahoo</a>

A semântica do código é muito mais relevante, mas não devemos nos esquecer de verificar se este está válido, caso haja alguma tag sem fechar corretamente, etc.

Usar nomes de classes e id’s amigáveis, ao invés de nomear elementos pelo seu aspecto visual. Por exemplo:

<h3 class="textovermelho">Este é o subtítulo</h3>

A maneira correta seria:

<h3 class="subtitulo">Este é o subtítulo</h3>

Ordem dos atributos

Os atributos que não estão nas listas devem ser colocados ao final.

html
  1. xmlns
  2. atributos de idioma
  3. dir
meta
  1. http-equiv
  2. name
  3. content
elemento link (<link …)
  1. href
  2. rel
  3. rev
  4. type
  5. media
style
  1. type
  2. media
script
  1. type
  2. src
elementos block, inline e títulos (h1,h2,h3,…)
  1. id
  2. class
  3. atributos de idioma
  4. title
hyperlink (<a …)
  1. id
  2. class
  3. href
  4. atributos de evento
  5. rel
  6. target
  7. atributos de idioma
  8. title
  9. accesskey
elementos de formulários
  1. class
  2. type
  3. name
  4. id
  5. value
  6. title
  7. accesskey
form
  1. id
  2. class
  3. action
  4. method
  5. enctype
textarea
  1. atributos dos elementos de formulários
  2. rows
  3. cols
imagens
  1. src
  2. alt
  3. longdesc
tabelas
  1. id
  2. class
  3. border
  4. cellpadding
  5. cellspacing
  6. summary
th e td
  1. id
  2. class
  3. colspan
atributos de evento (javascript)
  1. onblur
  2. onclick
  3. ondblclick
  4. onfocus
  5. onmousedown
  6. onmousemove
  7. onmouseout
  8. onmouseover
  9. onmouseup
  10. onkeydown
  11. onkeypress
  12. onkeyup
atributos de idioma
  1. xml:lang
  2. lang
  3. hreflang

Documento base para HTML

Estamos disponibilizando, também, o documento base para HTML que servirá como padrão para desenvolvimento dos sites. Já estará pronta a especificação do DOCTYPE XHTML 1.1 (caso necessário alterar para o 1.0 Transitional), a codificação iso-8859-1, meta tags para keywords e description e inserção dos CSS padrão e alternativo para Internet Explorer 7.

Documento base para HTML5

Para aqueles que desejarem iniciar projetos em HTML5, criamos o documento base para HTML5, com o intuito de simplificar seu trabalho, inserindo o cabeçalho com DOCTYPE e META tags simplificadas, além de uma tag &lt;section&gt; para conter todo o conteúdo do site.