Doctype HTML: ¿Qué es y para qué sirve en páginas web?

Doctype HTML: ¿Qué es y para qué sirve en páginas web?
Álvaro Peredo

Contenido escrito y verificado por:
Álvaro Peredo

Última actualización: 14/05/2024 por Álvaro Peredo
Tabla de Contenidos

_ Te asesoramos sin compromiso _

Presupuesto diseño web​ ¿Tienes un proyecto en mente? Cuéntanoslo
Los datos facilitados a través de este formulario serán tratados por GALERNA ESTUDIO S.L.U. con CIF B39706023 y domicilio en Calle San Fernando, 58, 8-D · 39010 Santander (Cantabria) de acuerdo con lo establecido en nuestra política de privacidad con la finalidad de poder enviarle información sobre nuestros productos / servicios. Los datos recabados por este formulario no se cederán a terceros salvo por obligación legal. Le recordamos que usted tiene derecho al acceso, rectificación, limitación de tratamiento, supresión, portabilidad y oposición al tratamiento de sus datos dirigiendo su petición a la dirección postal indicada o al correo electrónico [email protected] Igualmente puede dirigirse a nosotros para cualquier aclaración adicional. En caso de no aceptación sus datos no serán tratados.

¿Qué es un doctype HTML y de dónde procede su importancia?

Un doctype HTML (Document Type Declaration o Declaración de Tipo de Documento HTML) es una línea de código que se coloca al principio de un documento HTML para especificar la versión del lenguaje HTML que se está utilizando.

Esto le indica al navegador web cómo interpretar el documento y qué reglas de validación aplicar.

Pero el doctype son muchas más cosas. Sin este documento en realidad no existiría internet tal y como lo conocemos.

El doctype en detalle

En diseño web, el doctype HTML no es sino la declaración del tipo de documento que vamos a realizar y del estándar en el que la página ha sido creada para cumplirlo, ya sea tanto HTML como XHTML.

La declaración nos remite a la versión de (X)HTML que usa dicho documento.

De esta manera, los navegadores tienen la posibilidad de conocer qué sintaxis y gramática usan y así los validadores de estándares puedan comprobar su validez.

Existen tres tipos de documentos XHTML:

  • Strict
  • Transitional
  • Frameset

La importancia del doctype HTML

El doctype HTML es importante por las siguientes razones:

  • Compatibilidad del navegador.
    Ayuda a garantizar que el documento HTML se muestre correctamente en diferentes navegadores web.
    Al especificar la versión del lenguaje HTML, el navegador web sabe qué características y funcionalidades están disponibles y cómo interpretar el código.
  • Validación del código.
    El doctype HTML permite validar el código HTML contra un conjunto de reglas definido por el W3C (World Wide Web Consortium).
    Esto ayuda a identificar y corregir errores en el código, lo que puede mejorar la calidad y la accesibilidad del sitio web.
  • Modos de renderizado del navegador.
    Algunos navegadores web tienen diferentes modos de renderizado, dependiendo de si se especifica o no un doctype HTML.
    En general, se recomienda utilizar un doctype HTML para obtener el mejor rendimiento y compatibilidad.

La base de todo documento HTML

Así pues, podemos decir que es una unidad base para trabajar en una página web-

Al escribir un documento HTML, el lenguaje para páginas web, lo primero que escribimos es el doctype, o sea, la declaración del tipo de documento con el que estamos trabajando.

Dicho esto, para que quede meridianamente claro, el doctoype es el documento que indica cómo está inscrito y qué estructura sigue siendo ésta, ya que está determinada por un DTD concreto.

En un manual de HTML, este término indicaría la declaración del estándar, la base para la construcción, el documento, ya sea en HTML propiamente dicho o en XHTML.

Ahora bien, desde un punto de vista más estricto, se puede afirmar que este doctype sería más propio de documentos SGML o XML, ya que los HTML y los XHTML se tendrían que considerar como herederos de un lenguaje que ya se venía utilizando tiempo atrás.

Qué es el DTD: Definition Type Document

Ya habrás visto en este texto que hemos nombrado el DTD. ¿Qué es?

El estándar que se usa en la declaración doctype HTML se define con el uso del DTD, que son las siglas del término Definition Type Document, es decir, la declaración en metalenguaje para la correcta definición en un lenguaje diferente.

O sea, el DTD marca la regla para definir los lenguajes HTML que usamos para interpretar el citado documento HTML que se pretende codificar.

Resumiendo, pongamos un ejemplo: podríamos afirmar que el documento HTML o XHTML se escribe en un lenguaje que es especificado en el doctype junto con la versión del mismo.

Esta información será leída por los navegadores, que interpretarán la página según las reglas que definen ese mismo lenguaje.

Sintaxis del doctype

Profundizando en el resumen, la sintaxis de un doctype podría explicarse de la siguiente forma siguiendo las partes que lo componen y que sirven para que el documento sea identificado:

  • Doctype: es la indicación en la que es establece la declaración del doctype.
  • Elemento de primer nivel: a continuación, escribimos en el nivel superior declarado en el DTD. En este caso habría que especificar si es un HTML, un XHTML, etc.
  • Disponibilidad: se indica la disponibilidad concreta del identificador. Pueden ser diversos, por ejemplo, Public, System o URL dependiendo si es de sistema, local, etc.
  • +/- dependiendo de la organización. Es decir, se usará + o -. Por ejemplo, en un W3C se usa el -.
  • Organización: o sea, hace referencia a la organización que crea el DTD que usaremos. Puede ser, por ejemplo, el W3C, pero hay muchos más.
  • Tipo: es el DTD, es decir, el tipo de documento que se incluye.
  • Nombre: en este caso se aplica el nombre que tiene el DTD, que puede ser, por ejemplo, HTML 4.01.
  • Idioma: se establece el idioma en el que se escribe y codifica el DTD. Por lo general suele ser el inglés, que se especifica con las siglas EN, es decir, english.
  • URL: es la dirección URL del DTD. Cuando se acceda a dicha dirección se podrán realizar las acciones pertinentes según la definición de la estructura que ha sido marcada en el documento realizado.

HTML5 doctype Declaration

La declaración DOCTYPE permite a los navegadores activar el modo estándar o estricto, o su modo compatibilidad (quirk).

La falta de esta declaración en un documento web o su incorrecto uso, puede provocar que los navegadores rendericen incorrectamente una página web o lo hagan de forma completamente diferente a como esperábamos.

Se recomienda que todas las páginas web nuevas se hagan utilizando dicha declaración.

Y hacerlo además de la forma correcta, ya que por un lado, podremos cumplir con los estándares y otro obtendremos unos resultados de renderizado homogéneos.

Recordemos, pues, que la declaración del tipo de documento, o sea, la declaración doctype, asociará un documento XML o SGML a una definición de tipo.

Es decir, se serializa el citado documento, y se manifiesta en una cadena corta de caracteres de marcado que recibe el nombre de markup y que se conforma con una sintaxis particular.

Ahora, con la llegada del doctype HTML5, hemos logrado una mayor flexibilidad en el desarrollo web, ya que comenzaba a ser indispensable justo antes de que se pudiera contar con esta clase de documento.

Características principales del HTML5 y el doctype

¿Qué hay que remarcar del HTML5 y el doctype del mismo? Estos puntos son clave:

  • Simplificación. Se ha hecho todo el trabajo más sencillo y flexible, sin necesidad de identificador de sistema, URL, identificación de sistema público, etc.
  • Ahora informas del DTD que estás usando en el documento de forma inmediata.
  • Es el DTD el que indica los atributos de las etiquetas, la estructura de dichas etiquetas, los eventos, etc.
  • El documento doctype HTML5 se crea respetando el DTD que se haya indicado. Es decir, se respetan los estándares web, pues de nada serviría el documento si después no se respetan dichos estándares.
  • Con un validador de la W3C se puede comprobar si el documento que usamos sigue los estándares adecuados.
Declaración Doctype inicial
Declaración Doctype inicial en página web

Ejemplos de doctype

En este ejemplo se indica que la página debe validarse como XHTML Transitional utilizando el DTD existente en la URL https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd.

Es habitual que estas líneas las creen los propios editores, pero no siempre lo hacen de forma correcta, además, a veces se copia de alguna otra página en la que, por ejemplo, la ruta del DTD es local, por lo que seguramente generaría un fallo en la validación en nuestro web.

Otros ejemplos de doctype HTML podrían ser estos:

  • See the Pen Doctype HTML by Galernaestudio.com (@Galernaestudiocom) on CodePen. Luego, usaríamos la herramienta Validator de W3C para validar el código.

El documento ha de poseer todos los elementos HTML sin que se genere error.

Historia del doctype

Ahondemos ahora en la historia del doctype, que puede ser entendida si no es a través de la historia de HTML. .

HTML (1991)

El origen de HTML se va hasta 1980, cuando nace de la mano de la mítica figura de Tim Berners-Lee, el investigador del CERN que está considerado como uno de los padres de la informática moderna.

Berners-Lee fue de los primeros que propuso el uso de un sistema de hipertexto que facilitara la compartición de documentos.

Aunque dichos sistemas ya tenían años de desarrollo, todavía no se usaban para ofrecer permisos de acceso a información a documentos electrónicos.

Aquellos primeros hipertextos tenían cierto parecido a los enlaces a web de hoy.

Y es que, cuando Berners-Lee terminó con su desarrollo, en unión al ingeniero de sistemas Robert Cailliau, lograron ganar una convocatoria de desarrollo de sistemas de hipertextos con la WorldWideWeb, o sea, la W3.

En 1991 veía la luz el primer documento con descripción HTML bajo el nombre de HTML Tags, o sea, etiquetas HTML.

No obstante, la primera propuesta oficial para que HTML fuera estándar no tuvo lugar hasta 1993 a petición del IETF.

HTML 2.0 (1995)

Después de significativos avances, cuando al fin se definieron las tablas, los formularios y las etiquetas para imágenes, ni las propuestas conocidas como HTML y HTML+ lograban transformarse en estándares oficiales.

No sería hasta 1995 cuando el IETF publicó el estándar conocido como HTML 2.0, que, pese a su nombre, fue el primero en su clase.

HTML 3.2 (1997)

Tras pasar en 1996 por la publicación de los estándares por parte de W3C, la versión HTML 3.2 es publicada en enero de 1997 por este mismo organismo, añadiendo en esta revisión los últimos avances de las webs desarrolladas anteriormente.

HTML 4.01 (1999)

En 1998 se publica la versión corregida, llamada HTML 4.0, para alcanzar la última especificación oficial, revisada y actualizada que ve la luz en diciembre de 1999 y es llamada HTML 4.01.

XHTML (2000)

De forma paralela, el W3C continúa con la estandarización del XHTML, esta vez basada en XML, cuya primera versión ve la luz en enero del 2000 bajo la denominación de XHTML 1.0.

HTML5 (2014)

Por su parte, HTML detiene su actividad de estandarización durante varios años hasta que, en 2014.

Tras diversos movimientos, Tim Berners-Lee, ya convertido en Sir británico, presenta en octubre la versión final que permite usar la llamada HTML 5 junto a otras como CSS3 o Javascript.

Esto permitirá desarrollar todo tipo de apps multiplataforma en Linux, iOS, Windows, Android, etc.

Las declaraciones DOCTYPE varían según el tipo de HTML que esté utilizando en su página.

En algunos tipos de HTML, se debe especificar una DTD para que los navegadores muestren el contenido correctamente. Vea los ejemplos a continuación:

Las declaraciones DOCTYPE varían según el tipo de HTML
Las declaraciones DOCTYPE varían según el tipo de HTML

Usos del doctype en HTML

Hoy en día distinguimos entre diversos tipos de doctypes con sus usos particulares. Veamos cuáles son a continuación, ya que así se sabrá qué hay que hacer específicamente en cada caso que nos encontremos:

  • HTML Strict DTD: se utiliza cuando se busca un código limpio, sin indicaciones. Por ejemplo, la presentación de un documento.
  • HTML Transitional DTD: atributos de presentación, aunque no sea su uso óptimo. Lo mejor es utilizarlo si los lectores no disponen de navegadores que soporten hojas de estilo CSS, cosa rara hoy en día.
  • HTML Frameset DTD: se utiliza cuando se crea un documento con framesets.
  • XHTML Strict DTD: se utilizará para crear un código de presentación libre de atributos.
  • XHTML Transitional DTD: en este caso incluiremos atributos de presentación en el HTML, cosa poco útil hoy en día ya.
  • XHTML Frameset DTD: cuando utilizas frames únicamente con este tipo de doctype XHTML.

Ya sabes a ciencia cierta en qué consiste la declaración doctype HTML y todo lo que concierne a este documento tan desconocido para la mayoría del público.

Todas las grandes empresas que operan internet, como Apple, Opera o Mozilla, lo tienen en cuenta para sus proyectos.

No lo olvides, pues ya vemos su necesidad y las muchas particularidades que se le asocian.

Si todavía te has quedado con alguna duda al respecto, desde Galerna Estudio – Diseño de páginas web en Asturias, estaremos encantados de responder a tus preguntas.

FUENTES

 

  • Aprendiendo Frontend
  • José Pol Lezcano

_ Te asesoramos sin compromiso _

Presupuesto diseño web​ ¿Tienes un proyecto en mente? Cuéntanoslo
Los datos facilitados a través de este formulario serán tratados por GALERNA ESTUDIO S.L.U. con CIF B39706023 y domicilio en Calle San Fernando, 58, 8-D · 39010 Santander (Cantabria) de acuerdo con lo establecido en nuestra política de privacidad con la finalidad de poder enviarle información sobre nuestros productos / servicios. Los datos recabados por este formulario no se cederán a terceros salvo por obligación legal. Le recordamos que usted tiene derecho al acceso, rectificación, limitación de tratamiento, supresión, portabilidad y oposición al tratamiento de sus datos dirigiendo su petición a la dirección postal indicada o al correo electrónico [email protected] Igualmente puede dirigirse a nosotros para cualquier aclaración adicional. En caso de no aceptación sus datos no serán tratados.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *