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

Home » Blog » 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.
Foto de Iñigo Mezo Alvarez

IÑIGO MEZO ALVAREZ (IMAcreste)


Comentarios

Una respuesta a «Etiquetas HTML5: time, dfn, cite, small y strong»

  1. HTML 5 y CSS 3 fueron toda una revolución para la maquetación web. Hay muchas etiquetas como las que mencionas que no solemos utilizar, pero que bien pueden sernos útiles.

    Saludos, y gracias por el aporte.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Las reseñas son opiniones que las personas dejan en la página local de Google. Si son positivas, estas reseñas ayudarán a mejorar la confianza y credibilidad de una marca.

Participa en nuestro sorteo enviando un email con tu nombre y el asunto «Sorteo AUDITORÍA SEO». Se realizara un sorteo cada mes.

Evaluación EXCELENTE
A base de 7 reseñas

Contactamos con Iñigo para el diseño web de nuestra tienda online y estamos encantados. Su asesoramiento, seguimiento y trato han sido excepcionales. Un verdadero crack. Recomendado al 100%. No dudes en ponerte en contacto con el.

erlantz rique
erlantz rique
19/02/2024

Un acierto quien elija a Iñigo. Autentico profesional, se preocupó en todo momento que entendiera el funcionamiento de la web. Me explicó todo las veces necesarias hasta entenderlo. Se preocupó y acertó en que la web tuviera lo que le pedí y lo hizo con creces. Muy contento con el servicio prestado. Una vez realizado el trabajo, cualquier duda que tengo me sigue ayudando. Lo recomiendo sin temor a equivocarme.

Jose Marlasca
Jose Marlasca
06/02/2024

Dió en la clave y nos dió los instrumentos que necesitábamos en esos momentos, y sobre todo entendió a la perfección lo que buscábamos. Lo mejor de web que hemos tenido en 24 años. Eskerrik asko Mezo!!

Troka Abentura
Troka Abentura
07/01/2024

Compromiso, implicación e innovación en los proyectos. Atento a las necesidades e incansable en la búsqueda de soluciones. Muy buena opción.

Jabier Fuertes Udaondo
Jabier Fuertes Udaondo
07/01/2024

Si buscas a alguien que además de hacer un diseño web moderno, responsivo y adaptado a tu sector, te explique por qué plantea el diseño web de esa manera y que te explique y ayude en posicionar tu web lo mejor posible en base a los objetivos fijados, ese es Iñigo Mezo y os lo recomiendo al 100%

Asier Hermoso
Asier Hermoso
03/01/2024

Genial trabajar con él! Además de ser muy buen profesional, experto y responsable, a destacar tanto su implicación en cada proyecto, así como su trato siempre cercano y su paciencia infinita 😉
Un crack!!

itxaso zubia
itxaso zubia
15/12/2023

El plugin gratuito para integrar productos de Prestashop en Wordpress muy sencillo de utilizar y muy bien documentado, os felicito.

Fernando Cózar
Fernando Cózar
02/11/2023