La Etiqueta BLOCKQUOTE

La etiqueta <blockquote> se utiliza para marcar citas extensas de otros autores, recursos o documentos en una página web. Es un elemento semántico clave para estructurar contenido citado y mejorar la accesibilidad.

Sintaxis básica

<blockquote cite="URL-de-la-fuente">
  <!-- Texto citado -->
</blockquote>

• cite: Atributo opcional que especifica la fuente original (URL o referencia).

• Es un elemento de bloque (ocupa todo el ancho disponible).

Casos de uso comunes

Citar un libro o artículo

<blockquote cite="https://ejemplo.com/filosofia">
  <p>Pienso, luego existo.</p>
  <footer>— René Descartes, <cite>Discurso del método</cite></footer>
</blockquote>

Referenciar declaraciones públicas

<blockquote cite="https://twitter.com/autor/status/12345">
  <p>La creatividad es la inteligencia divirtiéndose.</p>
  <footer>— Albert Einstein</footer>
</blockquote>

Incluir testimonios

<blockquote class="testimonio">
  <p>Este producto cambió mi forma de trabajar. ¡Altamente recomendado!</p>
  <footer>— María González, <cite>Clienta satisfecha</cite></footer>
</blockquote>

Atributos clave

Atributo	Descripción
cite	URL del recurso original (no visible, pero útil para SEO y accesibilidad)
lang	Define el idioma del texto citado si es diferente al documento

Accesibilidad

• Los lectores de pantalla identifican el contenido como una cita.

Buenas prácticas:

• Incluir la atribución dentro del <blockquote> usando <footer> y <cite>.

• Usar aria-label para contexto adicional si es necesario:

<blockquote aria-label="Cita de Steve Jobs">
  <p>La innovación distingue al líder del seguidor.</p>
</blockquote>

Estilización con CSS

Personaliza la apariencia para destacar las citas:

blockquote {
  background: #f8f9fa;
  border-left: 5px solid #3498db;
  margin: 1.5rem 0;
  padding: 1rem 2rem;
  quotes: "“" "”" "‘" "’";
}

blockquote::before {
  content: open-quote;
  font-size: 3em;
  color: #3498db;
  line-height: 0.1em;
  margin-right: 0.25em;
  vertical-align: -0.4em;
}

blockquote footer {
  margin-top: 1rem;
  font-style: italic;
  color: #666;
}

Diferencias con <q>

Elemento	Uso	Formato	Ejemplo
<blockquote>	Citas largas (varios párrafos)	Bloque con sangría	Citas de libros, discursos
<q>	Citas cortas (dentro de texto)	Inline con comillas	"Sé el cambio que quieres ver"

Errores comunes

Usar para texto no citado

<!-- Incorrecto -->
<blockquote>
  Este es un texto destacado, pero no una cita.
</blockquote>

Olvidar la atribución

<!-- Poco profesional -->
<blockquote>
  <p>El éxito es la suma de pequeños esfuerzos repetidos día tras día.</p>
</blockquote>

Confundir con listas

<!-- Incorrecto -->
<blockquote>
  <ul>
    <li>Característica 1</li>
    <li>Característica 2</li>
  </ul>
</blockquote>

Ejemplos avanzados

Cita con múltiples párrafos

<blockquote cite="https://ejemplo.com/filosofia">
  <p>La vida es lo que pasa mientras estás ocupado haciendo otros planes.</p>
  <p>Nadie puede volver atrás y empezar de nuevo, pero todos pueden empezar hoy y crear un nuevo final.</p>
  <footer>— Carl Bard</footer>
</blockquote>

Cita en artículo periodístico

<article>
  <h2>Entrevista exclusiva</h2>
  <blockquote cite="#entrevista">
    <p>Creo firmemente en el poder de la educación para transformar sociedades.</p>
    <footer>— Dra. Laura Méndez, <cite>Entrevista para El Diario</cite></footer>
  </blockquote>
</article>

Buenas prácticas

• Semántica primero: Usa <blockquote> solo para contenido citado.

• Cita fuentes confiables: Incluye enlaces verificables en el atributo cite.

• Combina con <figure> para imágenes relacionadas:

<figure>
  <blockquote>
    <p>Una imagen vale más que mil palabras.</p>
  </blockquote>
  <figcaption>— Proverbio chino, <cite>Sabiduría popular</cite></figcaption>
  <img src="pincel.jpg" alt="Pincel y tinta china">
</figure>

Conclusión:

La etiqueta <blockquote> es esencial para:

• Dar crédito a fuentes externas de manera profesional.
• Mejorar la estructura semántica de tu contenido.
• Crear diseños atractivos para citas destacadas.

¡Úsala para enriquecer tus textos con referencias verificables y darle voz a otras perspectivas!