La etiqueta HTML <q> y <cite>

Etiquetas para citar mensajes, frases o títulos de obras


Si al redactar un texto en un documento web necesitamos hacer referencia a otra cosa, probablemente tengamos dudas de que elemento HTML utilizar para hacer la referencia. Existen varias etiquetas HTML que podrían ser apropiadas, vamos a explicar como funcionan y en que casos debemos utilizarlas:

ObjetivoEtiqueta recomendadaMás info
Citar el título de una obra (libro, películas, videojuegos...)<cite>Leer más abajo
Citar el nombre de una persona<b>etiqueta b
Citar una frase o mensaje entrecomillado<q>Leer más abajo
Cita más compleja (en bloque)<blockquote>blockquote
Enlazar a otra página para navegar a ella<a>etiqueta a

Vamos a analizar más detalladamente estas etiquetas HTML.

La etiqueta <q>

La etiqueta HTML <q> se utilizar para hacer referencia a una frase o mensaje desde otra fuente o contexto. Casos de uso típicos son citar una frase, un mensaje entrecomillado de otra persona, etc. Sin embargo, algunos casos no son los más apropiados para esta etiqueta <q>:

  • ✅ Citar frases, mensajes entrecomillados, etc...
  • ❌ Título de una obra
  • ❌ Nombre de una persona
  • ❌ Enlace de navegación a otra página

Así pues, un uso correcto de la etiqueta <q> podría ser el siguiente:

<p>Me encanta la cita <q>Hay hombres que solo quieren ver arder el mundo</q>.</p>

El atributo cite

Obsérvese que en esta etiqueta disponemos de un atributo opcional cite, mediante el cuál podemos hacer referencia a una URL donde aparece la fuente a la que hacemos referencia (en el siguiente ejemplo, a la ficha de la película de Batman), que es de donde procede la frase:

<p>
  <q cite="https://www.imdb.com/title/tt0468569/">
    Hay hombres que solo quieren ver arder el mundo
  </q>.
</p>

En algunos casos, estas frases se pueden simplemente citar entre comillas sin necesidad de utilizar la etiqueta <q>. Sin embargo, en el caso de que utilicemos la etiqueta <q>, no debemos añadir el entrecomillado, ya que el propio navegador lo hará por nosotros.

Es importante tener en cuenta que no hemos creado un enlace para que el usuario navegue y acceda a esa página. Esos enlaces se crean mediante una etiqueta <a> que veremos más adelante. El atributo cite sólo añade la información como metadatos para obtenerla a través de Javascript.

La etiqueta <cite>

La etiqueta HTML <cite> nos permite hacer referencia para mencionar y destacar el título de una obra. Algunos usos correctos e incorrectos de la etiqueta <cite> serían los siguientes:

  • ✅ Título de una obra
  • ❌ Nombre de una persona
  • ❌ Citar frases, mensajes entrecomillados, etc.
  • ❌ Enlace de navegación a otra página

Cuando hablamos del título de una obra, nos referimos a múltiples opciones, entre las que se podrían encontrar las siguientes (entre otras):

  • Título de un libro
  • Artículo de un blog, revista o prensa
  • Ensayo o poema
  • Partitura o canción
  • Escultura o cuadro
  • Película o serie de televisión
  • Exhibición u obra de teatro
  • Programa (software) o videojuego

Veamos un ejemplo donde la etiqueta <cite> estaría bien usada:

<p>
  De acuerdo a <cite>Star Wars</cite>, <q>la capacidad de hablar no te hace inteligente</q>.
</p>

En este caso hacemos referencia a una frase de Qui-Gon Jinn, en la película de Star Wars: Episodio I.

Recuerda que si lo que quieres hacer es referenciar otra página para que el usuario pueda navegar a ella, lo que necesitas es un enlace <a>.

¿Quién soy yo?

Soy Manz, vivo en Tenerife (España) y soy streamer partner en Twitch y profesor. Me apasiona el universo de la programación web, el diseño y desarrollo web y la tecnología en general. Aunque soy full-stack, mi pasión es el front-end, la terminal y crear cosas divertidas y locas.

Puedes encontrar más sobre mi en Manz.dev