¿Qué es un doctype HTML y de dónde procede su importancia? Hoy en día, cuando internet copa la vida de la gran parte de los negocios del mundo, ya que todos desean o necesitan estar en línea para sobrevivir, podemos considerar este elemento como uno de los más nativos, algo tan originario sin el que no existiría la gran red tal y como la conocemos en la actualidad.
Así pues, expliquemos brevemente qué el el doctype HTML y por qué es tan necesario para el diseño web, ya que, como bien hemos dicho, sin este documento en realidad no existiría internet tal y como lo conocemos.
¿Qué es el doctype en HTML?
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 y Frameset. A continuación, se muestra la declaración de cada una de ellas con las referencias válidas a cada DTD, y un poco más abajo sus diferencias para saber cuándo usar cada una. Toma nota porque a lo largo de este extenso artículo verás todo.
Así pues, podemos decir que es una unidad base para trabajar en una página web, ya que, al escribir un documento HTML, es decir, un documento con este lenguaje de programación, 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.
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.
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. Así pues, 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.
La “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.
Por eso, ¿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.
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. Comenzamos.
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 en relación a documentos electrónicos visualizados.
Aquellos primeros hipertextos tenían cierto parecido a los enlaces a web de hoy. Y es que, cuando Berners-Lee terminó con su desarrolló, 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 para desarrollar todo tipo de apps multiplataforma en Linux, iOS, Windows, Android, etc.
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.
Conclusiones
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, pero que es muy importante, ya que 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.
Fuentes : Aprendiendo Frontend, José Pol Lezcano
Pide presupuesto sin compromiso
