XHTML 
EXTENSIBLE HYPERTEXT MARKUP LANGUAGE
O que é XHTML? 
 Em poucas palavras, o XHTML é uma espécie de junção entre o 
HTML e o XML. O XML é uma especificação bastante rígida: 
quando os navegadores encontram um erro no HTML comum, 
como uma tag <p> sem o </p>, o erro é "consertado" 
automaticamente e, com isso, o usuário geralmente consegue 
visualizar a página normalmente; já com o XML, um erro desse tipo 
faz a aplicação parar.
O que é XHTML? 
 Além disso, cada navegador conserta o erro à sua maneira, o que 
significa que o que você vê funcionando em um dispositivo pode 
virar bagunça em outro. Desta forma, ao combinar HTML com 
XML, o XHTML resultante é a garantia de que seu site será exibido 
exatamente como você o desenvolveu, independente do 
dispositivo. Isso evita o uso de hacks para corrigir problemas de 
exibição em determinados navegadores e ainda deixa seu código 
organizado para atualizações futuras.
ENTEDENDO HTML E XHTML 
Todo conteúdo da Web necessita seguir um padrão. Atualmente a 
codificação padrão é o XHTML. 
Algumas razões para aprender e utilizar o XHTML: 
• XHTML é o padrão de marcação atual, substituindo a HTML; 
• Utilização de regras de sintaxe mais precisas e rigorosas; 
• Aumento significativo da acessibilidade aos sites criados seguindo 
os padrões; 
• Facilidade de manutenção e atualização; 
• Possibilidade de utilizar o mesmo código para diversos clientes Web 
além do navegador: PDAs, celulares e outros dispositivos móveis.
Hipertexto e Hiperlink 
 Normalmente, definimos hipertexto relacionando texto em formato 
digital, podendo ser agregado a ele outros tipos de informações, 
como outros blocos de textos, palavras, imagens ou sons, sendo 
que o acesso aos outros elementos dá-se através de hiperlinks.
HTML (Hypertext Markup 
Language) 
 Linguagem de Marcação de Hipertexto. 
 A linguagem HTML é utilizada para marcar textos através de 
elementos e atributos. Um texto marcado com esta linguagem é 
chamado de hipertexto HTML. 
 Documentos HTML podem ser interpretados por navegadores. 
Desde a versão 4.01 do HTML a aparência não é responsabilidade 
do HTML.
XHTML (EXtensible Hypertext Markup 
Language) 
 XHTML é uma Linguagem Extensível de Marcação para Hipertexto e 
que se destina a escrever documentos web com a funcionalidade 
adicional de ser compatível com as aplicações XML.
SGML (Standard Generalized 
Markup Language 
 Todas as linguagens de marcação da Web são baseadas em SGML 
(SGML - Linguagem de Marcação Generalizada Padrão), uma 
metalinguagem complexa, projetada com a finalidade de servir de 
base para a criação de outras linguagens. SGML foi usada para criar 
XML (Extensible Markup Language - Linguagem de Marcação 
Extensível), também uma metalinguagem, porém, simplificada.
XML 
 Com XML, é possível definir novas tags e novos atributos 
para escrever um documento Web, permitindo ao 
usuário criar sua própria linguagem de marcação. 
XHTML foi criada dentro deste conceito e, por isso, é 
uma aplicação XML.
DTD: Document Type Definition 
 Um padrão que define as partes de um 
documento, e descrevem como eles podem ou 
não ser usados, o que pode ser colocado em 
seus interiores, esse são ou não elementos 
obrigatórios do documento. 
 Descreve com precisão a sintaxe e a gramática 
da linguagem de marcação XHMTL.
As 3 Definições de Tipo de 
Documento 
 Há atualmente 3 tipos de documentos XHTML: 
 STRICT 
 TRANSITIONAL 
 FRAMESET
XHTML 1.0 Strict 
 <!DOCTYPE html 
PUBLIC “-//W3C//DTD XHMTL 1.0 Strict//EM” 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd> 
 Use esta quando você quer realmente uma marcação 
limpa, livre da confusão da apresentação. Use junto 
com Folhas de Estilo em Cascata (Cascading Style 
Sheets).
XHTML 1.0 Transitional 
 <!DOCTYPE html 
PUBLIC “-//W3C//DTD XHMTL 1.0 Transitional//EM” 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasnsitional.dtd> 
 Use esta quando você precisa tirar vantagem das 
características de apresentação da HTML e quando 
você quer dar suporte aos navegadores que não 
entendem Folhas de Estilo em Cascata.
XHTML 1.0 Frameset 
 <!DOCTYPE html 
PUBLIC “-//W3C//DTD XHMTL 1.0 Frameset//EM” 
http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd> 
 Use esta quando você quer usar Frames (molduras) 
HTML para particionar a janela do navegador em duas 
ou mais molduras (frames).
As diferenças do XHTML na prática 
 O assunto é extenso, mas vamos abordar alguns pontos aqui. A 
primeira diferença é que todas as tags devem ser fechadas. No 
HTML, para separar um parágrafo do outro, se você simplesmente 
colocar um <p> entre eles, o navegador irá aceitar. Como isso, na 
verdade, está errado, o código não será validado no XHTML: um 
parágrafo deve vir entre um <p> e um </p>, como manda a boa e 
velha organização.
Exemplo 1 
 Certo 
<p> 
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. Nam 
quis nunc at diam euismod 
rhoncus.</p> 
<p> 
Aliquam auctor laoreet dui. Nulla 
arcu arcu, placerat ut, consectetuer 
et, tempus eu, urna.</p> 
 Errado 
<p> 
Lorem ipsum dolor sit amet, 
consectetuer adipiscing elit. Nam 
quis nunc at diam euismod rhoncus. 
<p> 
Aliquam auctor laoreet dui. Nulla 
arcu arcu, placerat ut, consectetuer 
et, tempus eu, urna
As diferenças do XHTML na prática 
 Alguns elementos têm tag de fechamento, como <p> e </p>, 
<strong> e </strong>, etc. Em elementos sem tag de fechamento, 
usa-se uma barra no final, como <br />, <hr /> e <img ... />; 
 Uma coisa que costuma dar trabalho é o fato de que todas as tags 
e atributos deverem estar em letras minúsculas; (XHTML é case-sensitive) 
 Isso também vale para códigos de JavaScript: OnMouseOver deve 
ser substituído por onmouseover, por exemplo.
Exemplo 2 
 Certo 
<p>Lorem <strong class="estilo"> 
ipsum dolor sit amet</strong>, 
consectetuer adipiscing elit.</p> 
 A última tag aberta deve ser a primeira 
a ser fechada. 
 Errado 
<P>Lorem 
<B CLASS="estilo">ipsum dolor sit 
amet</b>, consectetuer adipiscing 
elit.</P>
Os valores de atributos devem 
estar entre aspas 
 Todos os valores de atributo devem ser declarados entre aspas, 
mesmo aqueles valores com caracteres númericos. 
 CORRETO: valores de atributo entre aspas 
 <td rowspan="3"> 
 INCORRETO: valores de atributos sem uso de aspas 
 <td rowspan=3>
Elementos vazios 
 Inclua um espaço antes de / > (barra-sinal de maior) nos elementos vazios. Por 
exemplo, <br />, <hr /> e <img src="karen.jpg" alt="Karen" />. Use a sintaxe de tag 
simplificada para elementos vazios. Por exemplo <br />, ao invés de <br></br> 
permitido em XML mas que traz resultados inesperados em certas aplicações de 
usuário.
O Atributo id substitui o Atributo 
name 
 A HTML 4.01 define um atributo name para os elementos a, applet, frame, 
iframe, img, e map. Na XHTML o atributo name está desaprovado. Use id no 
lugar. 
 Errado 
 <img src=“imagem.gif” name=“imagem1” /> 
 Correto 
 <img src=“imagem.gif” id=“imagem1” /> 
 Observação: Para inter-operar com navegadores mais antigos por enquanto, 
você deve usar tanto o name quanto o id, com valores de atributo idênticos, 
assim: 
 <img src=“imagem.gif” id=“imagem1” name=“imagem1” />
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
Separadores de blocos de códigos 
 Errado: 
 <!-- Aqui começa o menu --> 
 <!-- -------------------------------------------- --> 
 código XHTML do menu 
 <!-- -------------------------------------------- --> 
 Certo: 
 <!-- Aqui começa o menu --> 
 <!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx --> 
 código XHTML> do menu 
 <!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
Elementos obrigatórios em XHTML 
 Todos os documentos XHTML devem 
ter uma declaração DOCTYPE. Os 
elementos html, head e body devem 
estar presentes, e o title deve estar 
presente dentro do elemento head. 
<!DOCTYPE O Tipo-de-documento vai aqui> 
<htmlxmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>O título vai aqui</title> 
</head> 
<body> 
O corpo do texto vai aqui 
</body> 
</html>
Observações 
 Observação: A declaração DOCTYPE não é em si uma parte do documento 
XHTML. Ela não é um elemento XHTML, e ela não deve ter uma tag de 
fechamento. 
 Observação: O atributo xmlns dentro da tag <html> é requerido na XHTML. 
Entretanto, o validador no w3.org não acusa quando este atributo está faltando 
num documento XHTML. Isto é porque "xmlns=http://www.w3.org/1999/xhtml" é um 
valor fixo e será adicionado à tag <html> mesmo se você não o incluir.
Como um site deve ser convertido 
para XHTML 
 Para converter um site Web de HTML para XHTML, você 
deve estar familiarizado com as regras de sintaxe da 
XHTML dos capítulos anteriores.
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

Xhtml

  • 1.
  • 2.
    O que éXHTML?  Em poucas palavras, o XHTML é uma espécie de junção entre o HTML e o XML. O XML é uma especificação bastante rígida: quando os navegadores encontram um erro no HTML comum, como uma tag <p> sem o </p>, o erro é "consertado" automaticamente e, com isso, o usuário geralmente consegue visualizar a página normalmente; já com o XML, um erro desse tipo faz a aplicação parar.
  • 3.
    O que éXHTML?  Além disso, cada navegador conserta o erro à sua maneira, o que significa que o que você vê funcionando em um dispositivo pode virar bagunça em outro. Desta forma, ao combinar HTML com XML, o XHTML resultante é a garantia de que seu site será exibido exatamente como você o desenvolveu, independente do dispositivo. Isso evita o uso de hacks para corrigir problemas de exibição em determinados navegadores e ainda deixa seu código organizado para atualizações futuras.
  • 4.
    ENTEDENDO HTML EXHTML Todo conteúdo da Web necessita seguir um padrão. Atualmente a codificação padrão é o XHTML. Algumas razões para aprender e utilizar o XHTML: • XHTML é o padrão de marcação atual, substituindo a HTML; • Utilização de regras de sintaxe mais precisas e rigorosas; • Aumento significativo da acessibilidade aos sites criados seguindo os padrões; • Facilidade de manutenção e atualização; • Possibilidade de utilizar o mesmo código para diversos clientes Web além do navegador: PDAs, celulares e outros dispositivos móveis.
  • 5.
    Hipertexto e Hiperlink  Normalmente, definimos hipertexto relacionando texto em formato digital, podendo ser agregado a ele outros tipos de informações, como outros blocos de textos, palavras, imagens ou sons, sendo que o acesso aos outros elementos dá-se através de hiperlinks.
  • 6.
    HTML (Hypertext Markup Language)  Linguagem de Marcação de Hipertexto.  A linguagem HTML é utilizada para marcar textos através de elementos e atributos. Um texto marcado com esta linguagem é chamado de hipertexto HTML.  Documentos HTML podem ser interpretados por navegadores. Desde a versão 4.01 do HTML a aparência não é responsabilidade do HTML.
  • 7.
    XHTML (EXtensible HypertextMarkup Language)  XHTML é uma Linguagem Extensível de Marcação para Hipertexto e que se destina a escrever documentos web com a funcionalidade adicional de ser compatível com as aplicações XML.
  • 8.
    SGML (Standard Generalized Markup Language  Todas as linguagens de marcação da Web são baseadas em SGML (SGML - Linguagem de Marcação Generalizada Padrão), uma metalinguagem complexa, projetada com a finalidade de servir de base para a criação de outras linguagens. SGML foi usada para criar XML (Extensible Markup Language - Linguagem de Marcação Extensível), também uma metalinguagem, porém, simplificada.
  • 9.
    XML  ComXML, é possível definir novas tags e novos atributos para escrever um documento Web, permitindo ao usuário criar sua própria linguagem de marcação. XHTML foi criada dentro deste conceito e, por isso, é uma aplicação XML.
  • 10.
    DTD: Document TypeDefinition  Um padrão que define as partes de um documento, e descrevem como eles podem ou não ser usados, o que pode ser colocado em seus interiores, esse são ou não elementos obrigatórios do documento.  Descreve com precisão a sintaxe e a gramática da linguagem de marcação XHMTL.
  • 11.
    As 3 Definiçõesde Tipo de Documento  Há atualmente 3 tipos de documentos XHTML:  STRICT  TRANSITIONAL  FRAMESET
  • 12.
    XHTML 1.0 Strict  <!DOCTYPE html PUBLIC “-//W3C//DTD XHMTL 1.0 Strict//EM” http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd>  Use esta quando você quer realmente uma marcação limpa, livre da confusão da apresentação. Use junto com Folhas de Estilo em Cascata (Cascading Style Sheets).
  • 13.
    XHTML 1.0 Transitional  <!DOCTYPE html PUBLIC “-//W3C//DTD XHMTL 1.0 Transitional//EM” http://www.w3.org/TR/xhtml1/DTD/xhtml1-trasnsitional.dtd>  Use esta quando você precisa tirar vantagem das características de apresentação da HTML e quando você quer dar suporte aos navegadores que não entendem Folhas de Estilo em Cascata.
  • 14.
    XHTML 1.0 Frameset  <!DOCTYPE html PUBLIC “-//W3C//DTD XHMTL 1.0 Frameset//EM” http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd>  Use esta quando você quer usar Frames (molduras) HTML para particionar a janela do navegador em duas ou mais molduras (frames).
  • 15.
    As diferenças doXHTML na prática  O assunto é extenso, mas vamos abordar alguns pontos aqui. A primeira diferença é que todas as tags devem ser fechadas. No HTML, para separar um parágrafo do outro, se você simplesmente colocar um <p> entre eles, o navegador irá aceitar. Como isso, na verdade, está errado, o código não será validado no XHTML: um parágrafo deve vir entre um <p> e um </p>, como manda a boa e velha organização.
  • 16.
    Exemplo 1 Certo <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam quis nunc at diam euismod rhoncus.</p> <p> Aliquam auctor laoreet dui. Nulla arcu arcu, placerat ut, consectetuer et, tempus eu, urna.</p>  Errado <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam quis nunc at diam euismod rhoncus. <p> Aliquam auctor laoreet dui. Nulla arcu arcu, placerat ut, consectetuer et, tempus eu, urna
  • 17.
    As diferenças doXHTML na prática  Alguns elementos têm tag de fechamento, como <p> e </p>, <strong> e </strong>, etc. Em elementos sem tag de fechamento, usa-se uma barra no final, como <br />, <hr /> e <img ... />;  Uma coisa que costuma dar trabalho é o fato de que todas as tags e atributos deverem estar em letras minúsculas; (XHTML é case-sensitive)  Isso também vale para códigos de JavaScript: OnMouseOver deve ser substituído por onmouseover, por exemplo.
  • 18.
    Exemplo 2 Certo <p>Lorem <strong class="estilo"> ipsum dolor sit amet</strong>, consectetuer adipiscing elit.</p>  A última tag aberta deve ser a primeira a ser fechada.  Errado <P>Lorem <B CLASS="estilo">ipsum dolor sit amet</b>, consectetuer adipiscing elit.</P>
  • 19.
    Os valores deatributos devem estar entre aspas  Todos os valores de atributo devem ser declarados entre aspas, mesmo aqueles valores com caracteres númericos.  CORRETO: valores de atributo entre aspas  <td rowspan="3">  INCORRETO: valores de atributos sem uso de aspas  <td rowspan=3>
  • 20.
    Elementos vazios Inclua um espaço antes de / > (barra-sinal de maior) nos elementos vazios. Por exemplo, <br />, <hr /> e <img src="karen.jpg" alt="Karen" />. Use a sintaxe de tag simplificada para elementos vazios. Por exemplo <br />, ao invés de <br></br> permitido em XML mas que traz resultados inesperados em certas aplicações de usuário.
  • 21.
    O Atributo idsubstitui o Atributo name  A HTML 4.01 define um atributo name para os elementos a, applet, frame, iframe, img, e map. Na XHTML o atributo name está desaprovado. Use id no lugar.  Errado  <img src=“imagem.gif” name=“imagem1” />  Correto  <img src=“imagem.gif” id=“imagem1” />  Observação: Para inter-operar com navegadores mais antigos por enquanto, você deve usar tanto o name quanto o id, com valores de atributo idênticos, assim:  <img src=“imagem.gif” id=“imagem1” name=“imagem1” />
  • 22.
    O atributo altpara 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 =" " />
  • 23.
    Separadores de blocosde 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
  • 24.
    Separadores de blocosde códigos  Errado:  <!-- Aqui começa o menu -->  <!-- -------------------------------------------- -->  código XHTML do menu  <!-- -------------------------------------------- -->  Certo:  <!-- Aqui começa o menu -->  <!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->  código XHTML> do menu  <!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
  • 25.
    Elementos obrigatórios emXHTML  Todos os documentos XHTML devem ter uma declaração DOCTYPE. Os elementos html, head e body devem estar presentes, e o title deve estar presente dentro do elemento head. <!DOCTYPE O Tipo-de-documento vai aqui> <htmlxmlns="http://www.w3.org/1999/xhtml"> <head> <title>O título vai aqui</title> </head> <body> O corpo do texto vai aqui </body> </html>
  • 26.
    Observações  Observação:A declaração DOCTYPE não é em si uma parte do documento XHTML. Ela não é um elemento XHTML, e ela não deve ter uma tag de fechamento.  Observação: O atributo xmlns dentro da tag <html> é requerido na XHTML. Entretanto, o validador no w3.org não acusa quando este atributo está faltando num documento XHTML. Isto é porque "xmlns=http://www.w3.org/1999/xhtml" é um valor fixo e será adicionado à tag <html> mesmo se você não o incluir.
  • 27.
    Como um sitedeve ser convertido para XHTML  Para converter um site Web de HTML para XHTML, você deve estar familiarizado com as regras de sintaxe da XHTML dos capítulos anteriores.
  • 28.
    Validação do documentoXHTML  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

Notas do Editor

  • #2 http://codigofonte.uol.com.br/artigos/10-tags-html-que-voce-nao-conhecia
  • #10 http://www.infowester.com/xhtml.php
  • #19 http://www.plasmadesign.com.br/stupidtables/20semanticmarkup.html http://www.clem.ufba.br/tuts/xhtml/c05.htm http://www.maujor.com/w3c/xhtml10_2ed.html
  • #27 http://books.google.com.br/books?id=BUmXBAAAQBAJ&pg=PA17&lpg=PA17&dq=regras+de+uso+de+xhtml&source=bl&ots=kGSJ5-9x_j&sig=LJWdM9skpdzTYQToJEs32Ma8w48&hl=pt-BR&sa=X&ei=baFrVNb7OYSogwTb6ILwBA&ved=0CEAQ6AEwBQ#v=onepage&q&f=false