Doctype – DTD – Document Type Definition

Introdução

Um documento de (X)HTML seguindo os padrões à risca nunca é completo sem utilizar uma declaração de tipo de documento corretamente. O Doctype de um documento deve ser o primeiro passo a se considerar antes mesmo de aprender qualquer tipo de sintaxe das linguagens de marcação como XML e XHTML. Porque é a escolha do doctype que vai influenciar no tipo de marcação que você deverá ou não utilizar. Se você quer aprender HTML 4 de forma a seguir corretamente todos os padrões você tem que trilhar um determinado caminho, e se quiser aprender XHTML também seguindo à risca os padrões, você deve seguir outro caminho com algumas diferenças.

Basicamente, tanto para o HTML quanto para o XHTML, você pode trabalhar com 2 tipos de doctypes, o transitional e o strict. Eu vou desconsiderar o frameset intencionalmente. A razão disso é que se alguém nos dias de hoje ainda trabalha com frames, usar um doctype mais ou menos apropriado não vai fazer diferença nenhuma no resultado final do trabalho na minha opinião. Se os frames não estão presentes nas recomendações para um documento strict, o que teoricamente deve apenas ter a sintaxe estrita (strict) de determinada linguagem, não vou considera-lo aqui.

Definição

“Doctype” é o acrônimo de “Document Type”, também conhecido como DTD (Document Type Definition). É o doctype que diz para os user agents qual o tipo de documento que ele tem que interpretar (parsing) e como ele deve renderizar esse documento. A definição de um tipo de documento (doctype) informa quais as regras que os user agents devem utilizar do que é e o que não é permitido em uma determinada versão de um XML e de um (X)HTML. É uma forma de dizer a eles quais são as regras que aquele documento pretende seguir e quais as regras que o browser deve utilizar ao analisar (parsing) o documento.

Diferenças CONCEITUAIS entre doctypes transitional e strict

O nome dos doctypes revelam o que são e para o que servem. O transitional é utilizado para quem está fazendo uma “transição” entre uma forma antiga de marcação para uma mais moderna e mais apropriada. Então se seu site não está livre dos velhos hábitos do passado, se a migração para strict seria muito trabalhosa, se seus documentos não seguem as regras á risca, você pode usar um doctype transitional. Você pode utilizar o doctype transitional enquanto você ainda utiliza muitas tags e marcações de forma inapropriada. Mas seu alvo final com o tempo deve ser escrever um documento que siga 100% os padrões de forma precisa com um doctype strict. Este é o alvo a ser seguido tanto para HTML 4 quanto para o XHTML 1, utilizar um doctype strict.

Para entender isso melhor vamos ver o que está escrito no Document Type Definition do HTML 4:

This is HTML 4.01 Strict DTD, which excludes the presentation attributes and elements that W3C expects to phase out as support for style sheets matures. Authors should use the Strict DTD when possible, but may use the Transitional DTD when support for presentation attribute and elements is required.

Traduzido fica: “Este é o DTD do HTML 4.01 Strict, que exclui atributos apresentacionais e elementos que a W3C presume remover em estágios a medida que o suporte a folhas de estilos amadurece. Os autores devem usar um DTD Strict quando possível, mas utilize o DTD transitional quando precisar manter atributos e elementos apresentacionais.”

A principal razão de ainda existir outros doctypes que não sejam o strict, é porque velhos hábitos ainda persistem no desenvolvimento para web ao colocar sintaxe de apresentação no documento (X)HTML. A recomendação da W3C é que tudo que seja relativo a apresentação seja feito através de uma (ou mais de uma) folha de estilos externa. Se pensarmos em uma linguagem de marcação como o XHTML de forma estrita a seguir os padrões, um doctype transitional não deve nem ser considerado como uma “recomendação” e sim apenas como uma “aceitação” temporária por razões de retro-compatibilidade até o completo amadurecimento do desenvolvedor e da própria web.

Diferenças PRÁTICAS entre doctypes transitional e strict

Na prática, em um documento de HTML 4 com doctype transitional por exemplo, você pode usar uma dezena de tags e atributos como target, bgcolor, align, iframe, center etc mesmo que não sejam mais uma recomendação. Veja uma lista completa do que pode ou o que não pode organizado por doctype. A tag <center> por exemplo serve apenas para centralizar algum elemento. Ela não é uma recomendação da W3C por que trata-se de uma tag apenas para alterar a forma como um elemento deve ser exibido no browser, o que pode ser feito apenas por CSS, e não possui nenhum significado semântico. A tag <strong>, ao contrário do que muitas pessoas pensam, não serve para colocar texto em negrito, o que a caracterizaria como apenas uma tag de apresentação. A tag para negrito era <b> e caiu em desuso. A tag <strong> tem o significado semântico de “grande ênfase” e <em> tem o significado de “ênfase” apenas.

Documentos que utilizam doctypes strict na prática excluem qualquer tipo de tags e atributos com propósitos de apresentação, e doctypes transitional são mais permissivos e tolerantes a utilização de elementos e atributos que não são mais aceitos e recomendados na versão strict da linguagem.

A validação e os doctypes

Se seu documento possuiu algum tipo de sintaxe contrária as regras permitidas para o tipo de doctype que você está utilizando, isso é o que chamamos de “erro de sintaxe”. Óbvio não? Você não esperava outro nome não é mesmo? Ou seja, se você escolheu um doctype strict para seu XHTML, certas coisas que você estava acostumado a aplicar no seu HTML, seja ele strict ou transitional, não poderão ser mais feitas. O critério do validador de HTML da W3C para avaliar um documento é o doctype utilizado. A sintaxe é verificada de acordo com as normas permitidas para cada DTD escolhido. Se você escreveu determinado documento com uma sintaxe correta para XHTML mas utiliza um doctype de HTML 4 Strict, o validador vai acusar erros de sintaxe, mesmo que seu documento esteja 100% exato conforme a versão superior do HTML.

Se seus documentos possuem erros de sintaxe, os browsers vão ignorá-los e tentar renderizar seus documentos da forma em que cada um deles achar mais apropriado. Essa é a única importancia em manter um código válido e sem erros de sintaxe para não deixar nas mãos do browsers a escolha de como ele deve renderizar seu documento. E lembre-se que semântica nada tem haver com validação.

Na década de 90, devidos as implementações que cada nova versão dos browsers recebiam, e por causa da retro-compatibilidade, principalmente do Internet Explorer com as versões anteriores, os browsers foram treinados a renderizar os documentos que encontravam sem doctype a sua própria maneira. Se você não declarar nenhum tipo de doctype no seu documento, cada browser vai renderizá-lo de um forma diferente. Isso permitiu a expansão do HTML como uma tag soup. Isso ainda acontece com o HTML e o XHTML enviados com o mime-type de text/html. Para mais informações sobre mime-types, leia meu texto sobre “XHTML Media Types“. As diferentes formas de renderização são chamadas de “browsers modes”. Leia meu texto “O que é Quirks Mode?” para mais informações.

No caso do XML e do XHTML (enviado com o mime-type de application/xhtml+xml) essas variações de browsers modes não existem. Os browsers que suportam este tipo de mime-type possuem apenas a forma strict de renderização. Apenas duas coisas podem acontecer em documentos enviados como application/xhtml+xml. Ou o documento é exibido corretamente, se estiver tudo certo, ou nada dele é exibido. Se o browser não encontrar nenhum doctype, ele simplesmente não exibe nada. Apenas mostra uma mensagem de parser error na tela. Ele não tenta interpretar o documento a sua própria maneira como acontece com documentos com mime-type de text/html. Em linguagens baseadas no XML você realmente tem que saber o que você está fazendo caso contrário pode ser um completo desastre.

Para finalisar, veja abaixo os doctypes listados que podem ser encontrados nas referências normativas do HTML 4 e do XHTML 1.

Doctypes do HTML 4 :

A referência normativa (http://www.w3.org/TR/html4/sgml/dtd.html) do HTML 4 diz que você pode utilizar 3 tipos de doctype:


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

Doctypes do XHTML 1:

A referência normativa do XHTML diz que você pode utilizar 3 tipos de doctype:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Referências:

  • http://project47.viscountbox.com Carlos Eduardo

    Acho muito importante que essas diferenças sejam expostas. Assim, aqueles que estão começando não irão somente "copiar e colar" as linhas de DTD, mas irão saber o que significa e o que se encaixa melhor em seu trabalho.

  • Diego

    Olá Henrique, belo post sobre doctype eclareceu muita coisa, falou tudo! Sempre leio seus posts, tem me ajudado bastante, valeu. Abraço.

  • http://www.pinceladasdaweb.com.br Pedro Rogério

    Legal, pena que tem gente que não coloca os Doctypes em seus documentos, seja por preguiça ou sei lá o que!!!!

  • Eduardo Sganzerla

    Legal, muito interessante… Estou começando em Webstandarts e não entendo muita coisa ainda, se possivel postar mais artigos para iniciantes agradeço =D

    Mas agora fiquei com uma dúvida, com o strict não se deve usar o "target" em tags "a"… Como faço então? Crio um javascript para popup?

    Valeu

  • Giovanni

    muito massa esse post ! perfeito !

    fico feliz de poder aprender de graça!heheehe

    continua sempre assim !

    qdo puder do uma colaboração ai !

    nao eh balela (mintirada nao)

    se merece kara !

    abraxxxxxxxx e bom find ai !

  • Alberto

    Parabéns Henrique!

    São profissionais como você que estimulam a gente poder trabalhar e ensinar a outros, melhor. Obrigado pelos seus ensinamentos.

  • Pingback: Rogério Lino()

  • Pingback: O Google tem sido um mal exemplo. Vamos nos unir para convertê-lo? » Revolução Etc - Web Standards em uma casca de noz!()

  • Pingback: Esqueça o atributo style. Estilos inline em doctype strict são resquícios do câncer de um passado sem padrões. » Revolução Etc - Web Standards em uma casca de noz!()

  • Pingback: CMilfont » Criando um sistema em Ajax usando YUI - parte 1()

  • Pingback: (Untitled.php) » Blog Archive » Ando meio desligado…()

  • http://mundofractal.wordpress.com/ D X

    Muito valioso, este Post! Parabéns!

    Eu acho que esta história do doctype está a ser levada ao exagero. Quando se quer implementar um padrão, deve-se ser equilibrado e a w3c está a ir a um extremo desnecessário.

    Qual é o grande mal de usar ? Em 1% das aplicações isso é mau, nos restantes 99% dos casos é simples, barato e nada de mal vem ao mundo daí. O mesmo com muitas das tags de apresentação (?).

    Hoje em dia muitas aplicações que antes seriam cliente são feitas na Web. Mas a Web chegou até aqui também por ser fácil e acessível para todos. Agora estão a querer estruturar as coisas duma forma muito rígida. O navegador parar por causa dum erro? Querem fazer do HTML um C++? É ridículo, pelo menos em 99% dos casos.

    Por este andar, os padrões nunca serão atingidos. Vão continuar a haver desenvolvedores e navegadores para todos os gostos e desgostos, dos mais desleixados e empedrenidos aos mais empenhados e fundamentalistas… e muitos como eu algures no meio a tentar sobreviver da melhor maneira à bagunça.

  • Pingback: Quirks mode e Standards mode: Entendendo os modos de renderização at Emanuel Felipe .NET()

  • Pingback: Boas praticas para Desenvolvimento Web #1 » Clauber Stipkovic Halic - CSH()

  • Pingback: Estrutura básica de uma página HTML | SealDesign()

  • Pingback: neyRicardo • blog » Blog Archive » É Transitional mas é meu…()

  • Pingback: qualidade do código de um site / web standards / carlosnogueira.net()

  • Pingback: DTD - Document Type Definition - thaysa.com()

  • Hugo Luiz

    Muito bom saber das diferenças dos DTD, acredito que muitos não sabem sobre isso.

    parabéns pelo conteúdo, muito bem explicado.

  • http://luizazevedo.com.br Luiz Azevedo

    Ótimo artigo. Bem simples e objetivo.

  • Bernardo – HIT

    Cara, incrível o seu post.

    Difícil achar um conteúdo bom como esse em português. Foi muito útil para mim.

    Parabéns.

  • Tani

    O conteúdo do blog é muito bom e me auxiliou em um trabalho dobre DTD,porém seria interessante que
    fosse detalhado sobre o DTD Frame,que parece está em desuso mais eu preciso entender um pouco mais sobre ele,já que a W3C é bem resumida.