Inicia sesión


Cómo citar en HTML: blockquote, q y cite

Cómo citar en HTML: blockquote, q y citeLas citas han sido algo muy bien asentado en HTML desde sus comienzos, puede que debido a su nacimiento en un entorno académico, probablemente el ámbito del conocimiento humano dónde más se utilizan las citas y referencias.

Los tres elementos principales para representar una cita y su fuente son:

  • <blockquote>: para reproducir una cita en bloque.
  • <q>: para reproducir una cita en línea.
  • <cite>: para representar la referencia a un trabajo creativo.
A lo largo de este post aprenderemos a citar de forma semánticamente correcta utilizando estos elementos de acorde con las especificaciones HTML.

Los elementos <blockquote> y <q>


Los elementos <blockquote> y <q> representan más o menos lo mismo, un fragmento citado desde otra fuente. La diferencia está en el contexto dentro del documento. Mientras <blockquote> representa una sección del documento citada desde otra fuente, <q> representa partes cortas dentro del contenido citadas desde otra fuente.

Además, el comportamiento en el flujo del documento es diferente, <blockquote> es renderizado a nivel bloque y <q> es renderizado en línea.

Cita de un fragmento en línea:
<p>La autora del libro asegura que
  <q>no es autobiográfico</q>
aunque tiene similitudes son su vida.</p>
Cita en una sección (bloque):
<p>La autora del libro declaró en rueda de prensa:</p>
<blockquote>
  A pesar de los que muchos piensan, el libro no es autobiográfico, aunque podría encajar en la mayor parte de mi vida.
</blockquote>
Es importante tener claro lo que significa que <blockquote> representa una sección del documento. Como tal, podemos poner prácticamente cualquier cosa en su interior, como un <header>, <footer>, <p>, títulos <h1> – <h6>, etc:
<p>La autora del libro declaró en rueda de prensa:</p>
<blockquote>
  <p>A pesar de los que muchos piensan, el libro no es autobiográfico, aunque podría encajar en la mayor parte de mi vida</p>
  <footer>- María Álvarez, autora del libro "Bla bla bla"</footer>
</blockquote>
Respecto al elemento <q>, es muy importante anotar que no se debe escribir las típicas comillas que representan una cita. Ni antes, ni después, ni dentro de <q>. En las especificaciones HTML5 se establece que las marcas de cita serán introducidas por el user-agent, es decir, por el navegador, y se pueden modificar a través de CSS.

También es importante saber que el elemento <q> no se debe utilizar para denotar sarcasmos u otros usos del lenguaje que no son citas aunque se suelan entrecomillar en el texto. En estos casos si podemos utilizar las comillas manualmente pero sin que haya elemento <q>.

El atributo cite


Tanto <blockquote> como <q> acepta el atributo cite. NO lo confundas con el elemento <cite> que veremos continuación.

El atributo cite ha de ser una URL válida dónde encontrar la fuente de la cita. Por ejemplo:
<p>La autora del libro declaró en rueda de prensa:</p>
<blockquote cite="https://ejemplo.es/noticias/declariones-de-maria-alvarez">
  <p>A pesar de los que muchos piensan, el libro no es autobiográfico, aunque podría encajar en la mayor parte de mi vida</p>
  <footer>- María Álvarez, autora del libro "Bla bla bla"</footer>
</blockquote>
Este atributo cite, aunque semánticamente correcto, no es visible y no aporta gran información para el usuario, motivo por el que no es muy utilizado como referencia a la fuente citada. Es mucho más utilizado el elemento <cite>, con significado semántico similar pero visible para el usuario.

El elemento <cite>


El elemento <cite> representa una referencia a un trabajo creativo. El concepto de trabajo creativo es muy amplio. Puede ser un libro, artículo, programa de TV, un poema, una pintura, un performance, y un larguísimo etcétera.

Las especificaciones HTML del elemento <cite> lo restringían al título de la obra, no podía contener el nombre del autor, la URL de referencia ni ninguna otra información, sólo el título de la obra:
<p>El cuadro <cite>Un árbol en un prado</cite>, de Federico López, será exhibido en el museo durante el mes de Junio.</p>
O:
<p>Cómo informó <cite>Federico López</cite>, su cuadro será exhibido en el museo durante el mes de Junio.</p>
Sin embargo, ha sido ampliamente utilizado para incluir toda la información identificativa de la obra de referencia, por ejemplo, dentro de un <blockquote>:
<p>La autora del libro declaró en rueda de prensa:</p>
<blockquote>
  <p>A pesar de los que muchos piensan, el libro no es autobiográfico, aunque podría encajar en la mayor parte de mi vida</p>
  <footer>
    <cite><a href="https://ejemplo.es/noticias/declariones-de-maria-alvarez">María Álvarez, autora del libro "Bla bla bla"</a></cite>
  </footer>
</blockquote>
Las especificaciones HTML se han adaptado a este tipo uso y aceptan que el elemento <cite> incluya el título de la obra, el nombre del autor y otros datos identificativos de la obra, por ejemplo el año de publicación de un artículo o la URL dónde se puede encontrar online.

Es uno de los ejemplos más claros en los que las especificaciones se han adaptado al uso y no al revés, aunque todavía la mayoría de textos en Internet no recogen este cambio todavía.

Referencias




  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-08-08
  • Categorias: Diseño Web html5 Html WebSite webmasters Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Efectos jQuery - Ocultar y mostrar

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Como abrir un enlace con jQuery

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Cómo rastrear a los usuarios de Adblock usando Google Analytics

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google WebSite Trucos y tips Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial