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.

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

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