HTML: O que são box models e para que serve o Doctype?

As definições de tipo de documento HTML (Doctypes) foram criadas pela W3C a partir de uma necessidade técnica de padronização de código ao longo dos anos 90. Acredito que todo desenvolvedor front-end precisa entender esses conceitos para saber escolher entre as opções de Doctype existentes (Strict ou Transitional) e qual versão do HTML utilizar entre HTML 4.01, XHTML ou HTML5.

Antes de mais nada: Box Models

Box Models são as caixas criadas por um documento HTML para definir os limites do conteúdo e como o CSS vai denhenhá-los na página. Em resumo, são as tags HTML e os critérios para exibição de atributos como border, margin e padding no navegador.

internet-explorer-4

Quando os navegadores Internet Explorer 4 e o Netscape Navigator 4 foram lançados eles calculavam o desenho dos modelos de caixa (a partir de agora chamarei de box model rendering) de maneiras distintas e nenhum deles seguiam os padrões já definidos pela W3C.

Muitas páginas de internet foram desenvolvidas durante este período baseadas apenas na resposta visual do browser para o código HTML e, consequentemente, utilizando um modelo de rendering fora dos padrões para o HTML final.

Navegadores fora dos padrões

Neste período praticamente todas as páginas eram desenvolvidas fora dos padrões web e isso gerou um impasse quando a W3C viu que tava todo mundo fazendo sites de maneira errada e os que a utilização do box model rendering padrão deveria ser responsabilidade tanto dos navegadores quanto dos desenvolvedores.

Para que a internet seguisse sua evolução normalmente e dentro dos padrões, era necessário que tanto os desenvolvedores de páginas quanto as empresas responsáveis pelos navegadores se comprometessem em respeitar as normas e definições da W3C. Mas esta transição não poderia ser feita de uma hora para a outra, já que todas as páginas ainda estavam utilizando o modelo fora de padrão criado pelos navegadores. Para sair do impasse e poder implementar os padrões web de desenvolvimento sem prejudicar nenhuma das partes, foi criado um identificador que, através de uma declaração no código HTML, mostraria que tipo de leitura deveria ser feita pelo navegador: o modelo fora dos padrões (Quirks) ou o modelo da W3C (Strict). Este identificador ficou conhecido como Definição de Tipo de Documento HTML ou Doctype.

Escrevendo HTML válido

Doctypes Strict e Transitional

O Doctype Transitional avisa ao navegador que o código HTML atual precisa ser aberto em modo de compatibilidade - dependendo do browser, poderá ser carregado tanto o Quirks quanto o Strict. Ele foi criado para que esse período de transição entre os navegadores antigos e os novos não fosse sentido de forma brusca pelos desenvolvedores. Assim, os navegadores poderiam utilizar o novo box model rendering sem que fizessem todos os sites do mundo ficarem tortos por terem sido testado nos browsers antigos. O Doctype Strict avisa para o navegador que seu código está limpo, semântico e dentro dos padrões e com isso ele ativa o box model rendering Strict, que foi definido pela própria W3C. Fica muito mais fácil para o navegador entender o código e atribuir o layout das CSS em um HTML bem formado, e além disso, fica muito mais fácil desenvolver HTML/CSS cross-browser quando você já sabe que eles estão utilizando um padrão de leitura do código.

Strict ou Transitional: Qual usar?

A essa altura a resposta já deve ser óbvia. O transitional servia apenas para realizar manutenção de sites muito antigos ou que ainda não possuíam Doctype definido. Se você é um desenvolvedor profissional e está criando ou fazendo manutenção de uma página nova, você DEVE usar o Doctype Strict. Lembre-se que qualquer dúvida na criação dessas páginas pode ser tirada na própria documentação do HTML ou XHTML. Eu visito essas documentações com mais frequência do que vocês imaginam, o DTD (Document Type Definition) indica até quais tags podem ficar dentro de cada tag e isso é muito importante para conseguir um HTML válido.

A Validação

É realmente necessário validar o código e corrigir todos os seus Warnings e Errors? A resposta é não. Validar é muito bom, mas não é obrigatório. Você pode deixar o código inválido quando trabalha sozinho no desenvolvimento de um site ou consegue controlar o resultado do rendering em todos os navegadores sem maiores problemas, mesmo que possa dar uma dor de cabeça para manutenção no futuro.

A validação se torna muito importante quando o desenvolvimento acontece em um uma grande equipe. Isso porque cada profissional já está acostumado com o box model rendering de cada Doctype, considera que não há erros no HTML para poder montar o CSS e acredita que todas as caixas estão bem formadas para poder manipular com JavaScript/DOM. Neste caso não validar seria um tiro no pé no andamento do projeto.

Conclusão

Este artigo foi adaptado de um estudo que fiz para a escolha do Doctype de um projeto que terá muitos profissionais envolvidos. É maior do que a maioria dos artigos que publico aqui no blog, mas acredito que sua leitura seja obrigatória para qualquer profissional Web que coloca a mão no código HTML. Ainda existem muitos desenvovedores com dúvida em relação as definições de documento HTML, espero ter esclarecido boa parte delas.

Tem sede de design e código? Siga-me no Twitter @richardbarros

4 comentá em “HTML: O que são box models e para que serve o Doctype?

  1. Psysapiens 01/02/2010 14:52

    Essa historinha entre a relação do Netscape e IE com o Doctype eu não sabia…=|
    Valeu Jesus!

    Responder

  2. Antonio 09/04/2010 22:10

    Muito bom artigo, e conheci o que desconhecia.

    Responder

  3. Dania64 08/02/2016 07:51

    You often got the cash up front, and I got guidance from a girl who said to take the money out of the space.

    Responder

  4. Tarot SI o NO 22/12/2018 05:00

    Esto es realmente bueno, eres un blogger muy profesional. Me he unido a tu RSS y deseo encontrar más cosas en este gran blog. Además, !he compartido tu sitio en mis redes sociales! Saludos

    Responder

Faça um comentário

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>