Como y cuando usar las etiquetas blockquote, q y cite

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

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

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>

La etiqueta cite

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.

SEO y las etiquetas blockquote y q

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!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.