Voltar para o site

Tutorial XHTML

Publicado em: 03/04/2004
Atualizado em: 23/03/2011

Objetivo

Este tutorial tem por objetivo descrever o que é, para que serve e porque adotar a linguagem de marcação XHTML, apresentando seus aspectos estruturais e semânticos, bem como ressaltando as vantagens do seu uso.

De onde veio XHTML ?

Todas as linguagens de marcação da web são baseadas em SGML, uma metalinguagem complexa, projetada para máquinas com a finalidade de servir de base para criação de outras linguagens. O SGML foi usado para criar a XML (Extensible Markup Language), também uma metalinguagem, porém bem mais simples.

Com XML você cria seus próprios elementos de marcação e atributos para escrever seu documento web. Isto significa que é você quem cria sua linguagem de marcação. XHTML foi criado dentro deste conceito e por isso é uma aplicação XML. As tags e atributos da XHTML foram criadas ("inventadas") aproveitando-se as nossas conhecidas tags e atributos da HTML 4.01 e suas regras.

Conclui-se que ao usar XHTML, estamos escrevendo um código XML, onde as tags e atributos já estão definidas e isto proporciona todos os benefícios de XML sem as complicações e complexidade da SGML.

XHTML é uma linguagem de marcação bastante familiar para quem conhece HTML e a transformação de um documento existente de HTML para XHTML é uma tarefa bem simples, como veremos adiante.

Qual a finalidade do XHTML ?

XHTML é a sigla em inglês para EXtensible HyperText Markup Language que em tradução livre resulta em Linguagem Extensível para Marcação de Hipertexto, uma aplicação XML, escrita para substituir o HTML e nada mais é do que uma HTML "pura, clara e limpa".

Vantagens de se usar XHTML

Enumeram-se várias e efetivas vantagens de se usar XHTML nos novos documentos web produzidos ou se migrar os documentos atuais escritos em HTML. E, dentre elas destaca-se em primeiro plano a compatibilidade da linguagem XHTML com as futuras aplicações de usuários, garantindo desde já que as criações XHTML conservar-se-ão estáveis por longos anos. A tendência é a de que futuras versões de navegadores e agentes de usuários em geral, deixem de suportar elementos e atributos já em desuso ("deprecated") segundo as Recomendações do W3C, bem assim como antigos e ultrapassados esquemas e esboços da HTML.

XHTML é a linguagem da web do futuro desde já a disposição de projetistas e desenvolvedores web.

XHTML é um código consistente que dispensa uso de "truques" e "hacks" para contornar "bugs".

Editar um código XHTML existente é uma tarefa bem simples por se tratar de uma escrita limpa e evidente.

O tempo de carregamento de uma página XHTML é mais rápido pois os navegadores têm a interpretar, uma página limpa sem ter que decidir sobre renderização de erros de código.

Uma página XHTML é mais acessível aos navegadores e às aplicações de usuário em geral, incrementando a interoperabilidade e a portabilidade dos documentos web.

Uma página XHTML é totalmente compatível com todas as aplicações HTML antigas e já ultrapassadas.

XHTML é um "Padrão Web "

XHTML 1.0 é uma Recomendação do W3C e sua versão atual data de 26 de janeiro de 2000. Isto significa que trata-se de uma linguagem estável, oficialmente especificada pelo W3C, tendo sido projetada e revisada pelos seus membros e é uma "Padrão Web ".

Consulte a tradução para o português da Recomendação W3C de 26 de janeiro de 2000, revisada em 1 de agosto de 2002 - XHTML™ 1.0 The Extensible HyperText Markup Language (Segunda Edição) - Uma reformulação do HTML 4 em XML 1.0

As diferenças entre XHTML e HTML

As principais diferenças são:

  • todas as tags devem ser escritas em letras minúsculas;
  • as tags devem estar convenientemente aninhadas;
  • os documentos devem ser bem formados;
  • o uso de tags de fechamento é obrigatório;
  • elementos vazios devem ser fechados;
  • sintaxe para atributos.

Todas as tags devem ser escritas com letras minúsculas

A metalinguagem XML é sensível ao tamanho de caixa da fonte. De vez que XHTML é uma aplicação XML, também é sensível ao tamanho de caixa e deve ser usada caixa baixa, ou seja, letras minúsculas.

Errado:

<DIV><P>Aqui um texto</P></DIV>

Certo:

<div><p>Aqui um texto</p></div>

As tags devem estar convenientemente aninhadas

Errado:

<div><em><p>Aqui um texto negrito</em></p></div>

Certo:

<div><em><p>Aqui um texto negrito</p></em></div>

Os documentos devem ser bem formados

Um documento diz-se bem formado quando está estruturado de acordo com as regras definidas nas Recomendações para XML 1.0 [ XML ].
Todos os elementos XHTML devem estar corretamente aninhados dentro do elemento raiz <html>.

A estrutura básica do documento deve ser conforme abaixo:

<html>
<head>
 ... 
</head>
<body>
 ... 
</body>
</html>

O uso de tags de fechamento é obrigatório

Em HTML é permitido, para determinados elementos, omitir-se a tag de fechamento. XML não permite omissão de qualquer tag de fechamento.

Errado::

<p>Um parágrafo.<p>Outro parágrafo.

Certo:

<p>Um parágrafo.</p><p>Outro parágrafo.</p>

Elementos vazios devem ser fechados

Elementos vazios devem ter uma tag de fechamento ou a tag de abertura deve terminar com />. Como exemplo, <br /> ou <hr></hr>.

Errado: Elementos vazios sem terminação

<hr> 
<img src="imagem.gif" alt="minha imagem ">

Certo: Elementos vazios com terminação

<br /> 
<hr /> 
<img src="imagem.gif" alt="minhaimagem " />

Diferenças para a sintaxe dos atributos

  • Nomes de atributos

    Assim como as tags, os atributos também são sensíveis ao tamanhon de caixa e então deve-se escrever nomes de atributos em minúsculas;

    Errado:

    <td ROWSPAN="3">

    Certo:

    <td rowspan="3">

  • Valores de atributos

    Os valores de atributos devem estar entre "aspas duplas " ou 'aspas simples';

    Errado:

    <td rowspan=3>

    Certo:

    <td rowspan="3"> ou <td rowspan='3'>

  • Valores dos atributos

    Todos os atributos devem receber um valor;

    Errado:

    <input checked />

    Certo:

    <input checked="checked" />

    Abaixo uma relação dos atributos que se enquadram nesta recomendação

    compact compact="compact" 
checked checked="checked" 
declare declare="declare" 
readonly readonly="readonly" 
disabled disabled="disabled" 
selected selected="selected" 
defer defer="defer" 
ismap ismap="ismap" 
nohref nohref="nohref" 
noshade noshade="noshade" 
nowrap nowrap="nowrap" 
multiple multiple="multiple" 
noresize noresize="noresize"
  • Os atributos id e name;

    A HTML define o atributo name para os elementos a, applet, form, frame, iframe, img , e map. HTML também introduziu o atribute id. Ambos os atributos foram projetados para serem usados como identificadores.

    Em XML, os identificadores são exclusivamente do tipo ID, e poderá existir somente um atributo do tipo ID por elemento. Além disso um determinado valor do identificador ID deve ser único no documento. Documentos XHTML 1.0 compatíveis com XML e bem estruturados, DEVEM usar o atributo id e não name ao definir identificadores para os elementos listados acima.

    Notar que em XHTML 1.0, o atributo name destes elementos está formalmente em desuso e possivelmente será excluido nas versões futuras de XHTML.

    Errado:

    <img src="imagem.gif" name="minha_imagem" />

    Certo:

    <img src="imagem.gif" id="minha_imagem" />

    Nota: Por razões de compatibilidade com navegadores antigos você pode usar ambos os atributos como mostrado a seguir:

    <img src="imagem.gif" id="minha_imagem" name="minha_imagem" />

  • O atributo lang;

    O atributo lang destina-se a definir a língua em que foi escrito o documento HTML e o atributo xml:lang para definir a língua em que foi escrito o documento XML.

Pontos de âncoras

Em HTML para criar um ponto de âncora, associamos um nome ao elemento <a>:

<p><a name="topo" >Início</a > do parágrafo..bla...</p>

Em XHTML adicione o atributo id (conserve o atributo name apenas para contemplar navegadores antigos se for o caso)

<p><a id="topo" name="topo" >Início</a > do parágrafo..bla...</p>

O atributo alt para imagens

Em XHTML o uso do atributo alt para imagens é obrigatório

<img src="imagem.gif" alt ="minha_imagem " />

Se tratar-se de uma imagem decorativa pode-se usar o atributo alt vazio:

<img src="imagem.gif" alt =" " />

Separadores de blocos de códigos

É comum o uso de uma sequência de caracteres dentro da marcação de comentários ( <!--     --> ) para visualmente separar trechos do código com a finalidade de facilitar sua posterior leitura e manutenção.

Não use a clássica sequência de caracteres ------, para conseguir este efeito.
Alguns agentes de usuário mais antigos podem ter dificuldades na interpretação desta sequência.
Use por exemplo a sequência ====, ., ou xxxxxx

Errado:

<!-- Aqui  começa o menu -->
<!-- -------------------------------------------- -->
código XHTML do menu
<!-- -------------------------------------------- -->

Certo:

<!-- Aqui começa o menu -->
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
código XHTML> do menu
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->

Códigos gerados por editores

Cuidado com os códigos gerados por editores!

Este é um código gerado por editor: onMouseOver=function() não válido em XHTML

Errado:

onMouseOver=function()

Certo:

onmouseover=function()

Caracter & (ampersand)

Codifique o & ( e comercial)

Errado:

Comércio & Exportação

Certo:

Comércio &amp; Exportação

Elementos obrigatórios em um documento XHTML

É obrigatório a declaração do DOCTYPE assim como a existência dos elementos <html> <head> <title> e <body>

Um modelo mínimo de documento XHTML é conforme abaixo:

<!DOCTYPE bla..bla..bla> 
<html xmlns="https://www.w3.org/1999/xhtml"> 
<head> 
	<title>Título do odcumento</title> 
</head>
<body> 
	Conteúdo do documento
</body>
</html>

A declaração DOCTYPE não faz parte da marcação XHTML e como tal não é também um elemento, razão pela qual não há necessidade de tag de fechamento.

Para que serve o DOCTYPE ?

A Definição do tipo de documento (Document Type Definitions DTD) especifica qual é a sintaxe SGML usada no documento. A DTD é usada pelas aplicações SGML ( tais como HTML ) para identificar as regras que se aplicam a linguagem de marcação usada no documento bem como o conjunto de elementos e entidades válidas naquela linguagem. Assim uma DTD para um documento XHTML descreve com precisão a sintaxe e a gramática da linguagem de marcação XHTML.

O DOCTYPE deve ser sempre a primeira declaração em um documento web.

Os tipos de DOCTYPE

São três os tipos de DOCTYPE para XHTML:

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

Esta é a mais rígida das declarações. Os documentos XHTML no modo Strict não admitem qualquer item de formatação dentro dos elementos e nem elementos em desuso "deprecated" segundo as recomendações do W3C. São indicados para uso com folhas de estilo em cascata, com marcação totalmente independente da apresentação

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

Esta declaração permite uma maior flexibilidade e é indicada para documentos que ainda utilizem elementos em desuso ("deprecated"), regras de apresentação embutidas em tags e também para documentos destinados a exibição em navegadores sem suporte para CSS. Não admite qualquer tipo de marcação para frames.

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

Esta declaração permite tudo da declaração transational e mais os elementos especificos para frames.

Validação do documento XHTML

W3C disponibiliza um validador gratuito para documentos XHTML. Ali, você digita o URL ou o caminho para o arquivo no seu HD e um robô analisa o documento fornecendo um relatório completo e detalhado das não conformidades por ventura existentes. É uma ferramenta excelente para você usar durante a elaboração ou migração do seu documento para XHTML. Serve como um verdadeiro revisor do código que você cria. Abaixo o link para o validador:

Validador XHTML do W3C

Conheça os livros do Maujor®

Ir para a página de entrada nos sites dos livros.

topo