Doctype HTML

  • Por
Qué es el Doctype en los documentos HTML y XHTML. Vemos distintos tipos de Doctype disponibles.
Dentro del marco de nuestro manual de HTML y en líneas generales, podemos decir que el DOCTYPE es una declaración del estándar usado al construir un documento HTML o XHTML.

Sin embargo, para ser un poco más estrictos, debemos aclarar que el Doctype es propio de documentos XML y SGML, y por tanto los lenguajes HTML o XHTML son unos simples herederos de algo que ya se venía utilizando.

El estándar que se utiliza en un documento se define utilizando un DTD, que son las siglas de Definition Type Document, y es una declaración en un metalenguaje para definir otro lenguaje. Dicho de otra manera, el DTD marca las reglas para la definición de lenguajes como el HTML y en el Doctype estamos indicando simplemente qué DTD se tiene que utilizar para interpretar el documento HTML que estamos codificando.

Nota: Podemos conocer más lo que es un DTD en el artículo DTD y XML Schema, de la introducción a XML publicada en DesarrolloWeb.com.

Así, en resumen, podríamos decir que los documentos HTML o XHTML están escritos en un lenguaje y con el Doctype especificamos este lenguaje y la versión del mismo. Los navegadores leerán esta declaración de doctype e interpretarán la página atendiendo a las reglas definidas en ese lenguaje.

Nota: Para los navegadores es importante conocer el doctype de la página web, porque de ese modo pueden mostrar la página web con la versión exacta del lenguaje HTML o XHTML con la que fue construida. Si no tienen una declaración de doctype, interpretarán la página en lo que se llama "quirks mode", un modo que procura maximizar la compatibilidad de la página con versiones anteriores del lenguaje HTML. Para más información sobre este enfoque de la explicación del doctype os recomendamos leer el artículo sobre la declaración doctype en documentos HTML.

De modo que la utilización de la etiqueta es necesaria si deseamos cumplir un estándar de HTML o XHTML, para especificar qué versión o lenguaje utilizamos y que el browser renderice la página conforme a dicho estándar.

El DOCTYPE tiene una forma como sigue:

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

El doctype debe incluirse en la primera línea del código HTML de la página.

Por explicar de alguna manera esta etiqueta, que suena un poco a chino, dice que es un DOCTYPE de un documento HTML y nos da dos datos adicionales. Con el texto "-//W3C//DTD XHTML 1.0 Transitional//EN" indicamos que este documento se tiene que validar con la especificación de XHTML 1.0 y que el tipo de documento es Transitional. Por otra parte, http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd es la URL del DTD que sirve para validar el cóigo HTML de la página.

El tipo de documento, que habíamos señalado como Transitional en el doctype expresado antes, quiere decir el documento utiliza un abanico más amplio de etiquetas HTML y atributos, incluso algunos que puedan haberse quedado obsoletos. Hay otros dos tipos de documentos. Por un lado tenemos strict, que indica que el código es HTML o XHTML estricto, sin incluir atributos y etiquetas en deshuso. El otro tipo de documento que falta es el frameset, que se utiliza cuando estamos realizando una declaración de frames o frameset.

Así que, dependiendo de nuestra página y el código que utilicemos, tendremos que declarar uno u otro doctype. Existen diversos Doctype que abarcan una gran gama de posibilidades, configurando distintas versiones de HTML o XHTML y distintos tipos de documento, strict, transitional o frameset. Este artículo de desarrollo web .com se completa ahora con una lista de algunos de estos doctype más utilizados en la actualidad:

Doctype XHTML 1.0 strict

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

Doctype XHTML 1.0 transitional

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

Doctype XHTML 1.0 frameset

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

Doctype HTML 4.01 strict

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

Doctype HTML 4.01 transitional

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

Doctype HTML 4.01 frameset

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

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

Pedro

04/11/2008
El tema del artículo es muy interesante y útil pero creo que la exposición del mismo es un tanto oscura, no se llega a entender claramente al 100%; tal vez faltó explicar con ejemplos qué es lo que pasaría si el documento no lleva tal meta-etiqueta y no simplemente decir que el navegador “…procura maximizar la compatibilidad de la página con versiones anteriores del lenguaje HTML.” (¿?)

Estoy seguro que si el autor le agrega este detalle quedaría redondo y perfecto.

Gracias de antemano a Miguel Angel Alvarez.

Atte,
Pedro Q.

linamex

08/2/2010
no me queda muy clrara la etiqueta docto type
Hola antes que nada quiero felicitarlos ppr esta excelente pagina la cual me es de gran ayuda puesto que no se nada de programacion por eso no entendi que quiere decir cada etiqueta y cuando se utilizan las mencionadas, ojala las puedan detallar mas, gracias y saludos

Lina M

ALCIXHXAN

22/7/2010
Doctype
Hace pocos días descubrí vuestro portal y la verdad es que estoy encantada siguiendo las lecciones paso a paso. Se ve claramente la intensión de cerrar el circulo de cada tema y eso para mi modo de ver, significa dos cosas: visión global + esfuerzo. Gracias Miguel Ángel y gracias equipo de colaboradores!!!
Respecto a los doctype opino lo mismo que Pedro Q. pues no me resulta del
todo claro.
Cordiales saludos
Patricia

Mike

08/11/2010
Problema con esta linea
Buenas, espero q me respondan, y que puedan ayudarme, y si así es, desde ya muchas gracias.
Resulta q estoy haciendo un sitio web, y dentro de este tengo un menú con un estilo declarado para que cumpla la función de desplegable, osea cuando el puntero de mouse esta sobre el menú, este desplega opciones hacia abajo, el hecho es q este estilo necesita de la linea de declaración de esta de la que se habla aquí (<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">).
El problema es que al ponerla, toda la pagina queda desplazada una linea abajo, y eso me desordena todo. Y si no la pongo el menú no se desplega.
Hay algo q pueda hacer?

Jorge

04/7/2011
Doctype html public
COLÓCALO DESPUÉS DE LA ETIQUETA <HTML> y verás que funciona, a mi me sirve.

kaler

10/9/2011
bueno!
su informacion es buena, soy principiante de de progración en web asi que casi no entiendo mucho de esto pero me ha sido muy útil, solo que no meparece muy claro, talves puedan definir mas, me encantaria y se que a muchos principiantes como yo les seria mas util ya que no es facil encontrar informacion de este tipo(definiciones).

Saludos.

wsoluciones

08/12/2011
Gracias por el articulo
Esta información es mas explicita que otras que he encontrado en la web.

A y por si les interesa aqui les dejo un video tutorial de HTML

http://www.youtube.com/watch?v=lSbi9gegLdk

aldobelus

27/3/2013
Doctype
Se debería hacer más hincapié en seguir los estándares y recomendarlos. Del mismo modo, esto es para gente que está empezando, ¿por qué darles detalles sobre Doctype Transitional si no tienen páginas antiguas que mantener? Como empiezan lo recomendable es informarles de lo que tienen que hacer (bien), no de lo que otros hicieron antes (mal). Vamos, digo yo...

Marie Rossains

17/5/2015
configurar mi página web para tablets o smartphones
Hola hice mi página web y si la veo en cualquier pc sale completa, pero si la quiero ver en un ipad, telefóno, iphone, etc no aparece completa del lado derecho, como la configuro para que se vea en cualquier dispositivo móvil o tablet, sobre todo porque los teléfonos no salen completos, gracias por su ayuda

Aitor Lopez

16/10/2015
doctype
Muy buen post, muchas gracias por compartir.
Mi website: <a href="http://www.fc-networks.com" title="Diseño Web">Diseño Web</a>

Angel

03/6/2017
No se entiende
Lastima, en lo personal me dio una idea pero como diferencia si finalmente es !DOCTYPE de los demás y porque las lineas adicionales