Antes de comenzar a hacer la página web en sí, tenemos que decirle al navegador qué versión de HTML vamos a utilizar para que sepa interpretarlo correctamente. Aquí tienes un resumen con las características de cada doctype.
HTML 4.01 Transitional, Strict, Frameset
Hay tres versiones de HTML 4.01, y cada una tiene sus propios fines, así que lo mejor es que elijas la más adecuada para tu proyecto y tu nivel de conocimiento.
HTML Strict
Es la versión más limpia y simple de HTML. Con este doctype sólo puedes usar las partes del HTML que se refieren a la estructura y, en general, no permite utilizar las partes que se relacionan con el estilo (algunas etiquetas de HTML permiten realizar un diseño básico, pero esto por suerte ha sido reemplazado por el CSS). Si haces tus páginas web basándote en esta versión de HTML te será mucho más fácil pasar a XHTML en un futuro.
HTML Transitional
Esta es la versión mixta. Se permite el uso de etiquetas de estilo, que realmente no tienen cabida en HTML, pero que se introdujeron antes de que el CSS existiera. En general, es mejor mantener el marcado (HTML) y el estilo (CSS) totalmente independiente, ya que esto hace más fácil cambiar el aspecto de la web más tarde, e incluso compartir el mismo estilo en varias páginas web, pero si todavía no dominas HTML y CSS, este doctype seguramente sea la mejor elección.
HMTL Frameset
Esta versión de HTML permite utilizar un conjunto de marcos (frames) en lugar del BOBY, por lo que puedes combinar varias páginas en una sola.
Parece una tontería, pero es muy importante que definas el tipo de documento de tu web, como se muestra a continuación, para obtener una interpretación correcta de tu código fuente en todos los navegadores actuales. Si no lo haces corres el riesgo de que la página no se vea como tu quieres.
Este código debería ser lo primero que aparezca en el código fuente de tu página, antes incluso de la etiqueta HTML. Los tres doctypes para HTML 4.01 son:
Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
El DOCTYPE en HTML 5
HTML 5, el futuro del HTML, aboga por el uso de un doctype simple:
<!DOCTYPE HTML>
De hecho, en el borrador se refiere a los doctypes como un “todo inútil, pero necesario”, cuyo propósito es asegurarse de que los navegadores interpreten las páginas web de forma correcta. El doctype último hará esto mismo y además de forma simplificada. Si haces una página web en HTML 5, este doctype debería ser tu primera elección, a menos que necesites para validar tus páginas web versiones anteriores de este lenguaje.
XHTML 1.0 Transitional, Strict, Frameset
Utiliza XHTML 1.0 Transitional cuando tu página web se ajuste a las normas básicas XHTML, pero todavía utilices algunas etiquetas HTML para la presentación (estilo):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Utiliza XHTML 1.0 Strict cuando tu página web se ajuste a las normas de XHTML y los usos de CSS para la separación total entre contenido y presentación. Puede ser un poco más complicado de validar para diseñadores novatos, pero el resultado final merece la pena. Las páginas son más semánticas y ordenadas:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
XHTML 1.0 Frameset es idéntico al doctype transitional, excepto en el uso de la etiqueta <frameset> en lugar de <body>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
XHTML 1.1 DTD
XHTML 1.1 declaration. Visita el sitio del WC3 para una visión general y de lo que ha cambiado desde la versión 1,0 de XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
modificado el 4 octubre, 2013 1:25
Ver comentarios (6)
Hola, soy cero a la izquierda en esto de programar en lenguaje HTML, pero soy bastante curioso, a pesar de mis 60 y dele añitos. En estos momentos, para efectos de presentar unas "maquetas" o "modelos" quiero modificar algunas páginas que me agradan en la web: El hecho es que aunque logro cambiar los textos, agregando al "add atribute" y colocando la expresión "content editable" no logro cambiar las imágenes originales por mis imágenes, a pesar de que coloco la url de la imagen almacenada en mi drive. Lo otro es que quisiera GUARDAR LOS CAMBIOS realizados a la página en mi pc, a fin de mostrarlos a las personas interesadas, pero el encabezado aparece en "gris" y al darle click derecho, solo aparece la opción "Break on", no me la opción "Guardar como". ¿Será que me echan una manita? si informan a mi correo para estar pendiente de su respuesta lo agradezco
Mil gracias, Verónica! Creo que comprendo la idea.
Al abrir un nuevo doc en DW, él pone el código
por lo que entiendo que "por defecto" va a usar el XHTML 1.0 Transicional, pero que, si me conviniera, podría cambiarlo a mi gusto.
Gracias de nuevo!
Hola Verónica. Llevo días leyendo vuestra magnífica web, soy novata (aunque he hecho un curso de DW) y estoy bastante desesperada.
Una pregunta respecto a lo explicado más arriba: dices "utiliza este u otro html" pero ¿eso no depende del programa (en mi caso el DW)? ¿es que yo puedo elegir la versión? Perdona la ignorancia suprema!
Un cordial saludo, me son de muchísima ayuda vuestros artículos.
Hola Ana,
No te preocupes, estamos para ayudar ;) Te comento que no, los códigos que se mencionan en este artículo no tienen nada que ver con el programa que uses para crear tu web, tienen que ver con la versión de HTML que estés usando (el código de la página). Y la versión influye en cómo se verá tu web finalmente en un navegador, ya que cada versión de HTML puede y tiene variaciones. Poniendo ese código al principio de tu página, le estás diciendo a los navegadores que versión usas de HTML, con lo cual ya saben cómo tienen que interpretarlo.
Y sí, tú puedes elegir la versión. Si no tienes muchos conocimientos de HTML te recomiendo usar XHTML 1.0 Transitional, que es bastante flexible y fácil de aplicar correctamente.
Como digo, esto es independiente del programa que uses, es información para el navegador. Si tienes más dudas me comentas.
Saludos.
Hola! te resumo mi situación para ver si me puedes echar una mano...
Diseñé el sitio con xara web designer 6, hice las pruebas necesarias (supuestamente) y todos los enlaces estaban correctos y los archivos HTML se veían igual que cuando los hice.
Después subí todo con Cuteftp...
El sitio está online pero no se puede ver nada, tan solo el texto del index, pero no hay formato...
¿Qué podría haber pasado?
Gracias de antemano!!
Eli, me imagino que las rutas de los archivos css y las imágenes están mal puestas. Debes tener la ruta de la imagen alojada en tu hosting, no la de tu PC. Lo mismo se aplica a todos los archivos de tu página web.
Saludos.