Escrevendo HTML corretamente - Parte I

Escrito por Felipe em 10 de fevereiro de 2008 – 5:05 pm -

Tomei coragem e estou começando a escrever uma série de artigos sobre, como título sugere, como escrever HTML da melhor maneira possível, seguindo os padrões e as recomendações do W3C.

Tentarei ao menos ensinar algumas boas técnicas de marcação (afinal, o HTML não é linguagem de programação, e sim de marcação). Então vamos começar?

Introdução

Já vou começar com um conselho: tabule, espace o seu código. A leitura dele será muito mais agradável. ;)

Se você já aprendeu HTML, você deve ter aprendido que uma página HTML possui a seguinte estrutura de código:

<html>
  <head>
    <title>TÍTULO DA PÁGINA</title>
  </head>
  <body>
    CONTEÚDO DA PÁGINA
  </body>
</html>

Perfeito. Sua página está pronta e você pode ser chamado de webdesigner.

Não, ainda não.

Vou explicar o porquê: existe um “código” que, de acordo com o W3C, todo site deve conter. É a declaração do DOCTYPE, do tipo de documento.

Por que é preciso declarar o DOCTYPE?

Os browsers mais recentes conseguem exibir melhor a página se encontrar essa declaração.

Para documentos HTML, as declarações (mais atuais) são:

Para HTML 4.01 Strict (que segue à risca as regras da W3C):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">

Para HTML 4.01 Transitional (que pode usar elementos obsoletos):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">

Para HTML 4.01 Frameset (que usa frames):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
  "http://www.w3.org/TR/html4/frameset.dtd">

Bom, para o nosso caso, vamos brincar de escrever HTML 4.01 Strict.

O nosso código fica assim então:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>TÍTULO DA PÁGINA</title>
  </head>
  <body>
    CONTEÚDO DA PÁGINA
  </body>
</html>

HTML 4.01 Strict

Quais são as regras do HTML Strict então?

O HTML exige que o webmaster separe o conteúdo da formatação utilizando folhas de estilos em cascata (CSS) e é recomendada pelo W3C para novos arquivos. Ou seja, nada das assustadoras tags <font> no meio do código.

Todo o texto, excluindo títulos (por exemplo), deve estar dentro de uma tag <p> (paragraph).

É recomendável utilizar as tags <h1>, <h2>, <h3>, <h4>, <h5> e <h6>, para formatar títulos e subtítulos.

Bom, vamos fazer um exemplo prático?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<html>
  <head>
    <title>Exemplo das tags de parágrafo</title>
  </head>
  <body>
    <h1>Teste da tag h1</h1>
      <p>Texto do título de nível 1</p>
    <h2>Teste da tag h2</h2>
      <p>Texto do título de nível 2</p>
    <h3>Teste da tag h3</h3>
      <p>Texto do título de nível 3</p>
  </body>
</html>

Qual a vantagem de escrever corretamente?

Simples: seu código fica bastante adaptável, portável e acessível, mas isso é assunto pra outro post.

Essa página que você está lendo é válida de acordo com o XHTML 1.0 Strict.

Semana que vem posto a continuação:

  • Elementos e boas práticas de marcação.
  • Formatação com CSS.
  • Acessibilidade e portabilidade.
Postado em Tutorial |

Comente!