¿Qué es el DOCTYPE?


174
  • ¿Qué es DOCTYPE y por qué quiero usarlo?
  • ¿Cuáles son los diferentes DOCTYPE que puedo usar?
  • ¿Cuál es la diferencia entre los modos estándar y los caprichos, y cuáles son algunos caprichos con los que puedo encontrar DOCTYPE de configuración diferente?

Por último, ¿cuál es el DOCTYPE adecuado que debería usar?


9
¿No debería ser esto un wiki?
Alex

Respuestas:


76

Básicamente, el DOCTYPE describe el HTML que se usará en su página.

Los navegadores también usan el DOCTYPE para determinar cómo representar una página. No incluir un DOCTYPE o uno incorrecto puede activar el modo peculiaridades.

El truco aquí es que el modo de peculiaridades en Internet Explorer es bastante diferente del modo de peculiaridades en Firefox (y otros navegadores); lo que significa que tendrá un trabajo mucho más difícil, tratando de garantizar que su página se muestre de manera consistente con todos los navegadores si se activa el modo de peculiaridades, de lo que lo hará si se presenta en modo estándar.

Wikipedia tiene un resumen más profundo de las diferencias en la representación cuando se utilizan varios DOCTYPE . XHTML está habilitado por ciertos DOCTYPE, y hay bastante debate sobre el uso de XHTML, que está bien cubierto en XHTML: mitos y realidad .

Existen diferencias sutiles entre los diferentes DOCTYPE de renderizado "que cumplen con los estándares", como el DOCTYPE HTML5 ( <!DOCTYPE html>antes de HTML5, solo conocido como "doctype delgado" que no activa el renderizado estandarizado en navegadores antiguos) y otros DOCTYPE como este para HTML 4.01 de transición:

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

39
En estos días estoy a favor del HTML5 DOCTYPE: <! DOCTYPE html> funciona en todos los navegadores modernos, incluido IE6.
Walter Rumsby

53
IE6 ∉ navegadores modernos

26

El DOCTYPE le dice al agente de usuario consumidor (navegadores web, rastreadores web, herramientas de validación) qué tipo de documento es el archivo. Su uso asegura que el consumidor analiza correctamente el HTML como lo pretendía.

Hay varios DOCTYPES diferentes para HTML, XHTML y Framesets, y cada uno de ellos tiene dos modos, Strict y Transitional. Strict dice que su marcado está utilizando exactamente los estándares definidos. Consulte la página de DTD del W3C para obtener más detalles.

Quirksmode es básicamente el método de diseño de los días de guerra del navegador cuando los estándares eran mucho menos respetados y definidos. En general, una página de modo estándar, que es válida, se distribuirá de manera más consistente en varios navegadores, pero puede carecer de ciertas características que necesita. Una de esas características es el atributo de destino de la etiqueta de anclaje. El sitio Quirksmode es un gran recurso para estas diferencias.

Una última reflexión es que el nuevo estándar HTML5 propone usar un DOCTYPE muy simple:

<!DOCTYPE html>

El uso de este DOCTYPE es una forma compatible con reenvío para especificar que sus páginas están en modo estándar y son HTML. Este es el método que utiliza Google, y es razonablemente fácil de recordar. Recomiendo usar este DOCTYPE a menos que planee usar XHTML.


2
¿La etiqueta HTML DOCTYPE? Si es así, ¿por qué necesitamos esto para empezar?
CuriousMind

2
@vipinkoul, la etiqueta DOCTYPE especifica qué tipo de documento HTML está enviando al Usuario-Agente. Podría ser HTML o XHTML o un conjunto de marcos. Y podría ser HTML / XHTML / Frameset estricto o HTML / XHTML / Frameset de transición. Principalmente esto afecta la forma en que el analizador reacciona cuando encuentra un error.
Rob

6

Un doctype define qué versión de HTML / XHTML usa su documento. Debería usar un doctype para que cuando ejecute su código a través de validadores, los validadores sepan con qué versión de HTML / XHTML se debe verificar. Esta página proporciona una buena descripción general:

No olvides agregar un doctype

Los documentos comunes que puede usar se enumeran aquí:

Lista recomendada de DTD

El tipo de documento que debe usar depende del código que esté utilizando, pero para tener una idea, intente ejecutar su código a través del validador W3C y use el menú desplegable Tipo de documento en el menú "Más opciones" para probar diferentes tipos de documento. .

Servicio de validación de marcado W3C


3

En HTML (incluido XHTML) como se usa en las páginas web, DOCTYPE es una cadena que activa uno de los pocos modos de navegador (modo peculiar, modo estándar, modo casi estándar), dependiendo de la ortografía exacta del DOCTYPE. Desea usarlo para seleccionar el modo de navegador que mejor se adapte a su página.

Formalmente, en SGML y XML, una declaración DOCTYPE es una referencia a una Definición de tipo de documento (DTD), que especifica las reglas formales de sintaxis del lenguaje de marcado. Ningún navegador ha utilizado DTD para nada o incluso ha accedido a ellos. Sin embargo, los validadores de marcado SGML y XML, como el Validador de marcado W3C , excepto en modo HTML5. Por lo tanto, la elección de DOCTYPE determina cómo funciona un validador si se le envía el documento. Sin embargo, el modo de operación del validador también se puede seleccionar en su interfaz de usuario. (Los procesadores SGML y XML también pueden usar DOCTYPE de otras formas diferentes, pero la pregunta aparentemente está destinada a limitarse al contexto HTML y a los navegadores web y software estrechamente relacionado).

No hay una lista autorizada de DOCTYPE. Cada especificación HTML o borrador define su propio DOCTYPE o DOCTYPE. El conjunto de DOCTYPE reconocidos por los navegadores al seleccionar el modo varía según el navegador. En la práctica, no hay ninguna razón para usar un DOCTYPE que no sea el <DOCTYPE html> definido en HTML5 , aunque HTML5 también enumera algunos "DOCTYPE heredados". Puede usar ese DOCTYPE si desea el modo estándar (recomendado para páginas nuevas) y no usar DOCTYPE si desea el modo peculiar (que puede necesitar para las páginas heredadas).

"Modo de estándares" generalmente significa el modo de operación donde un navegador sigue HTML, CSS, DOM y otras especificaciones lo mejor que puede. Por lo general, no significa conformidad total. El "modo Quirks" es diferente en diferentes navegadores, pero generalmente significa un intento de imitar el comportamiento de navegadores muy antiguos como IE 5. El propósito es mantener funcionando las páginas antiguas, bajo el supuesto de que pueden confiar en características y errores en el navegadores antiguos Ver la descripción ¿Qué sucede en el modo Quirks? Tenga en cuenta que hay un concepto bastante diferente y más limitado de "modo peculiar" en HTML5, que se asemeja mucho al documento llamado Modo de vida del modo peculiar .

Un problema típico es que los anchos de los elementos se calculan de manera diferente en el modo peculiar y en el modo estándar. Esto significa que el diseño de una página puede ser más o menos cambiado o incluso totalmente desordenado, si una página diseñada para funcionar en modo peculiar se ve en modo estándar (o viceversa).

Por lo tanto, debe usar <!DOCTYPE html>para páginas nuevas y conservar cualquier DOCTYPE (si lo hubiera) que ha estado usando para páginas viejas.

Sin embargo, el modo peculiar significa, en algunos navegadores, que muchas funciones nuevas de CSS no son compatibles. Esto significa que si desea mejorar una página anterior con alguna función CSS3, puede ser necesario cambiar a un DOCTYPE que active el modo estándar. En tal caso, debe revisar y probar la página para ver si se ejecutará en modo estándar.


Gracias por los detalles adicionales, especialmente éstos: «No hay ningún explorador ha usado alguna vez DTD para nada ni siquiera les visitada» y «no hay razón para usar un DOCTYPE que no sea <DOCTYPE html>como se define en HTML5 ».
Brazo

2

Doctypes le dice al navegador en qué idioma está escrita la página, ya sea HTML o XHTML. Por ejemplo,

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

dígale al navegador que renderice la página como HTML4 strict. Los navegadores más antiguos solían representar las páginas de forma incorrecta y, por lo tanto, los navegadores más nuevos simulan errores de los navegadores más antiguos cuando encuentran un doctype antiguo.

Hoy debe usar al menos HTML4 o mejor XHTML.

Una entrada de blog sobre doctypes es Fix Your Site With the Right DOCTYPE! (de una lista aparte ).


1

En primer lugar, no hay un doctype que deba usar, pero la mayoría de los diseñadores intentan que funcione dentro de XHTML 1.0 Strict.

Un doctype no es más que una declaración de qué etiquetas puede usar dentro de su html (aunque los navegadores pueden usar más o menos de lo que está definido). En realidad, puede abrir el archivo doctype y comenzar a leer ( XHTML 1.0 Strict )

Si no especifica un doctype, el navegador hará todo lo posible para adivinar, pero no siempre encontrará el tipo correcto.

El modo Quirks es solo una técnica utilizada por los navegadores para ser compatible con versiones anteriores, un gran ejemplo del modo peculiar es cómo IE representa cuadros


1

Un doctype es un documento que describe cómo se puede ver el contenido de un documento similar a xhtml (como una página web). Nota: esto define solo la sintaxis de dicha página, ¡la representación de la página NO está definida por el DTD!

Por ejemplo, un doctype podría definir cómo se <table>puede ver la etiqueta, qué atributos acepta y qué valores / tipos de valor se aceptan para cada atributo. Piense en ello como un léxico para su página web actual.

Wikipedia tiene una página informativa sobre los diversos Doctypes que son de uso común. Eso sí, no hay nada que te impida crear tu propio doctype. Sin embargo, lo más probable es que el navegador probablemente no sepa cómo representar su documento.

Qué DTD usar depende de lo que va a escribir. XHTML tiene una DTD completamente diferente a HTML, por ejemplo.


1

En la web, un doctype no hace nada más que decirle al navegador si desea estándares, casi estándares o modo peculiar.

Los cambios en el modo de peculiaridades dependen del navegador: Firefox, Opera, Safari y Chrome implementan un conjunto limitado de peculiaridades, como eliminar el espacio para los descendientes de texto en código como <table><tr><td><img></td></tr></table>(solución:) td img { vertical-align:bottom; }. IE, por otro lado, vuelve al motor de renderizado en IE5.5. Eso significa que no podrá utilizar ninguna de las nuevas funciones implementadas desde 2000.

Para activar el modo estándar, sugiero usar el doctype HTML5 <doctype html>, ya que es el más fácil de recordar.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.