En este artículo conoceremos la Declaración del tipo de documento o Doctype de HTML5, qué es, cómo está estructurado y para qué sirve.

El Doctype o “Declaración del tipo de documento” es una instrucción especial que va al inicio de nuestro documento HTML y que permite al navegador entender qué versión de HTML estamos utilizando. Esta información determinará la manera en la que el navegador procesará el documento, un DOCTYPE distinto podría implicar hasta una visualización diferente del sitio web dentro del mismo navegador.

En el caso de HTML5, el DOCTYPE a emplear es el siguiente:

See the Pen DOCTYPE html by Devcode.la (@devcodela) on CodePen.

Este es más simple de recordar con respecto a los DOCTYPE de las versiones anteriores de HTML.

La W3C en esta nueva versión de HTML5 nos presenta un DOCTYPE que no referencia a ninguna Definición del tipo de documento (DTD), debido a que HTML5 no utiliza el sistema SGML como las versiones anteriores.

Para brindarte un alcance de cómo se utilizaba el DOCTYPE en versiones anteriores, veremos un ejemplo:

See the Pen DOCTYPE html by Devcode.la (@devcodela) on CodePen.

Tenemos el DOCTYPE de HTML4.01 Strict

Donde:

• DOCTYPE nos indica que estamos ante la declaración del tipo de documento.
• Elemento de primer nivel, en este caso HTML.
• Disponibilidad, en este caso PUBLIC.
• + o -, en el caso de la W3C se utiliza -.
• La organización que ha creado el DTD en este caso la W3C.
• El tipo de documento, en este caso DTD.
• El nombre del DTD en este caso HTML 4.01.
• El idioma en el que está escrito el DTD en este caso EN de inglés.
• La URL del DTD en este caso http://www.w3.org/TR/html4/strict.dtd, si accedemos a esta url podemos visualizar el contenido del DTD.

Ahora veamos de qué manera el DOCTYPE afecta la validación de nuestro documento HTML.

A continuación presentamos dos ejemplos, el primero representa una validación sin errores y el segundo con errores. Tenemos los siguientes códigos:

Ejemplo 1:

See the Pen DOCTYPE html by Devcode.la (@devcodela) on CodePen.

Ejemplo 2:

See the Pen DOCTYPE html by Devcode.la (@devcodela) on CodePen.

Ahora utilizaremos la herramienta Validator de la W3C, para validar nuestro código.

El ejemplo 1 nos arroja todo correctamente, sin ningún error:

Mientras que el ejemplo 2 nos arroja 2 errores:

Ambos documentos poseen los mismos elementos HTML; sin embargo, el elemento “header” y “footer” pertenecen a HTML5, por lo cual en el primer ejemplo no generan ningún error. En el segundo ejemplo, el DOCTYPE fue declarado para la versión 4 de HTML, por lo que no reconoce estos elementos y genera ambos errores.

En conclusión, la declaración del DOCTYPE es importante para indicar al navegador la versión de HTML que está utilizando el sitio web. Por eso, siempre debemos escribirla al inicio de nuestros documentos y de manera correcta.

Si deseas conocer más sobre el lenguaje de marcado HTML, recuerda que tenemos en nuestra plataforma un Curso de HTML y CSS donde se abarcan este y otros temas con mayor profundidad y ejemplos.