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:
| Objetivo | Etiqueta recomendada | Má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 atributocitesó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>.
