¿Qué es el XHTML Doctype?

Hace ya tiempo que la mayoría de páginas webs incluyen a su comienzo una misteriosa etiqueta

La declaración de tipo de documento DOCTYPE, que así es como se llama, es una parte fundamental de todas aquellas páginas que quieran cumplir los estándares, tanto HTML como XHTML. Esta declaración indica que versión de (X)HTML se usa en la página, de forma que los navegadores pueden saber qué sintaxis y gramática se usa, y los validadores puedan comprobar su validez. Para ello la declaración indica un DTD contra el cual se puede realizar la validación.

Aparte de esto la declaración DOCTYPE se utiliza por los navegadores para activar su modo estándar o estricto, o su modo compatibilidad (quirk). La razón de esto y las diferencias existentes entre estos modos queda fuera del ámbito de esta explicación, pero es suficiente con darse cuenta de que la no utilización de un DOCTYPE o su incorrecto uso, puede hacer que los navegadores rendericen la página de forma completamente diferente a lo que teníamos previsto. Todas las páginas nuevas que se hagan deberían contener esta declaración y hacerlo de forma correcta, con el fin de cumplir los estándares por un lado y garantizar resultados de renderizado homogéneos por otro.

Una declaración DOCTYPE suele tener una estructura similar a la siguiente:

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

En este ejemplo se indica que la página debe validarse como XHTML Transitional utilizando el DTD existente en la url http://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.

Existen tres tipos de documentos XHTML: Strict, Transitional y Frameset. A continuación se muestra la declaración de cada una de ellas con la referencias válidad a cada DTD, y un poco más abajo sus diferencias para saber cuándo usar cada una.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
  • Strict: este tipo de documento está principalmente ideado para su utilización con CSS, separando completamente el contenido y la presentación. Para ello no permite la utilización de etiquetas y atributos ya en desuso orientados a la presentación, como font, center y otros. Escribiendo páginas en XHTML 1.0 Strict se consiguen páginas bien estructuradas y fácilmente adaptables mediante CSS, pero tiene la desventaja de crear incompatibilidades con ciertos navegadores.
  • Transitional: incluye todas las características de XHTML 1.0 Strict, pero añade características orientadas a la presentación ya en desuso.
  • Frameset: es una variante del Transitional para las páginas que utilizan frames

Por último hay que tener en cuenta que no es necesario que las páginas XHTML contengan una instrucción prolog similar a salvo en los modos estrictos. En realidad esta instrucción es únicamente necesaria cuando el contenido de la página se sirve como text/xml y además su utilización hace que Explorer 6 pase a modo Quirk por lo que no se recomienda su uso. Si necesitamos indicar el encoding de la página se recomienda utilizar la etiqueta meta correspondiente.

Referencias

Twitter Digg Delicious Stumbleupon Technorati Facebook Email

19 Respuestas para “¿Qué es el XHTML Doctype?”

  1. Antes del Doctype no debería aparecer nada, ni siquiera comentarios html (salvo saltos de línea). En caso contrario el navegador puede ponerse en modo compatibilidad, Explorer 6 lo hace así.

  2. En mi web estoy intentando rediseñarla para el XHTML y la Accesibilidad. http://www.ntra-net.com/dt3/promoter/index.php

  3. Antes de esto no tenia ni pisca de idea, gracias chicos 😉

  4. No entendi nada sobre este articulo ¿podrian ser mas explicitos? gracias

  5. Hola Gina, te recomiendo que mires en las referencias y alguna otra página en Google para tener una idea más exacta, considero que el artículo ya es bastante explícito, aunque sí que es cierto que hacen falta algunos conocimientos previos para entenderlo.

  6. Idem. Me quedé un poco colgado con el artículo. Habría que desarrollarlo un poquito mas. S2.

  7. Yo diria que es completamente correcto. Si alguien no lo entiende que busque mas informacion por la red. No todo debe estar orientado «for dummies»

  8. Interesante el artículo. Me gustó mucho aunque me deja algunos vacíos. Buscaré más información en google (si alguien sabe de algunos buenos enlaces sobre el tema se lo agradeceré)

  9. El articulo lo encontre buenisimo, solo que al final (ultimo parrafo) no entendi bien, especialmente la frase «instrucción prolog».
    Es mi primer comentario 😉

    La pagina no la conocia hasta ayer y la puse en mis favoritos.

  10. Con «instrucción prolog» me refiero al <?xml….>. Si te fijas pese a formar parte del documento xml, su estructura no está basada en etiquetas de apertura y cierre, ya que empieza con un interrogante. Mediante estas instrucciones es posible indicar información que queremos que los programas que lean el xml tengan en cuenta. Por ejemplo, en el caso que muestro, se indica que el xml es versión 1 y está codificado como utf-8.

    De todas formas, esto es válido para documentos XML, y pese a XHTML es en también XML, por diferentes limitaciones de los navegadores, incluir estas instrucciones al principio del documento, puede acarrear problemas, principalmente en Internet Explorer 6.

  11. Pues si,es muy cierto , esto del doctype es muy importante, me parece q todo funciona más con esto si:

    porque colocándo en mi página, uno de esos tres mencionados anteriormente,no me funciona por ejemplo, el «background-position».No sé si es estándar el DOCTYPE que estoy utilizando.

  12. Muy buen artículo, buscaba algo que me informara sobre las diferencias strict y transitional, y qué mejor que este. Gracias.

  13. El articulo es genial ya que difine muchas cosas que en mi caso ya usaba hace algun tiempo pero no sabia que significaban.
    Por mi parte me gustaria saber donde puedo encontrar una gramatica para XHTML.

  14. Que buen artículo chicos, gracias…

  15. Samuel Alejos 04. Ago, 2008 en 4:27 am

    Excelente articulo. Al igual que otros no tenia ni idea de que hacia esa etiqueta, solo la copiaba y ya. Gracias

  16. hola no se si esto tiene algo que ver con el tema que se esta tratando aqui, pero tengo un problema a la hora de navegar por internet y es que se me habren paginas publicitarias en la que la configuracion empieza por doctype y no se de que manera poder eliminar que aparezca este tipo de paginas asociadas con este documento.

  17. Exelente artículo,
    siempre tuve duda del doctype..

    Gracias

Trackbacks/Pingbacks

  1. Análisis de los sitios web de los candidatos a las Elecciones Generales 2008 en España | 5líneas - 26. Feb, 2008

    […] La asignatura pendiente es la validación del código, ninguna de las páginas lo consigue, existiendo algunas webs que ni tan siquiera declaran el DOCTYPE del documento. […]

  2. Objeto <table> más grande que <body> | hilpers - 20. Ene, 2009

    […] Re: Objeto <table> más grande que <body> Hola Ana A la etiqueta body no la tienes que tocar mucho… 1) la tabla: <table width="100%" height="100%" border="0" cellspacing="0" cellpadding="0"> …. 2) body Normal. Pero si quieres puedes sacar el margen con css 3) importante….si tu pagina empieza algo asi <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; <html xmlns="http://www.w3.org/1999/xhtml"&gt; <head> Tiene que quedar algo asi <html> <head> simple.. si el DOCTYPE Enlaces: Porque debes sacar el DOCTYPE para que se pueda "aceptar" por llamarlo asi lo que necesitas realizar con la tabla y sus propiedades de alto y ancho que son características orientadas a la presentación que deberian estar en un estilo CSS…. bueno esto mismo que deseas realizar con la tabla se deberia hacer con contenedores DIV.. ¿Qué es el XHTML Doctype? http://www.eslomas.com/index.php/arc…xhtml-doctype/ Espero que te sirva de ayuda o guia… ______________________ Jose A. Fernandez Ana Cristina Aranda ha escrito: > Hola a todos. > > En una de mis páginas estoy haciendo una tabla que debe ocupar el tamaño > completo de la página y para ello a la propiedad Height del Body le indico > que debe ser del 100% y lo mismo hago en la propiedad Height de la tabla.La > tabla está dentro del Body y sin embargo, se está saliendo de este. (lo > verifiqué porque le puse bordes a cada uno de los objetos y comprobé que el > borde inferior de la tabla está quedando por fuera del borde inferior del > body de la página). > > El código que tengo es este por si alguien me puede dar una manito con esto. > > <body onload="CargarPaginas();" style="height:100%"> > <form id="form1" runat="server"> > <table width="100%" border="1" cellpadding="0" cellspacing="2" > id="tblEvent" style="height: 100%; border-right: fuchsia thick solid; > border-top: fuchsia thick solid; border-left: fuchsia thick solid; > border-bottom: fuchsia thick solid;"> > <tr id="trHeader" style="height: 20%;" valign="top"> > <td style="width: 55%;"> > <table id="tb1" style="border-right: maroon thicksolid; > border-top: maroon thick solid; border-left: maroon thick solid; > border-bottom: maroon thick solid"> > <tr> > <td style="width:10%"> > <a > href="javascript:ActualizarFrame(‘1’)">Etiqueta1</a> > </td> > <td style="width:10%"> > <a > href="javascript:ActualizarFrame(‘2’)">Etiqueta2</a> > </td> > <td> > </td> > </tr> > > <tr> > <td colspan="3"> > <iframe id="ifr1" src="page1.aspx" > style="width: 100%; border-top-style: none; border-right-style: none; > border-left-style: none; border-bottom-style: none; height: 100%;" > runat="server" marginheight="0" marginwidth="0"> > </iframe> > </td> > </tr> > </table> > </td> > > <td> > <iframe style="width: 100%; border-top-style: none; > border-right-style: none; border-left-style: none; border-bottom-style: none; > height: 100%;" src="Info.aspx" id="ifrInfo" marginheight="0" marginwidth="0"> > </iframe> > </td> > </tr> > > <tr id="trMain" valign="top" style="height:80%"> > <td colspan="2" style="height:100%"> > <table id="tblMain" style="width:100%; border-right: > blue thick solid; border-top: blue thick solid; border-left: blue thick > solid; border-bottom: blue thick solid; height: 100%;"> > <tr style="height:5%"> > <td style="width:10%"> > <a > href="javascript:ActualizarFrame(‘3’)">Etiqueta3</a> > </td> > <td style="width:10%"> > <a > href="javascript:ActualizarFrame(‘4’)">Etiqueta4</a> > </td> > <td style="width:10%"> > <a > href="javascript:ActualizarFrame(‘5’)">Etiqueta5</a> > </td> > <td style="width:10%"> > <a > href="javascript:ActualizarFrame(‘6’)">Etiqueta6</a> > </td> > <td> > </td> > </tr> > > <tr style="height:95%"> > <td colspan="5"> > <iframe style="width: 100%; > border-top-style: none; border-right-style: none; border-left-style: none; > border-bottom-style: none; height: 100%;" src="page2.aspx" id="ifr2" > marginheight="0" marginwidth="0"> > </iframe> > </td> > </tr> > </table> > </td> > </tr> > </table> > </form> > > </body> > > Gracias, > > Ana Cristina […]