XHTML:
eXtensible Hyper Text Markup Language, es el lenguaje de marcas
pensado para sustituir a HTML como estándar para
las páginas web. XHTML es la versión XML de HTML,
por lo que tiene, básicamente, las mismas funcionalidades de
HTML, pero cumple las especificaciones, más estrictas, de XML. Su
objetivo es avanzar en el proyecto del World Wide Web Consortium de
lograr una web semántica, donde la información y la forma de presentarla
estén claramente separadas. En este sentido, XHTML serviría únicamente
para transmitir la información que contiene un documento, dejando para
las hojas de estilo su aspecto y diseño.
El complemento ideal de XHTML es CSS para definir
la representación del contenido.
DOCTYPE más usuales para HTML y XHTML:
- <!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
- <!DOCTYPE HTML
PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
- <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Algunas diferencias entre HTML y
XHTML:
La siguiente lista muestra algunas reglas de XHTML que lo diferencian
de HTML. Muchas de estas diferencias son por el
cambio de ser del SGML a una aplicación del más estricto XML:
.- No están permitidos los atributos "height" y "background"
en la etiqueta "table":
Incorrecto:
<table height="120" background="url">
Correcto:
<table style="height: 120px; background-image: url('url');">
.- No está permitido el atributo "border" en la etiqueta
"table" o "img":
Incorrecto: <table
border="1"> o <img border="0">
Correcto:
<table style="border: 1px solid;"> o <img style="border: 0px">
.- No está permitido el atributo "target" en la etiqueta "a":
Incorrecto: <a target="_blank" href="url">
Correcto: <a onclick="this.target='_blank'" href="url">
.- No está permitido el atributo "align" en la etiqueta "img":
Incorrecto: <img src="url" align="right" />
Correcto: <img src="url" style="float: right;" />
.- No está permitido el atributo "align" en la etiqueta "p":
Incorrecto: <p align="center">texto</p>
Correcto: <div style="text-align: center;">texto</div>
.- El símbolo & (ampersand) debe ser usado únicamente como
parte de una entidad.
Incorrecto: Cars &
houses o <a src="url?id=1&cat=2">Category 2</a>
Correcto: Cars & houses o <a
src="url?id=1&cat=2">Category 2</a>
.- Los elementos anidados deben tener un correcto orden de
apertura/cierre LOFC.
Incorrecto:
<em><strong>Texto</em></strong>
Correcto:
<em><strong>Texto</strong></em>
.- Se debe siempre especificar texto alternativo para imágenes
(atributo "alt" en etiqueta "img").
Incorrecto: <img src="url" />
Correcto:
<img src="url" alt="texto alternativo" />
.- No se debe insertar elementos de bloque dentro de elementos
de línea.
Incorrecto:
<em><h2>Título</h2></em>
Correcto:
<h2><em>Título</em></h2>
.- Los valores de los atributos deben siempre ir encerrados entre
comillas (simples o dobles).
Incorrecto:
<td rowspan=3>
Correcto: <td
rowspan="3"> o <td rowspan='3'>
.- Los nombres de elementos y atributos deben ir en minúsculas.
Incorrecto: <A HREF="url">Texto</A>
Correcto: <a href="url">Texto</a>
.- No está permitida la minimización de atributos (usar el
nombre del atributo como valor).
Incorrecto:
<textarea readonly>Solo-lectura</textarea>
Correcto: <textarea readonly="readonly">Solo-lectura</textarea>
.- Los atributos obsoletos en HTML no forman parte de XHTML
Incorrecto: <font color="#0000FF">Blue text</font>
Correcto: <span style="color: #0000FF;">Blue text</span>
.- Los elementos vacíos deben cerrarse siempre:
Incorrecto: <br>
Correcto:
<br></br> o <br/> o <br />
Nota: Cualquiera de las tres formas
es válida aunque se recomienda <br /> por compatibilidad.
.- Los elementos no vacíos también deben cerrarse siempre:
Incorrecto: <p>Primer párrafo<p>Segundo párrafo
Correcto: <p>Primer párrafo</p><p>Segundo párrafo</p>