Trabajando con esquemas HTML5

SOLUCIÓN

A lgunas indicaciones.

PRIMERA PARTE:

 Tendrás que escribir el siguiente código JavaScript en la sección de cabecera de la

página:

<script>
document.createElement("header");
document.createElement("nav");
document.createElement("aside");
document.createElement("main");
document.createElement("article");
document.createElement("section");
document.createElement("footer");
</script>

 El código anterior sirve para que el navegador Internet Explorer 8 y anteriores incluyan
en el DOM del documento los elementos estructurales HTML5, aunque no los entiendan.

 Tendrás que añadir la siguiente regla en la hoja de estilo:

header, nav, aside, main, article, section, footer {

display: block;
}

 Esto permite que los navegadores antiguos muestren los elementos estructurales como
elementos de bloque y no en línea, como hacen por defecto.

SEGUNDA PARTE:

 Si validas el código como documento HTML 4.01, el resultado que obtendrás es que
hay errores, ya que no se reconocen los elementos estructurales.

Diseño web avanzado - HTML5 y CSS3

Copyright (c) Computer Aided Elearning, S.A.

  Sin embargo, si validas el código con el doctype de HTML5, entonces sí que superará
la validación, aunque con advertencias.

No son errores, por lo que el código es correcto según el doctype de HTML5, pero se
indica si quieres considerar la posibilidad de utilizar la etiqueta <h1> solo como título
principal del documento debido a problemas con algunos dispositivos de accesibilidad
(para personas con alguna discapacidad), como los lectores de pantalla, que no interpretan
bien el hecho de utilizar más de un h1.

Es nuestra decisión hacer caso de esto o no. Por ejemplo, en este caso podríamos
utilizar un <h3> para el título de cada artículo; o mantener el <h1>, que es más correcto
semánticamente y esperar que no haya problemas con los dispositivos que utilicen los
usuarios o que estos dispositivos se actualicen correctamente.

Desde el punto de vista del posicionamiento SEO, el uso de varios títulos h1 también
puede dar algún problema.

 Para que no se tenga en cuenta el título h2 en el esquema del documento, puedes

utilizar la etiqueta <hgroup>:

<header>
<hgroup>
<h1>Título de la página</h1>
<h2>Subtítulo de la página</h2>
</hgroup>
</header>

 En cuanto a la hoja de estilo, debes utilizar selectores complejos para diferenciar entre
el elemento h1 del título principal de la página web y los elementos h1 que aparecen en
el interior de cada artículo:

se permite el uso de este manual únicamente a los alumnos de este curso

 <style type="text/css">
h1 {
color: red;
font-size: 4em;
}

article > h1 {
color: blue;
font-size: 1.5em;
}
</style>

Diseño web avanzado - HTML5 y CSS3

Copyright (c) Computer Aided Elearning, S.A.