validation - plantilla - it is mandatory that the doctype declaration is the first line of every html5 page
¿Puedo agregar Microdatos de HTML5 a un sitio XHTML Strict y seguir siendo compatible? (5)
Desde que los principales motores de búsqueda decidieron usar schema.org el pasado junio (2011) como la forma de hacer fragmentos enriquecidos, esta pregunta se ha vuelto mucho más importante ya que XHTML5 aún no tiene una DTD (BTW, http://www.html5dtd.org/ está trabajando en una DTD XHTML5 y puede que esté lista cuando leas esto, si es así, ignora lo que voy a decir. Y lo que estoy a punto de decir resume una página que coloqué en http://www.nedprod.com/programs/portable/XHTMLwithHTML5microdata/ hace unas semanas, y tiene más detalles, incluida una demo de fragmentos enriquecidos si lo desea.
Tenía la necesidad de extender XHTML 1.x Strict con microdatos schema.org/HTML5 y hacer que todo se valide correctamente para actualizar nedprod, y Microsoft Expression Web tiene la tendencia ocasional a comer bits de HTML que edita, por lo que la validación es útil para capturar cuando borks. Por lo tanto, he creado estos DTD que extienden los XHTML 1.0 estándar:
- http://www.nedprod.com/xhtml1-strict-with-html5-microdata.dtd
- http://www.nedprod.com/xhtml1-transitional-with-html5-microdata.dtd
Para usarlo, tome una copia de su DTD deseada (no use el original de nedprod, no puedo pagar el ancho de banda) y use lo siguiente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict with HTML5 microdata//EN" "xhtml1-strict-with-html5-microdata.dtd">
o ...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional with HTML5 microdata//EN" "xhtml1-transitional-with-html5-microdata.dtd">
... o más probablemente, anule la DTD utilizada para la validación por su configuración particular de validación XML.
Por cierto, aquí hay algo interesante, y solo incluyo esto porque es útil saberlo al responder la pregunta. Honestamente, pensé que el uso de los tipos de documentos anteriores invocaría el modo de peculiaridades al renderizar. Resulta, para mi gran sorpresa, que IE8, Chrome 14, Firefox 5 y Opera 11.50 representan un doctype de este tipo en el modo Estándar. ¡Quien lo hubiera pensado! Por lo tanto, si lo desea, puede cargar sus páginas XHTML en la Internet pública con el doctype personalizado y los navegadores más nuevos al menos harían lo correcto.
Espero que esto ayude a alguien,
Niall
Tengo un sitio codificado en XHTML 1.0 Strict. Quiero usar los nuevos Microdatos para agregar migas de pan a mi sitio (para que Google los entienda ).
Mis viejas migas de pan sin microdatos marcados se ven así:
<ul>
<li><a href="...">Level 1</a></li>
<li><a href="...">Level 2</a></li>
<li><a href="...">Level 3</a></li>
</ul>
Según Google, para marcar las migajas de pan utilizando Microdata, se extiende el código anterior de esta manera:
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="..." itemprop="url">
<span itemprop="title">Level 1</span>
</a>
</li>
...
</ul>
Pero esto no es válido XHTML 1.0 Strict.
¿Qué tengo que hacer?
¿Debo ignorar los conflictos de validación?
¿Debería escribir itemscope="itemscope" lugar de solo itemscope (esto sería un XML válido, pero aún no es un XHTML válido)?
¿Debo cambiar el Doctype para que sea HTML5 en lugar de XHTML 1.0 Strict?
Quiero que esto funcione todo el camino de regreso a IE6!
Por favor aconséjame :)
Ejemplo de HTML 5 válido
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Example page</title>
</head>
<body>
<div itemscope="" itemtype="http://schema.org/MediaObject">
<div itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject">
<meta itemprop="name" content="Breast Augmentation Video Diary">
<meta itemprop="duration" content="PT12M54S">
<meta itemprop="thumbnailUrl" content="http://www.plastic-surgery-estonia.com/new-assets/images/thumbnails/breast-augmentation.jpg">
<meta itemprop="contentURL" content="http://www.youtube.com/watch?v=BwPN6eCpxTk">
<meta itemprop="embedURL" content="http://www.youtube.com/watch?feature=player_embedded&v=BwPN6eCpxTk">
<meta itemprop="uploadDate" content="2010-11-09">
<iframe src="http://www.youtube.com/embed/BwPN6eCpxTk?rel=0&autohide=1&modestbranding=1&showinfo=0"></iframe>
<span itemprop="description">Video Diary</span>
</div>
</div>
</body>
</html>
He encontrado estos enlaces útiles:
- http://support.google.com/webmasters/bin/answer.py?hl=en&answer=2413309&topic=1088474&ctx=topic
- http://www.reelseo.com/embedded-youtube-indexed-google/
Sí, si desea usar el microscopio electrónico en XHTML, deberá escribir itemscope="itemscope" y utilizar XHTML5 (el mismo DOCTYPE que HTML5, pero la sintaxis XML).
itemscope no está incluido en W3 HTML5, pero está presente en la versión de WHATWG, por lo que la validación puede seguir siendo una dificultad. Parece que hay bastante argumento político sobre este tema, que no he estado siguiendo ya que parece bastante tedioso.
Por el momento, si desea usar las anotaciones de ruta de navegación en un formato de documento finalizado y validable, puede usar RDFa en su lugar: la propuesta alternativa (pero más antigua), de la que trata el argumento, y usar el doctype existente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
Utilice la application/ld+json tipo MIME y un generador de microdatos para transformar el marcado en datos:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>microdata.xhtml</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
</head>
<body>
<div>
<script type="application/ld+json">
{"items": [{
"type": ["https://schema.org/breadcrumb"],
"properties":{
"url": ["..."],
"title": ["Level 1"]
}
}]
}
</script>
</div>
</body>
</html>
o un data:uri en una etiqueta de objeto:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>microdata.xhtml</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/>
</head>
<body>
<div>
<object data="data:text/html;charset=utf-8;base64,PHVsPiA8bGkgaXRlbXNjb3BlIGl0ZW10eXBlPSJodHRwOi8vZGF0YS12b2NhYnVsYXJ5Lm9yZy9CcmVhZGNydW1iIj4gICAgICAgICA8YSBocmVmPSIuLi4iIGl0ZW1wcm9wPSJ1cmwiPiAgICAgICAgICAgPHNwYW4gaXRlbXByb3A9InRpdGxlIj5MZXZlbCAxPC9zcGFuPiAgICAgICAgIDwvYT4gICAgICAgICA8L2xpPiAgICAgICA8L3VsPg==">
<?microdata
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="..." itemprop="url">
<span itemprop="title">Level 1</span>
</a>
</li>
</ul>
?>
</object>
<!--[if lt IE 8]>
<object data="mhtml://#foo">
<?microdata
<ul>
<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="..." itemprop="url">
<span itemprop="title">Level 1</span>
</a>
</li>
</ul>
?>
<div id="foo">
PHVsPiA8bGkgaXRlbXNjb3BlIGl0ZW10eXBlPSJodHRwOi8vZGF0YS12b2NhYnVsYXJ5Lm9yZy9CcmVhZGNydW1iIj4gICAgICAgICA8YSBocmVmPSIuLi4iIGl0ZW1wcm9wPSJ1cmwiPiAgICAgICAgICAgPHNwYW4gaXRlbXByb3A9InRpdGxlIj5MZXZlbCAxPC9zcGFuPiAgICAgICAgIDwvYT4gICAgICAgICA8L2xpPiAgICAgICA8L3VsPg==
</div>
</object>
<![endif]-->
</div>
</body>
</html>
Quiero que esto funcione todo el camino de regreso a IE6!
Use la application/xhtml+xml XSLT shim para admitir IE6 y extiéndalo para obtener una copia del marcado.
Referencias
prueba y valida algunas de las páginas de google ... no validan. La validación es una herramienta impresionante, pero nada más, aunque aplaudo su determinación. Si estás preocupado por la validación, cambiaría a HTML5.