HTML - Esqueleto de um documento HTML - Parte 1: DOCTYPE

Ontem vimos uma introdução ao HTML. Sim, eu sei, foi chata. Mas não tinha muito jeito, era necessário apresentar alguns conceitos àqueles que estão realmente começando a estudar HTML.

Hoje, pra começar a ficar um pouco mais interessante, vamos colocar a mão na massa. Vamos ver como é a base de um documento HTML e entender como funciona e pra que serve cada uma de suas partes.

Pra começar, um documento de exemplo:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
“http://www.w3.org/TR/html4/strict.dtd”>
<html lang=”pt-br”>
<head>
<meta http-equiv=”content-type” content=”text/html; charset=utf-8″>
<title>Título da minha página</title>
<link rel=”stylesheet” href=”/c/style.css” type=”text/css” media=”screen, projection”>
</head>
<body>
<div id=”conteudo”>
</div>
</body>
</html>

Isso que vocês vêem aí em cima é nada mais nada menos que um documento HTML.

Vamos entender o que está descrito ali em cima e pra que serve cada um desses códigos malucos.

Bem, eu sei que disse que isso ia começar a ficar interessante. Não era totalmente verdade. Neste post vamos falar sobre a primeira linha do nosso documento de exemplo. A declaração de DOCTYPE. Pode ser um pouquinho chato, mas, acreditem, é muito importante. Vamos a ele.

DOCTYPE

A primeira linha de todo documento HTML deve ter uma declaração de DOCTYPE. Nunca se esqueçam, sempre na primeira linha, explico porque depois.

O DOCTYPE é uma referência a um DTD, que significa Document Type Definition (em português, Definição de Tipo de Documento). Um DTD é um documento onde estão definidas as regras para a criação de um documento HTML (existem DTDs pra outros tipos de documento, mas vamos manter o foco). Nele estão descritos os elementos que podem ser usados, quais elementos podem estar dentro de outros elementos, que tags descrevem esses elementos, se um elemento tem conteúdo ou não, se é necessário ter tag de abertura e/ou de fechamento. Enfim, tudo que pode ou não ser usado dentro do nosso documento.

Mais a frente vamos ver como ler e entender um DTD, por enquanto vamos nos ater ao DOCTYPE do nosso documento apenas.

Uma declaração de DOCTYPE é dividida em duas partes, um identificador público (public identifier) e uma URI.

O identificador público diz que tipo de documento está sendo usado:

-//W3C//DTD HTML 4.01//EN

Este é o identificador público do HTML 4.01 Sctrict, que é o que vamos usar daqui pra frente, em todos os nossos exemplos.

A URI aponta para o endereço do DTD na web:

http://www.w3.org/TR/html4/strict.dtd

Note que no exemplo acima, nosso DOCTYPE está dividido em duas linhas. Se você preferir, pode usar uma linha apenas, mas tome o cuidado de incluir um espaço entre o identificador público e a URI.

É extremamente importante identificar o DOCTYPE em todos os seus documentos HTML. Caso contrário, seu browser pode interpretar seu documento de maneira estranha, causando problemas que seriam facilmente evitados caso o DOCTYPE estivesse presente.

Um browser, ao encontrar a declaração de DOCTYPE não vai ler o documento referenciado em sua URI e interpretar o HTML de acordo com ele. Porém, ele vai se basear no identificador público e na presença ou não de uma URI para decidir como interpretar o documento. Na verdade, isso vai influir na maneira como estilos CSS são aplicados ao documento HTML.

Em geral, os browsers têm duas formas de interpretar um documento: Strict Mode, ou Standards Compliance Mode, onde as especificações são seguidas à risca e Quirks mode (Modo de compatibilidade), onde o browser vai deixar passar alguns erros, interpretando o documento mais ou menos como versões mais antigas de browser o fariam. Vamos estudar com calma estes modos de interpretação (além de um outro, usado pelo Mozilla) mais a frente.

Strict, Transitional ou Frameset

Existem três tipos de DOCTYPEs que podemos usar em nossos documentos HTML. Strict, Transitional e Frameset. Qual a diferença entre eles e qual devemos usar?

O DOCTYPE Transitional é, como o nome diz, uma transição entre versões mais antigas do HTML e a versão mais nova, 4.01. Nele temos alguns elementos e atributos que definem apenas apresentação e não semântica (Leia meu texto sobre desenvolvimento em camadas) e devem, a rigor, ser eliminados de nossos documentos. Além disso, um DOCTYPE HTML 4.01 Transitional faz com que a maioria dos browsers trabalhe em modo de compatibilidade, o que não é nada desejável. Portanto, o DOCTYPE Transitional deve ser evitado a todo custo. Não use nunca.

Já o DOCTYPE Strict é uma evolução do Transitional, que elimina todos esses elementos e atributos meramente de apresentação e deixa apenas os elementos que realmente carregam consigo algum significado específico. Este é o DOCTYPE que devemos usar, sempre.

O Frameset serve apenas para o caso de você precisar usar frames nos seus documentos. Mas você não quer fazer isso, né? Se quiser, depois vou te dar alguns bons motivos pra tirar essa idéia da cabeça.


Leia também:

Postado por Bruno Torres em 27 Out 2006 Categorias: Web
« HTML - Introdução
HTML - Esqueleto de um documento HTML - Parte 2: HTML e HEAD »

4 Comentários sobre “HTML - Esqueleto de um documento HTML - Parte 1: DOCTYPE”

  1. Newton Wagner disse:
    Outubro 27th, 2006 at 5:04 pm

    Muito legal a explicação.. só achei um pouco estranho chamar o Quirks Mode de “Modo de Compatibilidade”…

    Acho que é compatibilidade com navegadores antigos, mas mesmo assim, compatibilidade é o que buscamos com a utilização dos padrões.. sei lá.. acho que só definir um outro nome!! heheheh.

  2. Ronaldo disse:
    Janeiro 18th, 2007 at 6:07 pm

    Explicação muito boa…jóia mesmo

  3. noemia disse:
    Janeiro 30th, 2007 at 9:27 pm

    como documentar um site
    como fazer um grafico modelo arvore para entender um site desenvolvido

  4. ARTHUR GOMES disse:
    Maio 19th, 2007 at 6:04 pm

    Dá pra criar um grafico apenas usando HTML?

Leave a Reply