« Inauguração do Blog
Paleta de Cores »
Publicado em: 2006-03-14 — 24.406 visualizacoes
O que é XHTML ?
XHTML é uma reformulação do HTML 4 como aplicação XML 1.0.
Não serão mais lançadas versões do HTML, mas isto não significa que o HTML morreu, até porque os "zilhares" de sites escritos com HTML devem e vão continuar funcionando por muitos anos ainda.
Embora eu considere que projetar usando XHTML é um avanço em direção ao futuro a escolha é sua. Neste tutorial você verá como é fácil XHTML.
De onde veio XHTML ?
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.
Qual a finalidade do XHTML ?
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".
Vantagens de se usar XHTML
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 suá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 é uma "Web Standard"
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
todas as tags devem ser escritas em letras minúsculas;
os elementos (tags) devem estar convenientemente aninhados;
os documentos devem ser bem formados;
o uso de tags de fechamento é obrigatório;
elementos vazios devem ser fechados;
diferenças para os atributos.
A metalinguagem XML é case-sensitive (sensível ao tamanho da letra). De vez que XHTML é uma aplicação XML, também é case-sensitive.
<DIV><P>Aqui um texto</P></DIV>
Os elementos (tags) devem estar convenientemente aninhados
<div><em><p>Aqui um texto negrito</em></p></div>
<div><em><p>Aqui um texto negrito</p></em></div>
Os documentos devem ser bem formados
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:
O uso de tags de fechamento é obrigatório
Em HTML é permitido para determinados elementos, omitir-se a tag de fechamento. XML não permite omissão de qualquer tag de fechamento. Todos os elementos, excetuados aqueles vazios declarados nas DTD, tem que ter tag de fechamento. Os elementos vazios declarados nas DTD podem ter tag de fechamento ou usar uma abreviação para elemento vazio conforme veremos adiante.
Errado::
<p>Um parágrafo.<p>Outro parágrafo.
<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
<img src="imagem.gif" alt="minha imagem ">
Certo: Elementos vazios com terminação
<img src="imagem.gif" alt="minhaimagem " />
Diferenças para os atributos
Assim como as tags, os atributos também são case-sensitive
então deve-se escrever nomes de atributos em minúsculas;
Os valores de atributos devem estar entre "aspas";
Sintaxe dos atributos
A sintaxe para atributos deve ser escrita por completo;
Abaixo uma relação dos atributos que se enquadram nesta recomendação
Os atributos id e name;
O HTML 4 define o atributo name para os elementos a, applet, form, frame, iframe, img, e map. HTML 4 também introduziu o atribute id. Ambos estes atributos foram projetados para serem usados como identificadores.
Em XML, os identificadores são do tipo ID, e poderá existir somente um atributo do tipo ID por elemento. Assim, em XHTML 1.0 o atributo id é definido como do tipo ID. 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 será excluido nas versões futuras de XHTML.
<img src="imagem.gif" name="minha_imagem" />
<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"
O atributo lang;
Use o atributo lang para definir a lingua em que foi escrito o documento e o atributo xml:lang para definir a lingua em que foi escrita a versão do XML
Pontos de âncoras
Em HTML para criar um ponto de âncora, associamos um nome ao elemento <a>:
<p><a name="topo" >Início</a > do rágrafo..bla...</p>
Em XHTML adicione o atributo id:
<p><a id="topo" name="topo" >Início</a > do parágrafo..bla...</p>
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 ====
<!-- Aqui  começa o menu -->
código XHTML do menu
<!-- Aqui começa o menu -->
<!-- xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
Códigos gerados por editores
Cuidado com os códigos gerados por editores!
Este é um código gerado por editor: onMouseOver=function() não válido em XHTML
onMouseOver=function()
Caracter & (ampersand)
Codifique o & ( e comercial)
Comércio & Exportação
Comércio &amp; Exportação
Elementos obrigatórios em um documento XHTML
É obrigatório a declaração do DOCTYPE assim como a existência dos elementos:
<html> <head> <title> e <body>
Um modelo mínimo de documento XHTML é conforme abaixo:
<!DOCTYPE bla..bla..bla>
<title>Título do odcumento</title>
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.
Para que serve o DOCTYPE ?
O DOCTYPE deve ser sempre a primeira declaração em um documento web.
Os tipos de DOCTYPE
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.
Validação do documento XHTML
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:
Validador XHTML do W3C
Comente abaixo, ou link para https://www.maujor.com/blog/2006/03/14/tutorial-xhtml/trackback no seu site.
9 comentários na matéria: "Tutorial XHTML"
guilherme disse: 2011 - 01 - 23 18:49 GMT
valeu pelo tutorial Maujor,me ajudou muito a entender passo a passo sobre o xhtml.
Maujor disse: 2009 - 09 - 16 17:43 GMT
*não se deve colocar um elemento de bloco dentro de um elemento de linha*b – Correto.
*se eu quiser, posso fechar as tags no HTML 4.01?* Pode.
Hugo Fittipaldi disse: 2009 - 09 - 15 18:35 GMT
Boa tarde Maujor,
Um adendo e uma dúvida.
Um adendo: no caso de elementos aninhados não se deve colocar um elemento de bloco dentro de um elemento de linha, correto? ([div][em][p]Aqui um texto negrito[/p][/em][/div]).
Agora a dúvida: se eu quiser, posso fechar as tags no HTML 4.01?
Munir disse: 2008 - 04 - 1 12:07 GMT
Precisava saber o que seria uma linguagem de desenvolvimento web,como funciona e se possível,alguns exemplos
hudson gaspar da silva disse: 2006 - 10 - 3 19:56 GMT
reparei que esta linguagem de marcação é bem rigorosa a abertura e fechamentos de tags HTML. muito bacana este tipo de linguagem porem um puoco rigorosa com algumas mudanças de parâmetros mas acho que vou começar a adota-la para as minhas paginas futuras de HTML pois acredito que esse tipo de linguagem vai dar outra cara para meu codigo HTML.
ops XML
Samuel Pismel disse: 2006 - 03 - 27 1:10 GMT
Parabens bixo, ótima materia sobre xhtml ;]
Leonardo disse: 2006 - 03 - 19 4:42 GMT
Gosto muito das materias do site, elas tem me ajudado muito!
Agora, só pra tirar uma duvida, o blog será utilizado para responder perguntas destinadas as materias?
Paulo Junior disse: 2006 - 03 - 17 16:22 GMT
Venho te dar os parabéns Mauricio, graças a seus artigos publicados no maujor e agora no blog estou iniciando bem o estudo do desenvolvimento web com qualidade.
Reginaldo Gomes Alves disse: 2006 - 03 - 17 13:28 GMT
Parabens Mauricio, muito bom seu Blog. Venho acompanhando seu trabalho ja algum tempo e com certeza essa sera mais uma fonte de estudo para nos desenvolvedores. Agradeço pelos artigos divulgados no site Maujor e agora aqui no Blog, pois aprendi muito atraves dele e com certeza e uma das melhores referencias em web standards.