Ampliaciones

Esta lección contiene explicaciones ampliadas de algunos temas que se tratan en otras lecciones. Las he incluido aquí para aligerar las otras lecciones.

Variedades HTML / XHTML

Como se explica en la lección de historia de la web, el HTML no es un lenguaje de marcas único. Desde su creación en 1991, ha ido evolucionando en tres aspectos:

En las primeras versiones del HTML, el número de etiquetas (y atributos y valores de atributos) fue creciendo paulatinamente, pero manteniendo siempre la misma sintaxis y tipo MIME (text/html).

En 1997, la recomendación HTML 4 definió tres tipos de documentos (Strict, Transitional y Frameset) que mantenían la misma sintaxis y el mismo tipo MIME pero se distinguían en el número de etiquetas y atributos:

En el año 2000 el W3C desarrolló un nuevo tipo de HTML, el XHTML. En el XHTML se permitían las mismas marcas y atributos que en el HTML (se mantenían incluso los tres tipos de documentos Strict, Transitional y Frameset), pero con una sintaxis distinta (la sintaxis XHTML) y un nuevo tipo MIME, application/xhtml+xml.

Como los servidores suelen asociar el tipo MIME a la extensión de los ficheros, la costumbre es que los ficheros .html se sirvan con el tipo MIME text/html y los ficheros .xhtml se sirvan con el tipo MIME application/xhtml+xml.

La sintaxis XHTML seguía la norma XML y por tanto era más rigurosa, mientras que la sintaxis HTML era más laxa.

Nota: En la lección Diferencias entre HTML y XHTML se comentan las diferencias más importantes entre ambas sintaxis.

En el año 2000 el W3C se marcó como objetivo que el XHTML sustituyera completamente al HTML, pero en 2006, el W3C tuvo que reconocer el fracaso de ese proyecto. En mi opinión, el fracaso se debió a la combinación de dos problemas:

Estos dos problemas se refuerzan mutuamente. Por un lado, muchos documentos XHTML contienen errores, pero los autores de esos documentos no son conscientes de ello porque los navegadores los muestran correctamente. En realidad los navegadores los aceptan y los muestran porque se los han servido con el tipo text/html y los navegadores están hechos para conseguir mostrar páginas con HTML con errores (que es lo que les parecen esos documentos XHTML enviados con el tipo MIME text/html). Por otro lado, como muchos documentos XHTML contiene errores, los administradores de servidores no pueden entregarlos con el tipo MIME application/xhtml+xml porque los navegadores los rechazarían por incorrectos (a partir de Internet Explorer 9, incluso Internet Explorer admite el tipo MIME application/xhtml+xml).

Una vez reconocido el fracaso, desde el año 2006 el W3C volvió a trabajar de nuevo en el HTML. En 2014 se publicó una nueva versión de HTML, el HTML 5, que aborda de una nueva manera el problema de los tipos de documentos, las variantes de sintaxis y los tipos MIME.

Con respecto a los tipos de documentos, en HTML 5 han desaparecido los tipos de documentos Strict, Frameset y Transitional y sólo existe un tipo de documento, que es una especie de mezcla de los antiguos tipos Strict y Transitional:

Con respecto a las sintaxis, en HTML 5 se mantienen las dos sintaxis, HTML y XHTML.

Con respecto a los tipos MIME, los documentos con sintaxis HTML deben utilizar el tipo MIME text/html y los documentos con sintaxis XHTML deben utilizar el tipo MIME application/xhtml+xml.

Se empezó a elaborar una solución intermedia, el llamado marcado políglota, que permitiría utilizar la sintaxis XHTML en documentos servidos con el tipo MIME text/html, pero esta solución ha sido abandonada. El último borrador de recomendación, Polyglot markup, se ha publicado en septiembre de 2015 como nota del grupo de trabajo, como suele hacer el W3C con el trabajo abandonado.


Hasta 2014/15 en estos apuntes se recomendaba y trabajaba la versión XHTML 1.0 Strict (salvo aquellos en los que es necesario utilizar la versión XHTML 1.1). Desde un punto de vista pedagógico, considero que la rigidez de la sintaxis del XHTML es una ventaja. Creo que para una persona que está aprendiendo HTML, es más fácil entender un documento XHTML sin errores sintácticos que un documento HTML con errores (aunque se muestre correctamente en un navegador). El problema era que como en este curso no utilizaba servidores de páginas web, al abrir en el navegador los ficheros directamente del disco duro (sin alojarlos en un servidor), los ficheros se cargaban como text/html. Este problema lo resolvía gracias a que editor que utilizaba en clase (Amaya) validaba continuamente el documento y los alumnos sabían si estaban creando documentos XHTML correctos.

En el curso 2014/15 empecé a trabajar el HTML 5, por lo que tuve que dejar de utilizar Amaya, que no admite HTML 5. Decidí utilizar entonces la versión XHTML 5, pero acabé descubriendo que no había sido una buena elección. El editor que empecé a utilizar entonces (Brackets) no valida los documentos por sí mismo, sino que utiliza el validador del W3C, y ese validador no permite validar XHTML 5 en archivos que no están alojados en un servidor. Los alumnos no podían validar los documentos, algo imprescindible para saber si están cometiendo errores.

Por eso, en el curso 2015/16 decidí tomar una solución intermedia: trabajar HTML 5, pero incluyendo todos los elementos sintácticos del XHTML que sea posible. De esta manera, al crear documento HTML5 los alumnos podrán utilizar el validador del W3C mientras editan las páginas en Brackets, pero al utilizar la sintaxis XHTML los documentos serán más fáciles de analizar y comprender.

Nota: La lección sobre validación completa esta información.

Páginas básicas de diferentes versiones y variedades de HTML

Los ejemplos siguientes muestran páginas web básicas de algunas variedades del HTML, comentando sus diferencias más importantes.

Páginas web HTML 5 con sintaxis XHTML o con sintaxis HTML

Los ejemplos siguientes muestran dos páginas web básicas: una página HTML 5 con sintaxis XHTML y una página HTML 5 con sintaxis HTML.

HTML 5, sintaxis XHTML, tipo MIME text/html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>HTML 5</title>
  <link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
  <p>Esta página es HTML 5 válido.</p>
</body>
</html>

HTML 5, sintaxis HTML, tipo MIME text/html

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <title>HTML 5</title>
  <link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
  <p>Esta página es HTML 5 válido.
</body>
</html>

Las etiquetas que aparecen en ambos documentos son las mismas, las diferencias son simplemente sintácticas. Las diferencias entre la sintaxis HTML y la sintaxis XHTML se explican en la lección Diferencias entre HTML y XHTML.

Páginas web HTML 5 con sintaxis XHTML o XHTML 5

Los ejemplos siguientes muestran dos páginas web básicas: una página HTML 5 con sintaxis XHTML y una página XHTML 5.

HTML 5, sintaxis XHTML, tipo MIME text/html


<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="utf-8" />
  <title>HTML 5</title>
  <link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
  <p>Esta página es HTML 5 válido.</p>
</body>
</html>

XHTML 5, sintaxis XHTML, tipo MIME application/xhtml+xml

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>
<html lang="es" xmlns="https://www.w3.org/1999/xhtml">
<head>
  <meta charset="utf-8" />
  <title>XHTML 5</title>
  <link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
  <p>Esta página es XHTML 5 válido.</p>
</body>
</html>

Las etiquetas que aparecen en ambos documentos son las mismas, excepto la primera línea de la página XHTML 5 y los atributos de la etiqueta html:

Páginas web HTML 4.01 / XHTML 1.0

Los ejemplos siguientes muestran dos páginas web básicas: una página HTML 4.01 y una página XHTML 1.0.

HTML 4.01, sintaxis HTML, tipo MIME text/html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
  <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
  <TITLE>HTML 4.01</TITLE>
  <LINK REL="stylesheet" TYPE="text/css" HREF="estilo.css">
</HEAD>
<BODY>
  <P>Esta página es HTML 4.01 válido.
</BODY>
</HTML>

XHTML 1.0, sintaxis XHTML, tipo MIME application/xhtml+xml

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>XHTML 1.0</title>
  <link rel="stylesheet" type="text/css" href="estilo.css" />
</head>
<body>
  <p>Esta página es XHTML 1.0 válido.</p>
</body>
</html>

Las diferencias entre ambas versiones son similares a las diferencias entre HTML 5 y XHTML 5

La etiqueta <meta> que indica el juego de caracteres no es realmente una etiqueta HTML, sino una directiva pragma que equivale a la información de cabecera que enviaría el servidor al indicar el juego de caracteres.