Tutorial Avançado de HTML: Declarações

7 07 2008

image

Essa página trata de como definir um documento XHTML válido.

Declaração do tipo do documento

Lá no topo de suas páginas você precisa de uma declaração do tipo do documento. Isso mesmo, você precisa.

Sem especificar um doctype (tipo do documento), seu HTML simplesmente não é HTML válido e a maioria dos navegadores vão usar o ‘modo sujo’ pra visualizá-lo, o que quer dizer que eles vão achar que você não sabe que diabos você está fazendo e vão fazer o que eles acharem melhor com o seu código. Você pode ser o maior ninja de HTML que já andou sobre a Terra. Seu HTML pode não ter falha nenhuma e seu CSS pode ser simplesmente perfeito, mas sem uma declaração do documento, ou uma declaração errada, vai parecer que suas páginas foram coladas por um filhote de gibão míope de um olho só com dificuldades de aprendizado.

Essa é a declaração para um documento XHTML 1.0 Strict (XHTML 1.0 Estrito):

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

A declaração seguinte é de um documento XHTML 1.1. Ela pode parecer preferível, por ser a última versão do XHTML, mas existem alguns problemas que serão explicados num minuto…


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"
>

Se você simplesmente não consegue deixar o HTML 4 ir embora ou se você tem algum fetiche pelo Netscape 4, você pode usar o XHTML 1.0 Transitional (XHTML 1.0 de Transição):

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

Você só deve usar esse tipo de documento se você tem uma necessidade incomum de acomodar navegadores mais velhos, raramente usados, ou se você está convertendo pros padrões páginas antigas, feitas usando HTML 4 ou anterior. XHTML 1.0 de transição permite velhos elementos de apresentação do HTML 4, que podem resultar numa apresentação melhor em navegadores como Netscape 4. No entanto, usar esses elementos vai prejudicar a eficiência e possivelmente a acessibilidade de suas páginas web.

Finalmente, se você é um daqueles caras meio loucos que usam frames, a declaração de um documento XHTML 1.0 Frameset é assim:

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

Note que a tag DOCTYPE é meio rebelde e exige ser escrita em letras maiúsculas e enfeitada com um ponto de exclamação. Ela também quebra as regras por ser a única tag que não precisa ser fechada.

Declarando Linguagens

Você deve identificar a linguagem principal de um documento através de um cabeçalho HTTP ou com o atributo xml:lang dentro da tag html de abertura. Embora isso não seja necessário para produzir um documento XHTML válido, é uma preocupação com a acessibilidade. O valor é uma abreviação, como ‘en’ (English – Inglês), ‘fr’ (Francês), ‘de’ (Alemão) ou ‘pt-BR’ (Português do Brasil).

A declaração de um documento com conteúdo principalmente em português é assim:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-BR">

Depois de declarar uma linguagem principal, se você usar outra linguagem no seu conteúdo, você deve usar o atributo xml:lang in-line (como em <span xml:lang="de">HTML Hund</span>).

Tipos de Conteúdo

O típo de mídia e o conjunto de caracteres de um documento HTML também precisam ser especificados, e isso é feito com um cabeçalho HTTP como:


Content-Type: text/html; charset=UTF-8

A primeira parte (nesse exemplo, o pedaço text/html) é o Tipo MIME (MIME Type) do arquivo, e isso faz com que o navegador saiba qual o tipo de mídia de um arquivo e então o que fazer com ele. Todos os arquivos têm algum MIME Type. Uma imagem JPEG é image/jpeg, um arquivo CSS é text/css e o tipo geralmente usado pra HTML é text/html.

A segunda parte do cabeçalho HTTP (no exemplo, o pedaço UTF-8) é o conjunto de caracteres.

Talvez o jeito mais fácil de modificar um cabeçalho HTML (ou imitar um) é usar uma tag meta ‘HTTP-equivalent’ no HTML, que vai ser algo assim:


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

Levemente mais complicado, mas preferível (por ser um cabeçalho HTTP propriamente dito e ainda reduzir o HTML), é enviar o cabeçalho usando uma linguagem de programação no lado do servidor (server side). Com PHP, você poderia usar algo assim:

<?php header("Content-Type: text/html; charset= UTF-8"); ?>

Se você não quer ou não pode usar uma linguagem, você possivelmente pode ir direto pro servidor com um arquivo ‘.htaccess’. A maioria dos servidores (compatíveis com Apache) pode ter um pequeno arquivo de texto com o nome ‘.htaccess’ no diretório raíz, e com a seguinte linha nele você pode associar todo arquivo com extensão ‘.html’ com um MIME type e um conjunto de caracteres:


AddType text/html;charset=UTF-8 html

No entanto, nem todas as hospedagens permitem que você altere as configurações do servidor com um arquivo como esse.

Conjuntos de caracteres incluem ‘ISO-8859-1’ para muitas linguagem ocidentais, baseadas no Latim, que não usem caracteres especiais como ‘ç’ ou ‘ã’; ‘SHIFT_JIS’ para Japonês; ‘UTF-8’, uma versão do Formato de Transformação Unicode (Unicode Transformation Format), que fornece um grande número de caracteres usados na maioria das linguagens, entre outros. Basicamente, você deve usar um conjunto de caracteres que você sabe que vai ser reconhecido por sua audiência. A menos que você esteja usando uma linguagem baseada no Latim que não use acentos, como o Inglês, onde ISO-8859-1 pode ser usado e é praticamente universalmente compreendido, você deve usar UTF-8 porque ele pode mostrar a maioria dos caracteres da maioria das linguagem e é o código mais seguro de se usar porque vai funcionar no computador da grande maioria das pessoas.

Você pode ler mais sobre conjuntos de caracteres em outros lugares pela web.

XHTML deve ser enviado com o MIME type application/xhtml+xml. Isso é o que ele é – uma aplicação XML. Infelizmente, a maioria dos navegadores não tem idéia do que é isso. Então é geralmente aceito que não faz mal usar o MIME type text/html. De acordo com o W3C, e depois reforçado pelo Web Standards Project (Projeto Padrões Web), alguns sabores de XHTML 1.0 podem ser enviados com o tipo text/html, mas XHTML 1.1 não deve, e é por isso que os exemplos no site usam XHTML 1.0 Strict, assumindo um MIME Type text/html. Mas você pode (e talvez até deva) enviar o tipo correto para os navegadores que o aceitam com um pouco de “trapaça” no servidor.

Esse site usa PHP para enviar XHTML 1.1 com um MIME Type application/xhtml+xml para os navegadores que entendem e renderizam esse tipo (como o Mozilla) e XHTML 1.0 Strict com o tipo text/html para outros navegadores (como o IE). O script, colocado no topo de cada página parece com isso:


<?php
if(stristr($_SERVER["HTTP_ACCEPT"],"application/xhtml+xml")){
header("Content-Type: application/xhtml+xml; charset=UTF-8");
echo('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">');
} else {
header("Content-Type: text/html; charset=UTF-8");
echo ('<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">');
}
?>

Se você não conhece PHP, não se preocupe com o código acima. Ele checa se o o navegador aceita o MIME Type application/xhtml+xml e, se sim, esse tipo é enviado e o tipo de documento XHTML 1.1 é escrito no HTML. Se o MIME Type não é reconhecido então o tipo text/html é enviado e o tipo de documento XHTML 1.0 Strict é escrito no HTML.

Além da paz de espírito que você vai sentir por saber que está fazendo a coisa certa e se preparando para o futuro, o benefício imediato de usar esse método é que Mozilla vai tratar seus arquivos como aplicações XML e simplesmente não vai funcionar se seu XHTML não estiver de acordo com o padrão, por exemplo, se não estiver bem formado. Você vai poder testar sua aplicação sem ter que passar o documento por um validador.

Páginas Relacionadas

Referência

Anúncios

Ações

Information

3 responses

8 07 2008
Tutorial Avançado de HTML: Formulários Acessíveis « Codando

[…] Próxima Página: Declarações […]

20 07 2008
Tutorial Avançado de CSS « Codando

[…] Anterior: Declarações (Tutorial Avançado de […]

20 07 2008
Tutorial Avançado de CSS: Regras @ « Codando

[…] Declarações – Para comparações entre a regra @charset e a declaração do conjunto de caracteres no HTML […]

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s




%d blogueiros gostam disto: