Shefarol Informática

DICAS DE XHTML

XHTML é a sigla em inglês para EXtensible HyperText Markup Language que em português resulta em Linguagem Extensível para Marcação de Hipertexto, uma aplicação XML, escrita para substituir o HTML e nada mais é do que um HTML "puro, claro e limpo".

VANTAGENS de se usar o xhtml

Enumeram-se várias e efetivas vantagens de se usar XHTML nos novos documentos web produzidos ou 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 browsers 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 do HTML.

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 "Web Standard".

PRINCIPAIS DIFERENÇAS ENTRE XHTML E HTML

  1. todas as tags devem ser escritas em letras minúsculas
  2. as tags devem estar aninhadas
  3. os documentos devem ser bem formados
  4. o uso de tags de fechamento é obrigatório
  5. elementos vazios devem ser fechados
  6. diferenças para os atributos

1. todas as tags devem ser escritas em 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> texto</P></DIV>

Certo:

<div><p> texto</p></div>

2. as tags devem estar aninhadas

Errado:

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

Certo:

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

3. 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>
<title> </title>
</head>
<body>

</body>
</html>

4. 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>Primeiro parágrafo.<p>Segundo parágrafo.

Certo:

<p>Primeiro parágrafo.</p><p>Segundo parágrafo.</p>

5. 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

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

Certo: Elementos vazios com terminação

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

6. diferenças para os 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";

Errado:

<td rowspan=3>

Certo:

<td rowspan="3">

  • Sintaxe dos atributos
    A sintaxe para atributos deve ser escrita por completo;

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;
    O 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 identificador deve ser único no documento. Documentos XHTML 1.0 compatíveis com XML e bem estruturados, DEVEM usar o atributo id 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 browsers antigos você pode usar ambos os atributos como abaixo:

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

  • O atributo lang;
    Use 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 âncora

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:

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

Atributo ALT para imagem

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 bloco 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ências 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:

  1. STRICT
  2. TRANSITIONAL
  3. FRAMESET

<XHTML; 1.0 Strict <!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

<XHTML; 1.0 Transitional <!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 browsers sem suporte para CSS. Não admite qualquer tipo de marcação para frames.

<XHTML; 1.0 Frameset <!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 a URL ou o caminho para o arquivo no seu HD e um robo 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

Fonte: Maujor