Capítulo 1 Documentos HTML5-3
HTML5 fue desarrollado con la intención de simplificar, especificar y organizar el código. Para lograr este propósito, nuevas etiquetas y atributos fueron agregados y HTML fue completamente integrado a CSS y Javascript. Estas incorporaciones y mejoras de versiones previas están relacionadas no solo con nuevos elementos sino también con cómo usamos los ya existentes.
<mark>
La etiqueta <mark> fue agregada para resaltar parte de un texto que originalmente no era considerado importante pero ahora es relevante acorde con las acciones del usuario. El ejemplo que más se ajusta a este caso es un resultado de búsqueda. El elemento <mark> resaltará la parte del texto que concuerda con el texto buscado:
<span>Mi<mark> coche</mark>es rojo</span>
Listado 1-19. Uso del elemento <mark> para resaltar la palabra «coche».
Si un usuario realiza una búsqueda de la palabra «coche», por ejemplo, los resultados podrían ser mostrados con el código del Listado 1-19. La frase del ejemplo representa los resultados de la búsqueda y las etiquetas <mark> en el medio encierran lo que era el texto buscado (la palabra «coche»). En algunos navegadores, esta palabra será resaltada con un fondo amarillo por defecto, pero siempre podemos sobrescribir estos estilos con los nuestros utilizando CSS, como veremos en próximos capítulos.
En el pasado, normalmente obteníamos similares resultados usando el elemento <b>. El agregado de <mark> tiene el objetivo de cambiar el significado y otorgar un nuevo propósito para éstos y otros elementos relacionados:
• <em> es para indicar énfasis (reemplazando la etiqueta <i> que utilizábamos anteriormente).
• <strong> es para indicar importancia.
• <mark> es para resaltar texto que es relevante de acuerdo con las circunstancias.
• <b> debería ser usado solo cuando no hay otro elemento más apropiado para la situación.
<small>
La nueva especificidad de HTML es también evidente en elementos como <small>. Previamente este elemento era utilizado con la intención de presentar cualquier texto con letra pequeña. La palabra clave referenciaba el tamaño del texto, independientemente de su significado. En HTML5, el nuevo propósito de <small> es presentar la llamada letra pequeña, como impresiones legales, descargos, etc…
<small>Derechos Reservados © 2011 MinkBooks</small>
Listado 1-20. Inclusión de información legal con el elemento <small>.
<cite>
Otro elemento que ha cambiado su naturaleza para volverse más específico es <cite>. Ahora las etiquetas <cite> encierran el título de un trabajo, como un libro, una película, una canción, etc.
<span>Amo la película <cite> Tentaciones</cite> </span>
Listado 1-21. Citando una película con el elemento <cite>.
<address>
El elemento <address> es un viejo elemento convertido en un elemento estructural. No necesitamos usarlo previamente para construir nuestra plantilla, sin embargo podría ubicarse perfectamente en algunas situaciones en las que debemos presentar información de contacto relacionada con el contenido del elemento <article> o el cuerpo completo.
Este elemento debería ser incluido dentro de <footer>, como en el siguiente ejemplo:
<article>
<header>
<h1>Título del mensaje </h1>
</header>
Este es el texto del mensaje <footer>
<address>
<a href=»http://www.jdgauchat.com»>JD Gauchat</a> </address>
</footer>
</article>
Listado 1-22. Agregando información de contacto a un <article>.
<time>
En cada <article> de nuestra última plantilla (Listado 1-18), incluimos la fecha indicando cuándo el mensaje fue publicado. Para esto usamos un simple elemento <p> dentro de la cabecera (<header>) del mensaje, pero existe un elemento en HTML5 específico para este propósito. El elemento <time> nos permite declarar un texto comprensible para humanos y navegadores que representa fecha y hora:
<article>
<header>
<h1>Título del mensaje dos</h1>
<time datetime=»2011-10-12″ pubdate>publicado 12-10-2011</time> </header>
Este es el texto del mensaje </article>
Listado 1-23. Fecha y hora usando el elemento <time>.
En el Listado 1-23, el elemento <p> usado en ejemplos previos fue reemplazado por el nuevo elemento <time> para mostrar la fecha en la que el mensaje fue publicado. El atributo datetime tiene el valor que representa la fecha comprensible para el navegador (timestamp). El formato de este valor deberá seguir un patrón similar al del siguiente ejemplo: 2011-10-12T12: 10: 45. También incluimos el atributo pubdate, el cual solo es agregado para indicar que el valor del atributo datetime representa la fecha de publicación.
En la especificación HTML5, HTML está a cargo de la estructura del documento y provee un grupo completo de nuevos elementos para este propósito. La especificación también incluye algunos elementos con la única tarea de proveer estilos. Esta es una lista de los que consideramos más relevantes:
<header> Este elemento presenta información introductoria y puede ser aplicado en diferentes secciones del documento. Tiene el propósito de contener la cabecera de una sección pero también puede ser utilizado para agrupar índices, formularios de búsqueda, logos, etc…
<nav> Este elemento indica una sección de enlaces con propósitos de navegación, como menús o índices. No todos los enlaces dentro de una página web tienen que estar dentro de un elemento <nav>, solo aquellos que forman partes de bloques de navegación.
<section> Este elemento representa una sección general del documento. Es usualmente utilizado para construir varios bloques de contenido (por ejemplo, columnas) con el propósito de ordenar el contenido que comparte una característica específica, como capítulos o páginas de un libro, grupo de noticias, artículos, etc.
<aside> Este elemento representa contenido que está relacionado con el contenido principal pero no es parte del mismo. Ejemplos pueden ser citas, información en barras laterales, publicidad, etc.
<footer> Este elemento representa información adicional sobre su elemento padre. Por ejemplo, un elemento <footer> insertado al final del cuerpo proveerá información adicional sobre el cuerpo del documento, como el pie normal de una página web. Puede ser usado no solo para el cuerpo sino también para diferentes secciones dentro del cuerpo, otorgando información adicional sobre estas secciones específicas.
<article> Este elemento representa una porción independiente de información relevante (por ejemplo, cada artículo de un periódico o cada entrada de un blog). El elemento <article> puede ser anidado y usado para mostrar una lista dentro de otra lista de ítems relacionados, como comentarios de usuarios en entradas de blogs, por ejemplo. <hgroup> Este elemento es usado para agrupar elementos H cuando la cabecera tiene múltiples niveles (por ejemplo, una cabecera con título y subtítulo).
<figure> Este elemento representa una porción independiente de contenido (por ejemplo, imágenes, diagramas o videos) que son referenciadas desde el contenido principal. Esta es información que puede ser removida sin afectar el fluido del resto del contenido. <figcaption> Este elemento es utilizado para mostrar una leyenda o pequeño texto relacionado con el contenido de un elemento <figure>, como la descripción de una imagen.
<mark> Este elemento resalta un texto que tiene relevancia en una situación en particular o que ha sido mostrado en respuesta de la actividad del usuario.
<small> Este elemento representa contenido al margen, como letra pequeña (por ejemplo, descargos, restricciones legales, declaración de derechos, etc.).
<cite> Este elemento es usado para mostrar el título de un trabajo (libro, película, poema, etc.).
<address> Este elemento encierra información de contacto para un elemento <article> o el documento completo. Es recomendable que sea insertado dentro de un elemento
<footer>.
<time> Este elemento se utiliza para mostrar fecha y hora en formatos comprensibles por los usuarios y el navegador. El valor para los usuarios es ubicado entre las etiquetas mientras que el específico para programas y navegadores es incluido como el valor del atributo datetime. Un segundo atributo optativo llamado pubdate es usado para indicar que el valor de datetime es la fecha de publicación.