Banner propaganda da DevMedia - Cursos de desenvolvimento web

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="http://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" "http://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" "http://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" "http://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®

Clique a "capinha" para visitar o site do livro

capa livro jQuery capa livro ajaxjQuery capa livro css capa livro html capa livro javascript capa livro html5 capa livro css3 capa livro jQuery Mobile capa livro jQuery UI capa livro SVG capa livro RWD capa livro foundation capa livro HTML5 e CSS3 capa livro Bootstrap3 capa livro Sass e Compass

topo