Diferença entre XHTML e HTML

Para desenvolver em XHTML você deve seguir algumas regras:

Escrever todas as tags e atributos em letras minúsculas:

XML que deu origem ao XHTML é sensível ao tamanho de caixa de fonte, então com XHTML não é diferente. É obrigatório o uso de letras minúsculas ao escrever a sintaxe de elementos XHTML.
Exemplo:

• Errado:

<H1>Título principal</H1>
<P> Parágrafo de exemplo</P>
<td COLSPAN=”3”>

• Certo:

<h1>Título principal</h1>
<p> Parágrafo de exemplo</p>
<td colspan=”3”>

Aninhar as tags:

A primeira tag a ser aberta dever ser a última a ser fechada, a segunda tag é a penúltima e assim por diante.
Exemplo:

• Errado:

<div><p><em>Texto em destaque</div></p></em>

• Certo:

<div><p><em>Texto em destaque</em></p></div>

Fechar todas as tags abertas:

Toda tag que for aberta deve ser fechada, diferentemente do que ocorre com HTML. Em HTML podemos omitir a tag de fechamento, por exemplo, nas tags.

<p> e <li>

Exemplo:

• Errado:

<p>Parágarfo sem tag de fechamento.
<li>Um item da lista sem tag de fechamento

• Certo:

<p>Parágarfo com tag de fechamento.</p>
<li>Um item da lista com tag de fechamento</li>

Fechar elementos vazios:

Elementos vazios dever ter uma tag de fechamento ou a tag de abertura dever terminar com />
Exemplo:

• Errado:

<hr>
<br>
<img src=”foto.jpg” alt=”minha foto”>

• Certo:

<hr></hr>
<br></br>
<img src=”foto.jpg” alt=”minha foto”></img>

Como vimos acima podemos usar a tag de fechamento ou usar a terminação com barra como mostrado abaixo.

<hr />
<br />
<img src=”foto.jpg” alt=”minha foto” />

Procure adotar a opção de terminação com barra, assim terá um código menor e mais limpo.

Colocar valores dos atributos entre “ “:

Todos os valores de atributos devem ficar entre aspas, independente de ser texto ou número.
Exemplo:

• Errado:

 <td colspan=3>

• Certo:

<td colspan=”3”>

Escrever a sintaxe para atributos:

A sintaxe para atributos dever ser escrita com nome e valor.
Exemplo:

• Errado:

<input checked />

• Certo:

<input checked=”checked” />

Usar id ao invés de name:

O atributo name está em desuso e possivelmente será excluído das próximas versões do XHTML.
Exemplo:

• Errado:

<img src=”foto.jpg” alt=”minha imagem” name=”foto” />

• Certo:

<img src=”foto.jpg” alt=”minha imagem” id=”foto” />

Isso vale também para links internos, âncoras. Em XHTML use o atributo id no lugar de name.
Use:

<a id=”topo”>Topo</>

Ao invés de:

<a name=”topo”>Topo</>

OBS: Em documentos nos quais você precise de compatibilidade entre navegadores antigos, use ambos atributos, como mostrador abaixo.

<a id=”topo” name=”topo”>Topo</>
<img src=”foto.jpg” alt=”minha imagem” id=”foto” name=”foto” />

Atributo alt para imagens:

O uso do atributo alt é obrigatório. No caso de uma imagem que esteja fazendo um papel decorativo, use o atributo alt vazio, apenas dê um espaço entre as aspas.
Exemplo:

<img src=”foto.jpg” alt=”minha imagem” />
<img src=”barra_lateral.jpg” alt=” ” />

Bloco de comentários:

É comum o uso de comentários para marcar trechos de código. E também é comum o uso de uma seqüência de caracteres, dentro da tag de comentário, para destacar mais o comentário.
Evite o uso do clássico tracejado (-). Alguns navegadores mais antigos podem encontrar dificuldade na interpretação da seqüência desse caractere. Use sinais de iguais (=) ou a letra xis (x).
Exemplo:

• Errado:

<!--- ----------------------------------- menu lateral ----------------------------------- -->

• Certo:

<!-- ==================== menu lateral ====================== -->