1. Inicio
  2. CSS
  3. Diseño Web
  4. HTML
  5. JavaScript
  6. Miscelanea
  7. Recursos
  8. SEO
  9. Usabilidad

Usa el Doctype adecuadoimagen de djrue

¿Qué es un Doctype?

El Doctype es la primera declaración que va en una página web y le dice al navegador qué especificación de HTML o XHTML estas usando.

El doctype empieza con <!DOCTYPE (debe ser escrito en mayúsculas)

Doctypes en HTML

HTML especifica 3 tipos de documentos: Strict, Transitional y Frameset. (los pongo en ingles... porque así es como va en el código HTML)

HTML Strict DTD

Usalo cuando quieras un código limpio, sin indicaciones de como va a ser la presentación del documento (para eso está el CSS).

El código que debe ir al inicio de tu documento HTML si es que estás usando este doctype es el siguiente:

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

HTML Transitional DTD

Este DOCTYPE admite atributos de presentación, no es la mejor elección pero ahí está.

Sólo es útil cuando los lectores no tengan navegadores que soporten hojas de estilo (CSS), mejor dicho, sólo es útil si consigues una máquina del tiempo y viajas a diseñar páginas web en 1990.

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

HTML Frameset DTD

Debe ser usado cuando estés creando documentos con framesets, el Frameset DTD es igual al Transitional DTD excepto por que permite el uso del elemento frameset.

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

Ahora lo bonito! XHTML

El XHTML 1.0 también específica 3 tipos de documentos XML: Strict, Transitional y Frameset.

XHTML Strict DTD

Usalo cuando quieras un código libre de atributos de presentación. Definitivamente esta es mi opción!

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

XHTML Transitional DTD

El mismo caso del HTML Transitional, úsalo cuando quieras incluir atributos de presentación dentro del HTML (o como ya dije antes, si tienes una máquina del tiempo).

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

XHTML Frameset DTD

Usalo cuando quieras usar Frames! (si es que alguna vez a alguien se le ocurre usarlos).

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

Qué hacer después

Luego, obviamente prueba si en verdad tu código se ajusta al DTD que definiste en el DOCTYPE usando el validador de (X)HTML.

Nota: DTD = Document Type Definition (Definición del tipo de documento)

Existen muchas razones por las que tu página puede no verse como esperabas... una de ellas puede ser que éstes usando un DOCTYPE incorrecto o que simplemente te olvidaste del DOCTYPE.

por qué debería usar Doctype

Hay diferencia... sólo si quieres asegurarte que tu página se vea correctamente en diferentes navegadores!

Ya sabes como funciona el Quirks Mode.

Yo recomiendo usar HTML o XHTML Strict, si quieres elegir entre los dos definitivamente te diría que vayas por XHTML.

Etiquetas:

Comentarios

deja un comentario

  1. Avatar de Plaga Plaga

    Valla esto no lo sabia :S

  2. Avatar de Illi.Pro Illi.Pro

    Creo que se olvidaron de enseñarme esto :( gracias Germán y obvio definitivamente XHTML es el mejor ;)

  3. Avatar de Germán Germán

    Si pues, mucha gente no le presta atención al pobre DOCTYPE, al final es una declaración básica que no puede ser tomada a la ligera.

    y sí, nada como un buen XHTML Strict :)

  4. Avatar de Laren Laren

    Me habia perdido los posts. Bien hecho tío muy didactico.

  5. Avatar de Germán Germán

    Gracias! no he visto muchos artículos acerca de DOCTYPE, y tenia que hacer uno... a mi estilo :P, que bueno que te haya gustado.
    Saludos.

  6. Avatar de susana susana

    Felicitaciones por el articulo!. He leido muchos sobre este tema y este es el que me sirve.
    Es muy claro, muy simple, corto y sin vueltas.
    Excelente german, ya tengo agendado tu blog

  7. Avatar de Germán Germán

    Muchas gracias Susana!
    Esa es justo mi idea al escribir posts, explicar de la manera más clara cómo funcionan estas cosas, no es realmente tan difícil, es sólo que hay muchos que se ponen demasiado técnicos para decir cosas tan sencillas como estas.

    Que gusto que te haya servido el artículo!

    Bienvenida a Aprendiendo Web.

  8. Avatar de Lucia Lucia

    Hola.

    La siguiente linea no me la reconoce en Firefox y me sale un scroll movido

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

    Sabeis si hay alguna solución para corregir este problema??

    Si lo quito entonces, me lo muestra mal en IE.

    Un saludo.

  9. Avatar de Germán Germán

    Hola Lucía, te recomendaría que pases tu HTML por el W3C validator.

    En todo caso puedes contactarme y estaré feliz de ayudarte con tu código.

    Saludos

  10. Avatar de Mario | Juegos de mario bros Mario | Juegos de mario bros

    Lucia eso es supersencillo de arreglar, te recomiendo lo que te a dicho german ya que yo lo pude solucionar de esa manera, pasa tu html por el w3c validator lo antes posible.

    Un amable saludo | Mario Rovira Grau

  11. Avatar de Tania Tania

    Hola Germán!
    Tengo algunas dudas: ¿Por qué aparece una página en el doctype?¿Para qué sirve? y además, tu me podrías decir la diferencia entre IETF y W3C?
    porque he visto otras páginas donde aparece eso, pero no lo explican..

    Muchas gracias!
    Saludos!

  12. Avatar de Tania Tania

    Hola Germán!
    Tengo algunas dudas: ¿Por qué aparece una página en el doctype?¿Para qué sirve? y además, tu me podrías decir la diferencia entre IETF y W3C?
    porque he visto otras páginas donde aparece eso, pero no lo explican..

    Muchas gracias!
    Saludos!

  13. Avatar de sarcko sarcko

    Pues muy buena tu info thanks

Deja un comentario

Algunos recursos para Diseñadores Web

Firebug
Genial extensión de Firefox que permite ver y editar HTML y CSS de cualquier página, entre otras cosas.
Web Developer Toolbar
Extensión de Firefox, agrega una barra de menu con muchas herramientas utiles para diseño y desarrollo web.
YSlow
Complemento para Firebug creado por Yahoo, da estadísticas de la velocidad de carga de la página así como sugerencias para mejorarla (requiere Firebug).
W3C Markup Validation Service
Valida tu HTML o XHTML, una herramienta indispensable.

Entra a la página de recursos para diseñadores web y mira la lista completa

¿Quien escribe Aprendiendo Web?

Germán MartínezHola, soy Germán Martínez, diseñador web y fundador de PreZentit.com, la primera aplicación web 2.0 creada en Perú.

La idea de Aprendiendo Web, es ser una fuente de información en español de estándares y buenas prácticas, así como de las últimas tendencias en diseño web.

Me apasiona el (X)HTML, CSS, SEO y todo lo que tenga que ver con diseño y desarrollo web.

-12.126668, -77.029910