Diferencias entre HTML y XHTML. HTML. Páginas web HTML y hojas de estilo CSS. Bartolomé Sintes Marco. www.mclibre.org

HTML y XHTML son las dos variantes que existen en el lenguaje HTML 5. Las diferencias entre esas dos variantes son básicamente sintácticas: la sintaxis HTML está inspirada en la norma SGML (aunque no la cumple estrictamente), mientras que la sintaxis XHTML está basada en la recomendación XML (aunque tampoco la cumple estrictamente).

En general, la sintaxis XHTML es más "estricta", en el sentido de imponer restricciones en la forma de escribir etiquetas, atributos o valores, mientras que la sintaxis HTML es más "flexible".

Si un documento contiene errores de sintaxis (HTML o XHTML) se dice que es un documento inválido. Si las páginas web se sirven al navegador como application/xhtml+xml, el navegador debe rechazar las páginas inválidas, pero si se sirven al navegador como text/html, los navegadores intentan mostrar el documento aunque contenga errores. Aunque los navegadores a menudo consiguen mostrar documentos inválidos, se aconseja validar y corregir los documentos para asegurar que los navegadores puedan mostrarlos correctamente.

En esta lección se comentan algunas de las diferencias entre las sintaxis HTML y XHTML. En casi todos los casos se puede escribir código válido para ambas sintaxis.

Generalidades

En XHTML para que un documento se muestre en el navegador tiene que ser "bien formado", es decir, tiene que cumplir todas las reglas sintácticas. En HTML, los documentos se muestran en el navegador aunque contengan errores sintácticos (la visualización puede ser correcta o incorrecta, dependiendo del tipo de errores de la página).
En XHTML no puede haber texto no incluido en alguna etiqueta, pero en HTML puede haberlo:
```
AAAA
BBBB
CCCC
```
En XHTML, los nombres de elementos y atributos deben escribirse en minúsculas. En HTML no es necesario.
```
AAAA
```
```
AAAA
```
```
AAAA
```
En XHTML, las referencias a entidades en hexadecimal deben escribirse en minúsculas. En HTML se pueden escribir en minúsculas o mayúsculas.
```
&#x3b1; &#x3b2; &#x3c0;
```
```
&#X3b1; &#X3b2; &#X3c0;
```
Para evitar problemas con los caracteres "<" y "&", en XHTML el código javascript (y de estilo) se suele incluir en secciones CDATA. En HTML no es necesario:
```
<script type="text/javascript">
 <![CDATA[
 ... unescaped script content ...
 ]]>
</script>
```

Elementos (etiquetas)

Los documentos XHTML tienen que tener un único elemento raíz de todo el documento, el elemento <html>. Los documentos HTML pueden no tenerlo.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>HTML</title>
</head>
<body>
  <!-- contenido de la página -->
</body>
</html>

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>HTML</title>
</head>
<body>
  <!-- contenido de la página -->
</body>

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>XHTML</title>
</head>
<body>
  <!-- contenido de la página -->
</body>
</html>

En XHTML, los elementos no vacíos (los que tienen etiqueta de apertura) deben tener etiqueta de cierre. En HTML no es necesario.
```
AAAA
BBBB
```
```
AAAA
BBBB
```
En XHTML, la etiqueta de apertura de los elementos vacíos debe acabar en " />" o debe haber una etiqueta de cierre. En HTML no puede haber etiqueta de cierre.
Las etiquetas vacías (void) de HTML son <area>, <base>, , <col>, <embed>, <hr>, <img>, <input>, <link>, <meta>, <param>, <source>, <track> y .
```
<hr />
```
```
<hr></hr>
```
```
<hr>
```
El cierre de las etiquetas vacías en XHTML puede tener o no un espacio delante. En la recomendación XHTML 1.0 se recomendaba dejar un espacio delante por compatibilidad con algunos navegadores (por ejemplo, Netscape 4.8), pero seguramente hace años que esos navegadores han desaparecido del mercado.
```
<hr />
```
```
<hr/>
```
El elemento <pre> no puede contener elementos <img>, <object>, <big>, , o .
```
<pre>x2</pre>
```
Nota: El validador del W3C dice que el ejemplo es anterior es correcto en XHTML pero la recomendación dice claramente que no lo es (apéndice B de la recomendación XHTML 1.0).
El elemento <label> no puede contener elementos <label>.
```
<label><label><input type="checkbox" name="casilla" />Casilla 1</label></label>
```
Nota: El validador del W3C dice que el ejemplo es anterior es correcto en XHTML, pero la recomendación dice claramente que no lo es (apéndice B de la recomendación XHTML 1.0).

Atributos

En XHTML, los atributos deben tener siempre valor (en el caso de atributos booleanos, el valor debe ser el propio nombre del atributo o una cadena vacía). En HTML, los atributos pueden no tener valor asignado.
```
<ol reversed="reversed">
 <li>AAA</li>
 <li>BBB</li>
</ol>
```
```
<ol reversed="">
 <li>AAA</li>
 <li>BBB</li>
</ol>
```
```
<ol reversed>
 <li>AAA</li>
 <li>BBB</li>
</ol>
```
En XHTML los valores de los atributos deben escribirse en minúsculas. En HTML se pueden escribir en minúsculas o mayúsculas.
```
<input type="text" />
```
```
<input type="TEXT" />
```
En XHTML, los valores de los atributos deben escribirse entre comillas (dobles o simples). En HTML no es necesario si no hay espacios en blanco.
```
AAAA
```
```
AAAA
```
```
AAAA
```
```
AAAA
```
```
AAAA
```