En el código fuente de los do­cu­me­n­tos y su­b­pá­gi­nas HTML, la etiqueta <!DOCTYPE html> debe en­co­n­trar­se 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 vi­sua­li­za­ción en tu web.

Hosting
Hosting de primera al mejor precio
  • 3x más rápido, ahora un 60 % de ahorro
  • Alta di­s­po­ni­bi­li­dad >99.99 %
  • Solo en IONOS: hasta 500 GB incluidos

¿Qué es DOCTYPE html?

Cua­l­quie­ra que trabaje con do­cu­me­n­tos 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 do­cu­me­n­tos 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 im­po­r­ta­n­tes 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 co­m­pro­ba­ción de errores que nos indican las líneas DOCTYPE que faltan.

Consejo

Mientras que la etiqueta DOCTYPE es­pe­ci­fi­ca el tipo de documento, la etiqueta HTML de­no­mi­na­da HTML div sirve como un co­n­te­ne­dor vacío sin si­g­ni­fi­ca­do semántico que puede ser rellenada li­bre­me­n­te 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 pro­gra­ma­do­res y na­ve­ga­do­res, a primera vista, de qué Document Type De­fi­ni­tion (DTD) se trata y cómo debe re­n­de­ri­zar­se 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. Cua­l­quie­ra 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 na­ve­ga­do­res, a falta de la etiqueta <!DOCTYPE html> cambian au­to­má­ti­ca­me­n­te al “modo Quirks”. Con ello se pretende mantener la co­m­pa­ti­bi­li­dad con versiones an­te­rio­res y la capacidad de vi­sua­li­za­ció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 vi­sua­li­za­ción inexacta a pesar del código actual, ya que los na­ve­ga­do­res 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 ma­yú­s­cu­las ni mi­nú­s­cu­las y se coloca di­re­c­ta­me­n­te antes de la primera etiqueta HTML en la primera línea del documento HTML. Toda la in­fo­r­ma­ción que necesita un navegador sobre el tipo de documento y su vi­sua­li­za­ción tiene un aspecto parecido al siguiente:

<!DOCTYPE html>

Ejemplos de código para versiones an­te­rio­res de HTML

En los do­cu­me­n­tos que aún utilicen versiones an­te­rio­res 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 an­te­rio­res de HTML incluso los pro­gra­ma­do­res más ex­pe­ri­me­n­ta­dos suelen copiar y pegar el código en­re­ve­sa­do al documento en cuestión. La mayor co­m­ple­ji­dad se debe a que HTML4 y los lenguajes de código más antiguos todavía se basan en el pre­de­ce­sor de HTML, el SGML (Sta­n­da­r­di­zed Ge­ne­ra­li­zed Markup Language), y los na­ve­ga­do­res requieren una de­fi­ni­ción exacta del tipo de documento.

En los lenguajes de código an­te­rio­res a HTML5 se utilizan las si­guie­n­tes etiquetas DOCTYPE al principio de los do­cu­me­n­tos 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 Tra­n­si­tio­nal:

<!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 Tra­n­si­tio­nal:

Nota

A di­fe­re­n­cia de HTML5 y sus pre­de­ce­so­res, se re­co­mie­n­da 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 im­po­r­ta­n­te

Como norma, no es obli­ga­to­rio incluir la etiqueta de DOCTYPE html, por tanto, también puede omitirse en los do­cu­me­n­tos HTML. No obstante, el indicar del tipo de documento se considera una práctica es­ta­n­da­ri­za­da, aunque no oficial. Al revisar el documento HTML, si falta la etiqueta, se detectará au­to­má­ti­ca­me­n­te el error. Si el navegador no puede reconocer con certeza la gramática y la sintaxis utilizada, puede que se produzcan errores de vi­sua­li­za­ción e incluso que la fu­n­cio­na­li­dad de la web se vea afectada.

Es­pe­cia­l­me­n­te im­po­r­ta­n­te: DOCTYPE no solo debe aparecer al principio del código fuente de un proyecto web. Toda subpágina in­de­pe­n­die­n­te en el documento HTML asociado debe tener su co­rre­s­po­n­die­n­te etiqueta.

Ir al menú principal