Manual introdutório de XHTML


Autor/fonte: Cicero Juliao da Silva Junior
E-mail/Url: http://www.vivaolinux.com.br/artigo/Manual-de-XHTML
Tags: [ introdução ]



Digg del.icio.us

XHTML é uma versão mais limpa e rigorosa do HTML. Portanto, se você já conhece HTML, mesmo de forma básica, vai se beneficiar deste artigo. Estamos fazendo mais uma tradução livre das ótimas matérias da W3Schools.com.

Para ver o texto original, visite:

http://www.w3schools.com/xhtml

Este artigo fornece alguns pontos sobre XHTML, como uma espécie de introdução.

O que é XHTML?

  • XHTML vem da expressão em inglês EXtensible HyperText Markup Language;
  • XHTML é quase idêntico ao HTML 4.01;
  • XHTML é uma versão mais rigorosa e mais "limpa" de HTML;
  • XHTML HTML é definido como uma aplicação XML;
  • XHTML é uma recomendação W3C.


XHTML é compatível com o HTML 4.01. Todos os navegadores suportam XHTML.

Por que usar/existir o XHTML?

Muitas páginas na Internet contém HTML "ruim". Fica estranho falar desse jeito, mas um exemplo simples mostra o que queremos dizer. O seguinte código HTML funcionará bem se você visualizar em qualquer navegador (mesmo que tal não siga as regras HTML):

<html>
<head>
<title> Isso é HTML ruim </ title>
<body>
<h1> Bad HTML
</body>
</html>

Aqui entra o XML. Sabemos que XML é uma linguagem de marcação, onde tudo deve ser indicado corretamente, resultando em documentos bem "formatados". Ainda podemos acrescentar que o XML é projetado para descrever dados, enquanto HTML é projetado para exibir dados.

Hoje encontramos diferentes tecnologias para navegar na net, onde alguns browsers são executados em computadores, enquanto outros estão em aparelhos móveis, como netbooks e smartphones. Este último, inclusive, talvez não tenha os recursos ou a capacidade de interpretar uma linguagem de marcação mal feita.

Por isso, combinando HTML e XML, e os seus pontos fortes, temos uma linguagem de marcação que é útil, agora e no futuro - o XHTML.

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 </p>).

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:

<b> <i> Este texto está em negrito e itálico </b> </i>

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

<b> <i> Este texto está em negrito e itálico </i> </b>

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:

<p> Este é um parágrafo
<p> Este é outro parágrafo

Já este trecho está ótimo:

<p> Este é um parágrafo </p>
<p> Este é outro parágrafo </p>

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

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

Escreva assim:

Uma quebra de linha: <br/>
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>
<P> Este é um parágrafo </P>
</BODY>

Agora o correspondente exemplo correto:

<body>
<p> Este é um parágrafo </p>
</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 é:

<html>
<head> ... </head>
<body> ... </body>
</html>

Um pouco de sintaxe

Assim como os elementos são escritos com letras minúsculas, os atributos dos elementos em XHTML também devem estar em minúsculas:

<table WIDTH="100%"> // ERRADO

<table width="100%"> // CORRETO

Outro ponto visto no exemplo acima, mas que deve ser usado como regra. Os valores do atributo devem estar entre aspas. Note que o 100% aparece assim, entre aspas.

O atributo "id"

Em HTML 4.01 tínhamos o atributo "name" para nomear algum elemento. No uso do XHTML, passamos a usar o atributo "id". Ou seja, o atributo "id" substitui o atributo "name".

Veja mais um exemplo:

<img src="picture.gif" name="pic1" /> // ERRADO

<img src="picture.gif" id="pic1" /> // CORRETO

Elementos obrigatórios em XHTML

Em todos os documentos XHTML devemos utilizar uma declaração DOCTYPE. Os elementos html, head, title, e body devem estar presentes obrigatoriamente.

Este é um documento XHTML, com o mínimo de tags exigidas:

<! DOCTYPE DOCTYPE aqui>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> O Título fica aqui </title>
</head>
<body>
</body>
</html>

A declaração DOCTYPE não é uma parte do próprio documento XHTML. Não é um elemento XHTML. Veremos mais detalhes sobre este "DOCTYPE" em um outro artigo, onde aprofundaremos o assunto.

Também é interessante notar que o atributo xmlns em <html> especifica o nome XML para um documento, e é algo necessário em arquivos XHTML. Portanto, basta incluir dessa forma e tudo ficará bem.

Bem, neste momento já temos o HTML 5 em funcionamento na Internet. Nem todos os navegadores estão prontos para ele. Mas isso fica para outro artigo.




Enviado por xKuRt em 19/02/2010 às 09:59


Itens relacionados

Web: back to basics (ou o que nunca deve ser esquecido)
Conceitos necessários para construir uma página
Esqueleto de um documento HTML - Parte 3: Outros elementos do HEAD
Migrando do HTML para o XHTML
HTML: O que é?
Aprenda a construir o seu próprio site
XHTML: O que é?
Vantagens de se usar XHTML
Esqueleto de um documento HTML - Parte 1: DOCTYPE
Básico de HTML

Listar todos itens relacionados

Avaliação

Avaliação desta publicação: 10.00; Total de avaliações: 2


Avaliar:


A avaliação de publicações é restrita a membros cadastrados e logados no nosso site.



Comentários

AvatarEnviado por cesinha em 26/04/2012 às 17:36

Muito bom,
gostei dos comparativos.

Nel_art's

--
Nel_art's

AvatarEnviado por rondsonlima em 19/02/2010 às 10:27

Parabéns pelo artigo!

Atenciosamente,
Rondson Lima


Envio de comentário:




  

Sexta, 19 de Setembro de 2014




Top 5 membros

Últimos membros online

  • 1em 19/09 às 04:07
  • nobioem 18/09 às 22:31
  • xKuRtem 18/09 às 19:55

Últimos membros cadastrados



Capa do livro
Dominando Joomla: Do Iniciante ao Profissional


Capa do livro
Gestão de Tecnologia da Informação - Governança de Ti - Arquitetura e Alinhamento entre Sistemas de Informação e o Negócio


Capa do livro
Final Cut Pro7 - O Guia Oficial





Hostnet

IMD