Como y cuando usar las etiquetas blockquote, q y cite

Las etiquetas <q>, <blockquote> y <cite> tienen significado semántico y no debemos usarlas con afán estético.

Las 3 sirven para citar contenidos cuya fuente puede ser nuestra propia web o ajena.

Sin embargo existen diferencias entre ellas que vamos a abordar en esta publicación.

La etiqueta blockquote sirve para citar uno o más párrafos de un texto.

La etiqueta blockquote es un elemento bloque (un elemento bloque es un tipo de etiqueta que fuerza un salto de línea y que puede tener margen superior e inferior además de ancho y altura. El contrario de un elemento bloque sería un elemento en línea).

Puede ir acompañada del atributo cite=»url». El atributo cite sirve para mencionar la fuente original.

Desafortunadamente en el navegador no se apreciará nada en especial.

Veamos un ejemplo de uso:

<blockquote cite="https://francescricart.com/">
<p>¿Conoces extraordinariamente bien a tu cliente?</p>

<p>Tu web necesita una forma verdaderamente motivante de explicar lo que vendes.</p>

<p>Soy Francesc Ricart, consultor web con vocación de formador. Seas empresa o alumno te acompaño a conseguir que tu página web destile tu propia personalidad.</p>
</blockquote>

La etiqueta q es la hermana menor de blockquote.

Se diferencia de blockquote en que en lugar de ser un elemento bloque es un elemento en línea.

Sirve para citar una parte de un fragmento y no requiere que se anide en ella ningun párrafo.

Veamos un ejemplo:

<p>El SEO es una disciplina que obsesiona a muchos expertos digitales sin embargo hay que tener en cuenta que <q cite="https://francescricart.com/a-que-me-dedico-mejoro-webs-y-escribo-en-ellas/">Es a tu audiencia a quien debes satisfacer y no a google.</cite>.</p>

En palabras de Sergio Luján Mora cite es uno de los pocos identificadores de HTML que se emplea tanto como etiqueta como atributo.

Cite sirve para citar una obra creativa.

En este listado encontraréis que es lo que se entiende por obra creativa.

A modo de ejemplo una pintura, una obra de arte, un libro, un juego, una película, una serie, una página web, un tuit, un post en Facebook.

Existen ocasiones en las que nos encontramos con la necesidad de copiar un fragmento d texto de alguna otra web.

En principio nunca deberíamos pues al tratarse de contenido duplicado Google nos penalizaría.

En estos casos el uso de <blockquote> y de <q> con el atributo cite citando a la fuente original es la opción más idónea.

Alternativamente también podrías poner una captura de pantalla pero esto conllevaría problemas de lectura en dispositivos con pantallas pequeñas.

Así que ya sabes, ¡si vas a copiar hazlo con elegancia!

¡Hola!

Querido lector,

Como complemento a esta publicación de Sergio Luján Mora.

Deseo que la comprensión de estas etiquetas te ayude a escribir con más riqueza y un mejor marcado en tus páginas web.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!