Manual de XHTML

juliaojunior

XHTML é uma versão mais limpa e rigorosa do HTML. Neste artigo veremos a diferença entre HTML e XHTML e como usar bem tal ferramenta.

[ Hits: 22.172 ]

Por: Juliao Junior em 18/02/2010

0 0

Denuncie Favoritos Indicar Impressora

Diferenças entre HTML e XHTML

O XHTML não é muito diferente do padrão HTML 4.01.

Portanto, se você escrever sua página seguindo o HTML 4.01 já é um bom começo.

Além disso, você deve começar agora a escrever o seu código HTML em letras minúsculas, e nunca esquecer as tags de fechamento (como ).

As diferenças mais importantes são:

Elementos XHTML devem estar devidamente aninhados
Elementos XHTML devem estar sempre fechados
Elementos XHTML devem estar sempre em minúsculas
Documentos XHTML devem ter um elemento raiz

Elementos XHTML devem estar devidamente aninhados

Em HTML, alguns elementos podem ser encaixados dentro de si, indevidamente, como neste exemplo:

Este texto está em negrito e itálico

Em XHTML, todos os elementos devem estar devidamente aninhados uns dentro dos outros, como este:

Este texto está em negrito e itálico

Nota: um erro comum com listas aninhadas é esquecer que a lista mais interna deve estar entre tags <li> e </li>. Isto, por exemplo, está errado:

<ul>
 <li> Café </li>
 <li> Chá
 <ul>
 <li> Chá preto </li>
 <li> Chá verde </li>
 </ul>
 <li> Leite </li>
</ul>

Já este exemplo está correto:

<ul>
 <li> Café </li>
 <li> Chá
 <ul>
 <li> Chá preto </li>
 <li> Chá verde </li>
 </ul>
 </li>
 <li> Leite </li>
</ul>

Note que inserimos um </li> depois da tag </ul> neste último exemplo.

Elementos XHTML devem ser sempre fechados

Lembre que os elementos não vazios devem ter uma tag de fechamento. Por exemplo, o trecho abaixo não está corretamente escrito:

Este é um parágrafo
 Este é outro parágrafo

Já este trecho está ótimo:

Este é um parágrafo 
 Este é outro parágrafo

O interessante é que os elementos vazios também devem ser fechados. Não use conforme visto abaixo:

Uma quebra de linha: 
Uma linha horizontal: <hr>
Uma imagem: <img src="happy.gif" alt="Happy face">

Escreva assim:

Uma quebra de linha: 
Uma linha horizontal: <hr/>
Uma imagem: <img src="happy.gif" alt="Happy face"/>

Elementos XHTML sempre com letras minúsculas

Nas versões anteriores do HTML, era possível escrever os elementos tanto com minúsculas como com maiúsculas. Ou seja, poderíamos encontrar em uma mesma página os elementos <H1> e <h1> e não havia "problemas". A não ser, é claro, pela bagunça. Então em XHTML isso foi "resolvido". Usamos apenas letras minúsculas. Novamente, veja um exemplo incorreto:

<BODY>
 Este é um parágrafo 
</BODY>

Agora o correspondente exemplo correto:

<body>
 Este é um parágrafo 
</body>

Documentos XHTML devem ter um elemento raiz

Todos os elementos XHTML devem estar aninhados dentro do elemento raiz <html>. Elementos "filhos" devem vir em pares, e ser corretamente aninhados dentro do seu elemento pai.

O estrutura básica de um arquivo XHTML é:

Página anterior Próxima página

Páginas do artigo

   1. Introdução
   2. Diferenças entre HTML e XHTML
   3. Um pouco de sintaxe

Outros artigos deste autor

Finnix - Ótima distro para manutenção de sistemas

Atualização para o Ubuntu 10.10

Alinhamento em folhas de estilo - CSS

SystemRescueCd - Corrigindo o sistema e recuperando dados

Octave - Programação científica no Linux

Leitura recomendada

Entendendo validações e operações aritméticas com Javascript

Servidor LAMP no Linux Mint e Ubuntu

JavaScript - Programação orientada a objetos

CSS - Manual de Estilo (parte 2)

Introdução ao Jython

Comentários

[1] Comentário enviado por elgio em 18/02/2010 - 10:46h

Tocaste de leve em um ponto muito crítico: a tolerância, por navegadores, de erros de sintaxe em HTML!

Particularmente eu descobri que muitos problemas de "incompatibilidade" de Java Script eram simplesmente erros de sintaxe, que alguns nagegadores (IE) toleravam.

Bom artigo.

0 0

[2] Comentário enviado por juliaojunior em 18/02/2010 - 16:29h

Rapaz, quando terminei de escrever este artigo eu quase desistia de enviar p fila de espera. Achei ele fraco demais. Mas mudei de idéia pq percebi que alguns conceitos são bem desconhecidos da maioria dos usuários da net. Um deles foi o que vc falor, a compatibilidade.

Espero ter contribuído para esclarecer alguns mortais, como eu. :)

0 0

[3] Comentário enviado por removido em 18/02/2010 - 17:31h

Muito bom artigo, simples e direto.
Sim, concordo que foi muito simples e mal arranhou a superfície do assunto, mas a verdade é que muitos não sabem nem isso. Quem sabe lendo seu artigo algumas pessoas resolvam pesquisar mais... As vezes só o que precisam é saber que algo do tipo existe. Muitas pessoas não seguem nenhum padrão, e pior, acham que está certo pelo simples fato de ter funcionado em UM navegador.
Vou esperar para ver o artigo sobre o DOCTYPE, espero que você siga a mesma simplicidade, pois os leigos também precisam aprender.

0 0

[4] Comentário enviado por juliaojunior em 18/02/2010 - 18:19h

Sim, tentarei escrever sobre o DOCTYPE também, e simples como sempre. É melhor assim, fica mais acessível.

0 0

[5] Comentário enviado por andrezc em 19/02/2010 - 17:58h

Muito bom ! Eu tinha uma certa curiosidade sobre o XHTML, agora já foi esclarecido, só me falta ler agora sobre DHTML.

0 0

[6] Comentário enviado por Teixeira em 20/02/2010 - 01:21h

Muito bom o artigo.
Apenas lamento que as mudanças de sintaxe (embora raras) venham a nos forçar a reaprender - talvez desnecessariamente - coisas como colocar uma barra em . Acho que a disciplina de fechar todas as tags abertas já seria suficiente para melhorar o código. Uma identação também vai muito bem, mesmo nas versões anteriores de HTML.
Ja vi editores que colocam <a HREF> e <a NAME> em maiúsculas e com um espaço antes da barra.
Além do que, certos navegadores mais antigos (entre os quais o Links) podem simplesmente desconhecer essa sintaxe.
O próprio site do VOL há uns tempos atrás era perfeitamente visualizado no Link2ssl, porém agora sai tudo alinhado à esquerda,
um campo em cima do outro, ou seja, até mesmo a coluna direita vem parar do lado esquerdo.
Não se perde nada do conteúdo, mas fica bastante estranho.
Agora também não se usa o par mas , embora a primeira sintaxe seja geralmente aceita pela maioria dos browsers.
Tenho notado que desenvolvedores geralmente se esquecem de fechar tags como , e também que os "DOCTYPE" nem sempre correspondem ao que foi declarado. O colega cesar.vieira está certo, tem browser que é excessivamente tolerante. Tenho um site (cobaia) onde já cometi todas as barbaridades possíveis e imagináveis, e que durante muito tempo funcionou perfeitamente bem no I.E. (no entanto as páginas tinham mais de 3000 erros quando examinadas pelo validador da W3C).
Gostei também da promessa de escrever sobre a cláusula DOCTYPE, ao meu ver uma das coisas mais importantes e ao mesmo tempo misteriosas de qualquer código *HTML que se preze...

0 0

[7] Comentário enviado por Primo NT em 13/03/2010 - 09:06h

Achei muito lega!
Gosto de ficar "brincando" com html em foruns!
Sempre vou ficar olhando por aqui para ver se acho artigos como esse!
Sempre tem algo a mais para se aprender! ;D

0 0

[8] Comentário enviado por caprendice em 30/06/2010 - 16:34h

Muito bom o artigo, explicou claramente, as diferenças entre ambos!
Eu particularmente estou começando a mexer agora com programação web, então me ajudou um pouco.
Resumindo o xhtml é como se fosse o C, ou seja mais estruturado e com caso sensitivo.

0 0