Etiquetas HTML5: time, dfn, cite, small y strong

En esta entrada voy a repasar los elementos de fecha (time), definición (dfn), para citas (cite), letra pequeña (small) y letra fuerte (strong). Estos elementos permiten destacar un texto para los clientes y para los buscadores, siendo importante que estos últimos sepan que estamos mostrando.

Marcar fecha con <time>

Si introducimos una fecha u hora en nuestra web y queremos que sea reconocido como tal por los navegadores es necesario utilizar la etiqueta time. Además hace que los motores de búsqueda como Google, Bing, Yahoo, etc. sean más eficientes.

<article>
<h1>Título</h1>
<p>Publicado el <time datetime="2017-07-21T22:10:00" pubdate>21 de Julio a las 22:10</time></p>
</article>

Como podemos ver añadimos la etiqueta time y configuramos 2 propiedades:

• datetime: Es una propiedad que se usa para indicar la fecha en un formato reconocible para los motores de búsqueda o navegadores (no reconocen que es Julio o que el primer número es el día, etc.).
• pubdate: Índica si la fecha es la fecha de la publicación y solo tiene sentido dentro de un artículo, por eso he añadido las etiquetas article.

Crear una definición

Otra etiqueta que podemos utilizar dentro de un párrafo es <dfn>, que se usa para indicar un término que va a ser definido a continuación.

<p><dfn>Término:</dfn> Esta es la definición del término anterior.</p>

Al añadir esta etiqueta el nombre del término se mostrará en cursiva para que destaque más, pero podemos personalizar su apariencia con CSS.

Formato del texto: Strong, small y cite

Las otras etiquetas vamos a verlas en un mismo ejemplo:

<p><strong>Lorem Ipsum</strong> es simplemente el texto de relleno de 
las <cite>imprentas y archivos de texto</cite>. 
Lorem Ipsum ha sido el texto de relleno estándar de las industrias desde 
el año 1500, cuando un impresor desconocido 
usó una <small>galería de textos y los mezcló de</small> tal manera que logró hacer un
 libro de textos especimen.</p>

• Strong: Se muestra el texto entre estas etiquetas en negrita, y se usa cuando queremos destacar unas palabras del párrafo. Para los buscadores se creé (en ese ámbito no hay nada exacto) que esta etiqueta es importante, y si lo pensamos tiene sentido ya que se supone que en cada párrafo estará en negrita lo más importante del mismo.
• Cite: Se usa para cuando se cita algo, por ejemplo el nombre de una película.
• Small: Da como resultado una fuente pequeña y se suele usar para los típicos textos de «letra pequeña» de textos legales, contratos, etc.

Ver ejemplos