Los elementos blockquote, cite y q

Los elementos (etiquetas) blockquote, cite y q suelen usarse de forma incorrecta porque se desconoce su semántica. Un uso correcto puede ayudar a mejorar la tipografía y la semántica de una página web.

<blockquote>, <cite> y <q> se emplean para delimitar contenido que normalmente pertenece a otras personas, aunque también puede ser contenido propio, y que ha sido publicado en otro contexto.

blockquote

<blockquote> define una cita larga que se representa como un elemento de bloque. Por ejemplo:

<blockquote>
<p>
Yo llegué en el momento justo, interesado, cuando el hipertexto e Internet habían visto ya la luz. La tarea que me correspondía era hacer que casaran.
<br />
Tim Berners-Lee, Tejiendo la Web.
</p>
</blockquote>

Unas indicaciones sobre el uso de <blockquote>:

<blockquote> no genera automáticamente comillas alrededor del contenido. Se deben añadir de forma explícita en el propio contenido o mediante contenido generado a través de CSS.
Por defecto, <blockquote> incluye un margen izquierdo cuando se visualiza. Esta característica se usó de forma incorrecta en el pasado para lograr una sangría en el texto. Sin embargo, para ello se debe emplear la propiedad margin-left de CSS.
En versiones anteriores de HTML, el contenido de <blockquote> debía escribirse dentro de párrafos <p>. En HTML5 este requisito ha sido eliminado, pero es conveniente respetarlo.
El origen del contenido de una cita se puede indicar en <blockquote> con el atributo cite. Desgraciadamente ningún navegador web está programado para interpretar y visualizar el atributo cite, así que es mejor utilizar otros métodos como la etiqueta <cite> dentro del <blockquote>.

cite

cite es uno de los pocos identificadores de HTML que se emplea tanto como etiqueta como atributo.

Como etiqueta, <cite> se emplea para referenciar un trabajo creativo como un libro, una película, un programa de televisión o una canción. Por ejemplo:

<blockquote>
<p>
Yo llegué en el momento justo, interesado, cuando el hipertexto e Internet habían visto ya la luz. La tarea que me correspondía era hacer que casaran.
<br />
Tim Berners-Lee, <cite>Tejiendo la Web</cite>.
</p>
</blockquote>

Unas indicaciones sobre el uso de <cite>:

<cite> se visualiza en cursiva por defecto, pero no se debe emplear con el único propósito de mostrar un texto en cursiva. Para ello se debe emplear <em> o <i>. Si no se quiere que se muestre en cursiva se puede emplear CSS para modificar su aspecto.
<cite> debe contener el nombre de una obra creativa, no el nombre de una persona.

q

<q> define una cita corta que se representa como un elemento en línea sin saltos de línea. Por ejemplo:

<p>
Como Tim Berners-Lee, el padre de la Web, escribió en <cite>Tejiendo la Web</cite>: <q>Yo llegué en el momento justo, interesado, cuando el hipertexto e Internet habían visto ya la luz. La tarea que me correspondía era hacer que casaran</q>.</p>
</p>

Unas indicaciones sobre el uso de <q>:

<q> genera automáticamente las comillas de apertura y de cierre. El estilo de estas comillas se puede configurar a través de CSS.
<q> se debe emplear para citar fuentes externas de contenido, no se debe emplear para marcar un diálogo o una frase especial.
Al igual que con <blockquote>, el origen del contenido de una cita se puede indicar con el atributo cite.