HTML5 introduce nuevos elementos "inline" muy útiles para aumentar nuestro existente arsenal de "span, strong, em, abbr, etc". A partir de ahora a estos elementos ya no se les llamará "inline", sino “text-level semantics.”

mark

Cuando revisamos un listado de una búsqueda en una web, usualmente vemos el término por el que hemos buscado iluminado o resaltado dentro de cada resultado. Por lo general se marca cada instancia del término de búsqueda con un elemento span, pero span desde un punto de vista semántico, se queda un poco cojo, ya que realmente sirve para poco más que aplicarle una clase específica a un elemento dentro de un estilo ya definido.

Se podría utilizar em o strong pero semánticamente no sería correcto ya que no querrías otorgarle una “importancia” al término de búsqueda, simplemente queremos que de alguna manera quede resaltado.

Introduzcamos el elemento mark:

<h1>Resultado de búsqueda para 'unicornio'</h1>
<ol>
<li>
<a href="http://www.3sellers.com/">Leyendo el Gran <mark>unicornio</mark> azul.</a>
</li>
</ol>

El elemento mark no lleva implícito ninguna importancia para el contenido salvo el mostrarlo como algo de interés en el contexto en que esté. Según la especificación, mark denota fragmento de texto de un documento marcado o iluminado con fines de referencia debido a su importancia en otro contexto.

meter

El elemento meter puede ser utilizado para marcar medidas, siempre que esas medidas sean parte de una escala con valores mínimos y máximos.

<meter>9 de 10 gatos</meter>

No es obligatorio escribir el valor máximo si no quiere, para eso se puede utilizar el atributo max.

<meter max="10">9 gatos</meter>

Existe un atributo min correspondiente. También se puede utilizar los atributos high, low, y optimum. Si lo desea, puede incluso ocultar la medición dentro del atribulo value.

<meter low="-273" high="100" min="12" max="30" optimum="21" value="25">Hace bastante calor en esta época del año.</meter>

progress

Mientras el elemento meter es muy bueno para describir algo que ya ha sido medido. El elemento progress te permite marcar un valor que está en proceso de cambio.

Su perfil está <progress>60%</progress> completado.

Otra vez se pueden utilizar los atributos min, max, y value:

<progress min="0" max="100" value="60"></progress>

El elemento progress es más útil cuando se utiliza combinado con DOM Scripting. Se puede utilizar JavaScript para actualizaciones dinámicas del valor, permitiendo al navegador comunicar el cambio al usuario. Muy útil para cargar archivos con Ajax.

Estructura

HTML5 presenta una estructura basada en la experiencia de los desarrolladores de HTML y CSS. Tras haber valorado un millón de páginas y haber tabulado los nombres más comunes que se le asigna a los elementos class, nombres como “header, footer y nav” prevalecieron.

section

El elemento section es usado para agrupar por temas contenido relacionado. Eso suena muy similar al elemento div, que suele utilizarse como contenedor de contenido genérico. La diferencia es que div no tiene sentido en la semántica; no te dice nada sobre el contenido que lleva dentro. El elemento section, por otra parte, se utiliza de forma explícita para agrupar contenido relacionado.

Usted podría sustituir a algunos de sus elementos div con elementos section, pero recuerde siempre preguntarse ¿Está todo el contenido relacionado?

<section>
<h1>Ave del paraíso</h1>
<p> Narrativa policíaca y de intriga/Novela negra.</p>
<p> CAROL JOICE</p>
</section>

header

Especialistas en HTML5 describen al elemento header como un contenedor de “a group of introductory or navigational aids", que viene siendo algo como: elementos que sirven como introducción o elemento para la navegación. Eso suena razonable. Ese es el tipo de contenido que yo esperaría encontrar en un encabezado, y en inglés la palabra "header" se utiliza a menudo como sinónimo de cabecera (masthead).

Existe una diferencia crucial entre el elemento header en HTML5 y el uso aceptado y generalizado de la palabra  encabezado o cabecera. Por lo general en una página existe una sola cabecera pero un documento puede tener múltiples encabezados, o lo que sería lo mismo múltiple elementos “header”. Se puede utilizar un elemento header dentro de un elemento section  por ejemplo. Las especificaciones describen los elementos section como “a thematic grouping of content, typically with a heading”, o sea, una agrupación temática de contenido, generalmente con un encabezado.

<section>
<header>
<h1>Ave del paraíso</h1>
</header>
<p>Narrativa policíaca y de intriga/Novela negra.</p>
<p>CAROL JOICE</p>
</section>

El elemento header aparecerá por lo general en la parte superior de un documento o section, no tiene que ser así obligatoriamente. Ha sido definido por su contenido —introductorio o elemento para la navegación— sea cual sea su posición.

footer

Como el elemento header, footer (pie) suena como su descripción y ubicación. En cambio, el elemento footer deberá contener información sobre sus elementos de contenido: quien lo escribió, información de copyright, enlaces a contenido relacionado, etc.

Mientras estamos acostumbrados a tener un pie para todo un documento, HTML5 nos permite también tienen pies dentro de las secciones.

<section>
<header>
<h1>Ave del paraíso</h1>
</header>
<p>Narrativa policíaca y de intriga/Novela negra.</p>
<footer>
<p>CAROL JOICE</p>
</footer>
</section>