Veja a diferença entre Html e Xhtml.
<html>
<head>
<title>Untitled Document</title>
</head>
<body>
<h1>Exemplo de HTML</h1>
<img src="imagem.jpg" width="100" height="100"><br>
<hr>
<form>
<input type="checkbox" name="teste1" checked>Teste 1<br />
<input type="checkbox" name="teste2">Teste 2
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<body>
<h1>Exemplo de XHTML</h1>
<img src="imagem.jpg" width="100" height="100" /><br />
<hr />
<form>
<input type="checkbox" name="teste1" checked="checked" />Teste 1<br />
<input type="checkbox" name="teste2" />Teste 2
</form>
</body>
</html>
Este tutorial tem por objetivo descrever o que é, para que serve e porque adotar a linguagem de marcação XHTML, apresentando seus aspectos estruturais e semânticos, bem como ressaltando as vantagens do seu uso.
Todas as linguagens de marcação da web são baseadas em SGML, uma metalinguagem complexa, projetada para máquinas com a finalidade de servir de base para criação de outras linguagens. O SGML foi usado criar XML (Extensible Markup Language), também uma metalinguagem, porém bem mais simples.
Com XML você cria suas próprias tags e atributos para escrever seu documento web. Isto significa que é você quem cria sua linguagem de marcação. XHTML foi criado dentro deste conceito e por isso é uma aplicação XML. As tags e atributos do XHTML foram criadas ("inventadas") aproveitando-se as nossas conhecidas tags e atributos do HTML 4.01 e suas regras.
Conclui-se que ao usar XHTML, estamos escrevendo um código XML, onde as tags e atributos já estão definidas e isto proporciona todos os benefícios de XML sem as complicações e complexidade do SGML.
XHTML é uma linguagem de marcação bastante familiar para quem conhece HTML e a transformação de um documento existente de HTML para XHTML é uma tarefa bem simples, como veremos adiante.
XHTML é a sigla em inglês para EXtensible HyperText Markup Language que em português resulta em Linguagem Extensível para Marcação de Hipertexto, uma aplicação XML, escrita para substituir o HTML e nada mais é do que um HTML "puro, claro e limpo".
Enumeram-se várias e efetivas vantagens de se usar XHTML nos novos documentos web produzidos ou migrar os documentos atuais escritos em HTML. E, dentre elas destaca-se em primeiro plano a compatibilidade da linguagem XHTML com as futuras aplicações de usuários, garantindo desde já que as criações XHTML conservar-se-ão estáveis por longos anos. A tendência é a de que futuras versões de browsers e agentes de usuários em geral, deixem de suportar elementos e atributos já em desuso ("deprecated") segundo as recomendações do W3C, bem assim como antigos e ultrapassados esquemas e esboços do HTML.
XHTML é a linguagem da web do futuro desde já a disposição de projetistas e desenvolvedores web.
XHTML é um código consistente que dispensa uso de "truques" e "hacks" para contornar "bugs".
Editar um código XHTML existente é uma tarefa bem simples por se tratar de uma escrita limpa e evidente.
O tempo de carregamento de uma página XHTML é mais rápido pois os browsers tem a interpretar uma página limpa sem ter que interpretar e decidir sobre renderização de erros de código.
Uma página XHTML é mais acessível aos browsers e aplicações de usuário padrão incrementando a interoperabilidade e a portabilidade dos documentos web.
Uma página XHTML é totalmente compatível com todas as aplicações de usuários para HTML, antigas e já ultrapassadas.
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 e é uma "Web Standard".
Tradução para o português da Recomendação W3C de 26 de janeiro de 2000, revisada em 1 de agosto de 2002 - XHTML™ 1.0 The Extensible HyperText Markup Language (Segunda Edição) - Uma reformulação do HTML 4 em XML 1.0
As principais diferenças são:
A metalinguagem XML é sensível ao tamanho de caixa da fonte. De vez que XHTML é uma aplicação XML, também é sensível ao tamanho de caixa e deve ser usada caixa baixa, ou seja, letras minúsculas.
Errado:
<DIV><P>Aqui um texto</P></DIV>
Certo:
<div><p>Aqui um texto</p></div>
Errado:
<div><em><p>Aqui um texto negrito</em></p></div>
Certo:
<div><em><p>Aqui um texto negrito</p></em></div>
Um documento diz-se bem formado quando está estruturado de acordo com as regras definidas nas Recomendações para XML 1.0 [ XML ].
Todos os elementos XHTML devem estar corretamente aninhados dentro do elemento raiz <html>.
A estrutura básica do documento deve ser conforme abaixo:
<html> <head> ... </head> <body> ... </body> </html>
Em HTML é permitido para determinados elementos, omitir-se a tag de fechamento. XML não permite omissão de qualquer tag de fechamento.
Errado::
<p>Um parágrafo.<p>Outro parágrafo.
Certo:
<p>Um parágrafo.</p><p>Outro parágrafo.</p>
Elementos vazios devem ter uma tag de fechamento ou a tag de abertura deve terminar com />. Como exemplo, <br /> ou <hr></hr>.
Errado: Elementos vazios sem terminação
<br> <hr> <img src="imagem.gif" alt="minha imagem ">
Certo: Elementos vazios com terminação
<br /> <hr /> <img src="imagem.gif" alt="minhaimagem " />
Assim como as tags, os atributos também são sensíveis ao tamanhon de caixa e então deve-se escrever nomes de atributos em minúsculas;
Errado:
<td ROWSPAN="3">
Certo:
<td rowspan="3">
Os valores de atributos devem estar entre "aspas";
Errado:
<td rowspan=3>
Certo:
<td rowspan="3">
A sintaxe para atributos deve ser escrita por completo;
Errado:
<input checked />
Certo:
<input checked="checked" />
Abaixo uma relação dos atributos que se enquadram nesta recomendação
compact compact="compact"
checked checked="checked"
declare declare="declare"
readonly readonly="readonly"
disabled disabled="disabled"
selected selected="selected"
defer defer="defer"
ismap ismap="ismap"
nohref nohref="nohref"
noshade noshade="noshade"
nowrap nowrap="nowrap"
multiple multiple="multiple"
noresize noresize="noresize"
O HTML define o atributo name para os elementos a, applet, form, frame, iframe, img , e map . HTML também introduziu o atribute id . Ambos os atributos foram projetados para serem usados como identificadores.
Em XML, os identificadores são exclusivamente do tipo ID, e poderá existir somente um atributo do tipo ID por elemento. Além disso um determinado identificador deve ser único no documento. Documentos XHTML 1.0 compatíveis com XML e bem estruturados, DEVEM usar o atributo id ao definir identificadores para os elementos listados acima.
Notar que em XHTML 1.0, o atributo name destes elementos está formalmente em desuso e possivelmente será excluido nas versões futuras de XHTML.
Errado:
<img src="imagem.gif" name="minha_imagem" />
Certo:
<img src="imagem.gif" id="minha_imagem" />
Nota: Por razões de compatibilidade com browsers antigos você pode usar ambos os atributos como abaixo:
<img src="imagem.gif" id="minha_imagem" name="minha_imagem" />
Use o atributo lang destina-se a definir a língua em que foi escrito o documento HTML e o atributo xml:lang para definir a língua em que foi escrito o documento XML.
Em HTML para criar um ponto de âncora, associamos um nome ao elemento <a>:
<p><a name="topo" >Início</a > do parágrafo..bla...</p>
Em XHTML adicione o atributo id:
<p><a id="topo" name="topo" >Início</a > do parágrafo..bla...</p>
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 =" " />
É 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
Errado:
<!-- Aqui começa o menu -->
<!-- -------------------------------------------- -->
código XHTML do menu
<!-- -------------------------------------------- -->
Certo:
<!-- Aqui começa o menu -->
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
código XHTML do menu
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
Cuidado com os códigos gerados por editores!
Este é um código gerado por editor: onMouseOver=function() não válido em XHTML
Errado:
onMouseOver=function()
Certo:
onmouseover=function()
Codifique o & ( e comercial)
Errado:
Comércio & Exportação
Certo:
Comércio & Exportação
É obrigatório a declaração do DOCTYPE assim como a existências dos elementos <html> <head> <title> e <body>
Um modelo mínimo de documento XHTML é conforme abaixo:
<!DOCTYPE bla..bla..bla>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Título do odcumento</title>
</head>
<body> Conteúdo do documento
</body>
</html>
A declaração DOCTYPE não faz parte da marcação XHTML e como tal não é também um elemento, razão pela qual não há necessidade de tag de fechamento.
A Definição do tipo de documento (Document Type Definitions DTD) especifica qual é a sintaxe SGML usada no documento. A DTD é usada pelas aplicações SGML ( tais como HTML ) para identificar as regras que se aplicam a 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.
O DOCTYPE deve ser sempre a primeira declaração em um documento web.
São três os tipos de DOCTYPE para XHTML:
<XHTML; 1.0 Strict <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
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
<XHTML; 1.0 Transitional <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
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 browsers sem suporte para CSS. Não admite qualquer tipo de marcação para frames.
<XHTML; 1.0 Frameset <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML; 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Esta declaração permite tudo da declaração transational e mais os elementos especificos para frames.
W3C disponibiliza um validador gratuito para documentos XHTML. Ali, você digita a URL ou o caminho para o arquivo no seu HD e um robo 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:
Está página que você está lendo foi validada no W3C.
Comprove clicando no alerta de validação abaixo:
Sempre é bom saber pequenas
coisas que nos ajudam a obter um código< limpo, apropriado e
ajustado às normas que são utilizadas hoje em dia. 1- Colocar elementos de bloco dentro de elementos de linhaERRADO<a href="#"><h2>Está errado</h2></a> CERTO <h2><a href="#">Está certo</a></h2> 2- Não incluir atributos ALT em imagensERRADO<img src="imagem.jpg" /> CERTO <img src="imagem.jpg" alt="Imagem de exemplo" /> 3- Não utilizar listas cuando é necessárioERRADO<p> Item 1<br /> Item 2<br /> Item 3<br /> Item 4<br /> Item 5<br /> </p> CERTO <ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> </ul> 4- Usar <b> e <i> para negrito e itálicoERRADO<b>Texto em negrito</b>, <i>Texto em itálico</i>, CERTO <strong>Texto em negrito</strong> <em>Texto em itálico</em> 5- Usar quebras de linha demasiadamenteERRADOExemplo de múltiplos divisores<br /> Ajuda<br /> Ajuda<br /> CERTO <p>Exemplo de divisor correto</p> <p>Ajuda</p> 6- Utilizar as tag de tachado e sublinhado de forma incorretaERRADO<strike>Tachado</strike> <u>Sublinhado</u> CERTO <del>Tachado</del> <ins>Sublinhado</ins> 7- Utilizar estilização dentro do HTMLERRADO<h2 style="color: blue"> CERTO Fazer toda a estilização utilizando folhas de estilo 8- Inserir ou remover bordas dentro do HTMLERRADO<img src="#" alt="" border="0" /> CERTO Fazer a remoção ou inserção através de folhas de estilo 9- Não utilizar tags de cabeçalhoERRADO<p><strong>Título</strong></p> <p>Uso errado</p> CERTO <h3>Título</h3> <p>Uso correto</p> 10- Usar tags como <blink> ou <marquee>ERRADO<blink>Veja isto</blink> <marquee>Veja isto</marquee> CERTO Não utilize, crie os mesmos efeitos utilizando javascript, jquery, etc... |