XHTML – eXtensible HyperText Markup Language
Revisão
Profª MSc. Elizabete Munzlinger
www.elizabete.com.br
1
XHTML Revisão
Índice
1 – eXtensible HTML (XHTML)... 2
1.1 – Diferenças entre HTML e XHTML... 2
1.2 – Regras para documentos XHTML... 2
a) Todas as tags e atributos devem ser escritos em letras minúsculas... 2
b) As tags devem estar convenientemente aninhadas... 2
c) Os documentos devem ser bem formados... 3
d) O uso de tags de fechamento é obrigatório... 3
e) Elementos vazios devem ser fechados... 3
f) Sintaxe completa dos atributos... 3
g) Identificador dos elementos (id/name)... 4
h) Imagens com atributo alt... 4
i) Caractere & (ampersand)... 4
j) Atributo lang... 5
k) Separadores de blocos (comentários)... 5
l) Declaração DOCTYPE... 5
m) Validação do documento XHTML... 6
Referências Bibliográficas... 6
2 1 – eXtensible HTML (XHTML)
XHTML é a sigla em inglês para eXtensible HyperText Markup Language (Linguagem Extensível para Marcação de Hipertexto).
XHTML é uma versão da linguagem HTML 4.01 com regras mais rígidas, herdadas do XML. Usada principalmente para tornar os sites acessíveis em diversos dispositivos portáveis como celulares, pda’s, ifone, etc. e é suportada por todos os principais browsers.
XHTML é constituída por todos os elementos do HTML 4.01, combinado com a sintaxe restrita de escrita do XML.
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. XHTML 1.0 e um Web Standard (Padrão Web).
1.1 – Diferenças entre HTML e XHTML
As diferenças entre documentos HTML e XHTML está nas regras de escrita mais rígidas. As regras mais importantes são:
• O documento deve ter um DOCTYPE
• O documento deve ter um elemento raiz
• Elementos devem estar corretamente aninhados
• Elementos devem estar sempre fechados
• Elementos e atributos devem estar escritos em letras minúsculas
• Valores dos atributos devem estar sempre entre aspas Estas principais diferenças e outras são explicadas a seguir.
1.2 – Regras para documentos XHTML
a) Todas as tags e atributos devem ser escritos em letras minúsculas
Da mesma forma que a metalinguagem XML (eXtensible Markup Language), o XHTML também é case-sensitive (sensível à maiúsculas e minúsculas). Dessa forma todas as tags e atributos devem ser escritos em letras minúsculas, assim como valores pré-definidos da linguagem.
Errado (letra maiúsculas):
<BODY>conteúdo</BODY>
<DIV><P CLASS=”resumo”>Aqui um texto</P></DIV> Certo (letra minúscula):
<body>conteúdo</body>
<div><p class=”resumo”>Aqui um texto</p></div>
b) As tags devem estar convenientemente aninhadas
Os conjuntos de tags abertas dentro de outras tags devem fechar ainda dentro destas, e não de forma intercalada.
Errado:
<div><em><p>texto ...</em></p></div>
<b><i>texto ...</b></i> Certo:
<div><em><p>texto ...</p></em></div>
<b><i>texto ...</i></b></div>
3 c) 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. Todos os elementos XHTML devem estar corretamente aninhados dentro do elemento raiz <html>, após a declaração DOCTYPE.
A estrutura básica do documento deve ser conforme abaixo:
<!DOCTYPE ... >
<html XML:lang="PT-BR" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> ... </title>
</head>
<body>
...
</body>
</html>
d) O uso de tags de fechamento é obrigatório
Em HTML é permitido para determinados elementos, omitir-se a tag de fechamento. XHML não permite omissão de qualquer tag de fechamento.
Errado:
<p>Um parágrafo.<p>Outro parágrafo.
<li> item 1
<li> item 2
Certo:
<p>Um parágrafo.</p><p>Outro parágrafo.</p>
<li> item 1 </li>
<li> item 2 </li>
e) Elementos vazios devem ser fechados
Elementos vazios são aqueles que não possuem uma tag de fechamento equivalente (como <p>
</p>). Então estes elementos devem ser fechados ao final com uma barra: />.
Errado:
<br>
<hr>
<img src="imagem.gif" alt="Descrição da imagem">
<input type="text">
Certo:
<br />
<hr />
<img src="imagem.gif" alt="Descrição da imagem" />
<input type="text" />
f) Sintaxe completa dos atributos
Atributos devem estar sempre na forma completa: atributo="valor". Para os atributos que não tem valor padrão, deve-se repetir o nome do atributo como sendo valor do mesmo.
Errado:
<p class=center>texto ...</p>
<p class:"Center”>texto ...</p>
<p class"Center”>texto ...</p>
<input type=”checkbox” checked />
<input type=”text” readonly /> Certo:
4
<p class=”center”>texto ...</p>
<input type=”checkbox” checked=”checked” />
<input type=”text” readonly=”readonly” />
Lista de atributos que se enquadram nessa recomendação:
compact="compact"
checked="checked"
declare="declare"
readonly="readonly"
disabled="disabled"
selected="selected"
defer="defer"
ismap="ismap"
nohref="nohref"
noshade="noshade"
nowrap="nowrap"
multiple="multiple"
noresize="noresize"
g) Identificador dos elementos (id/name)
No HTML podemos usar identificadores do tipo id ou name nos elementos. Na linguagem XHML os identificadores são exclusivamente do tipo id.
Errado:
<img src="imagem.gif" name="minha_imagem" /> <p name="noticia">texto ...</p> Certo:
<img src="imagem.gif" id="minha_imagem" /> <p id="noticia">texto ...</p> Âncoras devem usar sempre o id no lugar no name.
Errado:
<a name="topo">Início da página</a> Certo:
<a id="topo">Início da página</a>
h) Imagens com atributo alt
No HTML o atributo é opcional, mas em XHML este atributo é obrigatório nas imagens inseridas. Esse atributo oferece uma opção a leitores de tela que não apresentam as imagens.
Errado:
<img src="imagem.gif" />
Certo:
<img src="imagem.gif" alt="Por do sol" />
i) Caractere & (ampersand)
O caractere & (e comercial) é usado para identificar entidades de caracteres. No XHML o &
deve estar sempre codificado na forma de entidade e nunca usado na forma de caractere.
Errado:
<h1>Comércio & Exportação</h1> Certo:
<h1>Comércio & Exportação</h1>
5 j) Atributo lang
O atributo lang aplica-se a quase todos os elementos XHTML. Ele especifica o idioma do conteúdo dentro de um elemento. Se você usar o atributo lang em um elemento, você também deve adicionar o atributo xml: lang, como este:
Certo:
<div lang="it" xml:lang="it">Ciao bella!</div>
k) Separadores de blocos (comentários)
É 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 pois ele faz parte da tag de comentário. Alguns navegadores podem ter dificuldades na interpretação desta sequência. Use qualquer outra sequência como ==== 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 -->
l) Declaração DOCTYPE
É uma instrução que contém dados sobre o documento. Especifica a linguagem, versão, modo de escrita, e o DTD (Document Type Definition/Definição do Tipo de Documento ) que especifica quais as regras que se aplicam à 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. A declaração DOCTYPE não faz parte da marcação XHTML.
O DOCTYPE deve ser sempre a primeira declaração em um documento web.
XHTML apresenta 3 tipos de DOCTYPE: Strict, Transitional ou Frameset.
Strict:
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 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Transitional:
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 CSS. Não admite qualquer tipo de marcação para frames.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Frameset:
Esta declaração permite tudo da declaração transational e mais os elementos específicos para frames.
6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
m) Validação do documento XHTML
W3C disponibiliza um validador gratuito para documentos XHTML. Informando a URL (caso online) ou o caminho para o arquivo no seu HD, um robô analisa o documento fornecendo um relatório completo e detalhado das não conformidades por ventura existentes em relação à sintaxe do código. É uma ferramenta excelente para usar durante a elaboração ou migração do seu documento para XHTML. Abaixo o link para o validador:
Validador XHTML do W3C- http://validator.w3.org/
Referências Bibliográficas
1. XHTML. W3C Recomendation: XHTML 1.0 The Extensible HyperText Markup Language (Second Edition). A Reformulation of HTML 4 in XML 1.0. Disponível online em: [http://www.w3.org/TR/xhtml1/]
2.MARCONDES, Christian Alfim. HTML fundamental 4.0. São Paulo: Érica, 2005.
3. CARDOSO, Márdel. Desenvolvimento web para o ensino superior. Rio de Janeiro: Axcel Books, 2004.
4.W3C. Word Wide Web Consortium. Disponível online em: [http://www.w3.org/]
5. HTML. HTML Working Group. Disponível online em: [http://www.w3.org/html/wg/]
6. HTML. W3C Recomendation: HTML 4.01 Specification. Disponível online em: [http://www.w3.org/TR/html4/]
7.HTML. Overview of HTML. Disponível online em: [http://www.w3.org/html/]
8. HTML. HTML Validator W3C. Disponível online em: [http://validator.w3.org/]
9. DOCTYPE. Recommended list of DOCTYPE W3C. Disponível online em: [http://www.w3.org/QA/2002/04/valid‐
dtd‐list.html]
