Una vez más, hay que señalar al principio del tutorial que no hay que esperar nada milagroso de los elementos presentados. Visualmente, no impresionan mucho. Sin embargo, son interesantes porque puedes utilizarlos para estructurar tus documentos de forma lógica y semántica.
Zonas de navegación
El elemento nav puede utilizarse para etiquetar semánticamente barras de navegación u otras áreas para elementos adicionales. Este elemento está pensado principalmente para marcar hipervínculos a otras páginas o información adicional.
Un ejemplo:
<nav> <a href="index.html">Página principal</a> <a href="html5.html">Aprende HTML5</a> <a href="css.html">CSS</a> <a href="cms.html">¡Joomla!</a> <a href="wordpress.html">Wordpress</a> </nav>
Puedes usar cualquier elemento dentro de nav. Puede seguir definiendo la navegación mediante listas. Sin embargo, también se pueden utilizar otros elementos dentro de nav sin ningún problema. nav también puede aparecer varias veces dentro de un documento.
Especificar detalles
Otro elemento interesante son los detalles. Puede utilizarlo -como el nombre del elemento sugiere- para especificar información adicional sobre el contenido. Tenga en cuenta que el elemento details sólo resulta realmente interesante junto con el elemento summary. Más información sobre este elemento a continuación.
Primero un ejemplo del uso de details:
<articulo> <detalles> <summary>Referencias al artículo...</summary> <ul> <li><a href="referencias1.html">Enlace 1</a></li> <li><a href="referencias2.html">Enlace 2</a></li> <li><a href="links3.html">Enlace 3</a></li> </ul> </detalles> <detalles> <summary>Información de la fuente del artículo ...</summary> <ul> <li><a href="quelle1.html">Enlace 4</a></li> <li><a href="quelle2.html">enlace 5</a></li> <li><a href="quelle3.html"">enlace 6</a></li> </ul> </details> </article>
El contenido del elemento detalles se oculta al visitante hasta que hace clic en el elemento resumen contenido dentro de detalles.
Esto podría ser interesante en relación con un reproductor de vídeo, por ejemplo. He aquí otro ejemplo:
<video id="film" width="320" height="180" autoplay> <source src="video.mp4" type="video/mp4"> <source src="video.webm" type="video/webm"> <source src="video.ogv" type="video/ogg"> </video> <details open> <summary>Ocultar/mostrar los controles del reproductor de vídeo</summary> <p> <button id="start" onClick="start()">Iniciar/pausar</button> <button id="mute" onClick="mute()">Silenciar</button> <button id="louder" onClick="louder()">Más alto</button> <button id="quieter" onClick="quieter()">Más bajo</button> </p> </detalles> </detalles>
Cuando se llama a la página, inicialmente sólo es visible la ventana del reproductor.
Sin embargo, si un visitante hace clic en el enlace mostrar y ocultar, se muestra el contenido definido dentro de resumen.
Según la especificación, los navegadores deben mostrar el contenido estándar si no se encuentra ningún elemento de resumen.
El atributo open para detalles también es interesante.
<detalles abiertos> ... </detalles>
Si se establece este atributo, el contenido del elemento summary se puede ver directamente cuando se carga la página.
Resúmenes
Ahora echemos otro vistazo detallado al elemento resumen.
<articulo> <detalles> <sumario>Referencias al artículo...</sumario> <ul> <li><a href="verweise1.html">Enlace 1</a></li> <li><a href="verweise2.html">Enlace 2</a></li> <li><a href="links3.html">Enlace 3</a></li> </ul> </detalles> <detalles> <summary>Información de la fuente del artículo ...</summary> <ul> <li><a href="quelle1.html">Enlace 4</a></li> <li><a href="quelle2.html">enlace 5</a></li> <li><a href="quelle3.html"">enlace 6</a></li> </ul> </detalles> </artículo>
Dentro de summary, el contenido que aún no se ha abierto se define junto con details. Gracias a summary, se puede incluir información adicional que sólo se muestra cuando es necesario.
Es cierto que, por supuesto, también podría realizar fácilmente áreas expandibles y plegables mediante JavaScript. Sin embargo, si JavaScript está desactivado en el navegador, la aplicación no funcionará. Por esta razón, es deseable que en un futuro próximo se ofrezca una amplia compatibilidad con los detalles y el resumen.
Áreas marginales y marginalia
La información adicional, los marginales, las referencias cruzadas, etc. pueden etiquetarse en HTML5 con el elemento aside. Aunque el contenido marcado de este modo se encuentra en el contexto del documento global, no está directamente asociado a él.
Tenga en cuenta que la especificación HTML5 no especifica qué dimensión debe aplicarse a un área marcada mediante aside. Por tanto, el contenido de aside podría mostrarse como margen, por ejemplo, pero también como barra lateral.
El siguiente ejemplo muestra la definición de un área aside.
<body> <header> <h1>PSD-Tutorials.de</h1> </header> <article> <h2>Creación de aplicaciones web (parte 10): jQuery mobile (2)</h2> <p>En este tutorial, se crea la primera página real de jQM. El requisito previo para ello es el framework HTML básico que ya has aprendido.</p> <aside> <h3>Más información</h3> <ul> <li><a href="#/fn1">Más información...</a></li> </ul> </aside> </article> <aside> <nav> <h2>Navegación</h2> <ul> <li><a href="#">Página principal</a></li> <li><a href="#">Contacto</a></li> </ul> </nav> </aside> </body>
Añadir información sobre la hora
La información de tiempo puede etiquetarse de forma especial utilizando el nuevo elemento Tim. La característica especial de este elemento es que la información horaria puede ser leída por humanos y máquinas.
Para los humanos, la información temporal se escribe en el elemento Tim. El atributo datetime del elemento Tim se utiliza para que los navegadores también puedan leer la información horaria.
<p>Nos reuniremos el <time datetime="2014-04-15 19:00">15 de abril a las 19:00</time></p> <p>.
Llegados a este punto, nos gustaría señalar una vez más que esto no tiene ningún efecto visual en los navegadores actuales, sino que solo pretende que la información horaria sea legible por máquina.
Resaltar textos
Con el elemento mark es posible resaltar visualmente palabras o pasajes enteros de texto. La especificación HTML5 establece explícitamente que el elemento sólo debe utilizarse junto con contenido textual. Además, debe tener una relación específica con el contexto.
Un ejemplo:
<p>En este tutorial se crea la primera página real de jQM. El prerrequisito para esto es el <mark>HTML framework</mark> que ya has aprendido.</p>
La forma en que los navegadores implementan el resaltado no es fija.
Sin embargo, tanto Google Chrome como Firefox utilizan un fondo amarillo.
Resaltar diálogos
HTML5 también se ha diseñado para resaltar los diálogos por separado. El elemento diálogo está disponible para este fin. Sin embargo, el elemento de diálogo sólo es compatible actualmente con Safari y Google Canary, es decir, la versión para desarrolladores del navegador.
He aquí otro ejemplo:
<dialogue id="dialogue" style="width:50%;background-color:#F4FFEF;border:1px dotted black;"> <p>Este es el contenido de la caja.</p> <button id="hide">Cerrar</button> </dialogue> <button id="show">Mostrar el contenido</button> </div> <script type="text/JavaScript"> (function() { var dialog = document.getElementById('dialog'); document.getElementById('show').onclick = function() { dialog.show(); }; document.getElementById('hide').onclick = function() { dialog.close(); }; })(); </script>
En cuanto se pulsa el botón, se muestra el diálogo. Para que todo funcione, el ejemplo anterior utiliza una combinación de HTML5, CSS y JavaScript.
