DOCTYPE html: definición y ejemplos

En el código fuente de los documentos y subpáginas HTML, la etiqueta <!DOCTYPE html> debe encontrarse al principio. Gracias a DOCTYPE se puede saber a primera vista de qué tipo de documento se trata. Si el documento no tiene la etiqueta se pueden producir errores de visualización en tu web.

Hosting
El hosting como nunca lo habías visto
  • Rápido, seguro, flexible y escalable
  • Certificado SSL/DDoS incluido
  • Dominio y asesor personal incluidos

¿Qué es DOCTYPE html?

Cualquiera que trabaje con documentos HTML ya conoce la etiqueta <!DOCTYPE html>. Aunque no es una de las etiquetas HTML clásicas, DOCTYPE html debe aparecer al principio de los documentos HTML, incluso antes del propio código fuente. DOCTYPE indica qué tipo de documento debe abrir el navegador y qué sintaxis y gramática utiliza su código fuente. A menudo la etiqueta se olvida, aunque esta sea uno de los elementos más importantes de un documento HTML. Dado que hoy en día su presencia se da por hecho, no debemos olvidar de indicar el tipo de documento de cada página con <!DOCTYPE html>. Los mejores editores de HTML ofrecen una comprobación de errores que nos indican las líneas DOCTYPE que faltan.

Consejo

Mientras que la etiqueta DOCTYPE especifica el tipo de documento, la etiqueta HTML denominada HTML div sirve como un contenedor vacío sin significado semántico que puede ser rellenada libremente con scripts y CSS para el diseño de la web.

¿Para qué sirve DOCTYPE html?

La tarea de DOCTYPE html es explicar a los programadores y navegadores, a primera vista, de qué Document Type Definition (DTD) se trata y cómo debe renderizarse la web. El DTD indica qué lenguaje de código se utiliza en la página o en el documento HTML. Esto se aplica, por ejemplo, a los archivos HTML, XHTML, SVG, MathML o XML. Cualquiera que aprenda HTML y quiera crear un sitio web debería por tanto insertar <!DOCTYPE html> al principio.

Si la web no tiene la etiqueta DOCTYPE, puede mostrar errores. El motivo es que los navegadores, a falta de la etiqueta <!DOCTYPE html> cambian automáticamente al “modo Quirks”. Con ello se pretende mantener la compatibilidad con versiones anteriores y la capacidad de visualización de las distintas páginas web sin el estándar de código actual. Al mismo tiempo, sin embargo, esto puede llevar a una visualización inexacta a pesar del código actual, ya que los navegadores se adhieren a elementos de código no válidos y obsoletos.

Nota

Debido a que <!DOCTYPE html> no es una etiqueta HTML típica en el propio sentido de la palabra, no existe una etiqueta HTML de cierre con un símbolo “menor que” y una barra oblicua (

¿Qué tipos de DOCTYPE html existen?

Dado que DOCTYPE html en HTML5 no nace del lenguaje SGML, su redacción es muy fácil de recordar. No requiere mayúsculas ni minúsculas y se coloca directamente antes de la primera etiqueta HTML en la primera línea del documento HTML. Toda la información que necesita un navegador sobre el tipo de documento y su visualización tiene un aspecto parecido al siguiente:

<!DOCTYPE html>

Ejemplos de código para versiones anteriores de HTML

En los documentos que aún utilicen versiones anteriores de HTML, como HTML4 o XHTML, DOCTYPE tiene un aspecto bastante más complejo o, más bien, engorroso. Es por eso mismo que en versiones anteriores de HTML incluso los programadores más experimentados suelen copiar y pegar el código enrevesado al documento en cuestión. La mayor complejidad se debe a que HTML4 y los lenguajes de código más antiguos todavía se basan en el predecesor de HTML, el SGML (Standardized Generalized Markup Language), y los navegadores requieren una definición exacta del tipo de documento.

En los lenguajes de código anteriores a HTML5 se utilizan las siguientes etiquetas DOCTYPE al principio de los documentos HTML:

XHTML 1.0 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML 1.0 Transitional:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Loose//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-loose.dtd">

XHTML 1.1 Strict:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Por cierto, la etiqueta DOCTYPE para los eBooks con el formato EPUB2, así como para los formatos eBook más antiguos, también se sigue haciendo en XHTML 1.1 Strict al comienzo del documento XHTML.

HTML 4.01 Strict:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML 4.01 Transitional:

Nota

A diferencia de HTML5 y sus predecesores, se recomienda que el formato SVG, tanto antes como después de SVG 1.2, no incluya una etiqueta DOCTYPE, ya que a partir de SVG 1.2 ya no se utiliza ningún DTD.

Por qué DOCTYPE html es importante

Como norma, no es obligatorio incluir la etiqueta de DOCTYPE html, por tanto, también puede omitirse en los documentos HTML. No obstante, el indicar del tipo de documento se considera una práctica estandarizada, aunque no oficial. Al revisar el documento HTML, si falta la etiqueta, se detectará automáticamente el error. Si el navegador no puede reconocer con certeza la gramática y la sintaxis utilizada, puede que se produzcan errores de visualización e incluso que la funcionalidad de la web se vea afectada.

Especialmente importante: DOCTYPE no solo debe aparecer al principio del código fuente de un proyecto web. Toda subpágina independiente en el documento HTML asociado debe tener su correspondiente etiqueta.

¿Le ha resultado útil este artículo?