El elemento <figure> combinado con <blockquote> y <figcaption> permite presentar citas extensas con una estructura semántica correcta, manteniendo la cita y su atribución como una unidad autónoma.
format_quote
Citas autónomas: La figura puede ser extraída sin perder contexto
person
Atribución clara: <figcaption> indica autor o fuente
style
Estilo visual: Generalmente se muestra centrado con márgenes
accessibility
Accesibilidad: Mejora la comprensión de citas extensas
check_circle
Con <figure>
• Contenido semántico
• Atribución clara
• Estructura autónoma
• Mejor SEO
• Atribución clara
• Estructura autónoma
• Mejor SEO
error
Sin <figure>
• Sin significado semántico
• Atribución desasociada
• Estructura frágil
• SEO menos efectivo
• Atribución desasociada
• Estructura frágil
• SEO menos efectivo
<figure>
<blockquote
cite=
"https://example.com/einstein"
>
<p>
La imaginación es más importante que el conocimiento. El conocimiento es limitado, mientras que la imaginación abarca el mundo entero.
</p>
</blockquote>
<figcaption>
Albert Einstein, físico teórico
</figcaption>
</figure>
<figure>
<blockquote>
<p>
Tu trabajo va a ocupar una gran parte de tu vida, y la única forma de estar verdaderamente satisfecho es hacer lo que crees que es un gran trabajo.
</p>
</blockquote>
<figcaption>
Steve Jobs, cofundador de Apple
</figcaption>
</figure>
Ejemplo visual
La imaginación es más importante que el conocimiento. El conocimiento es limitado, mientras que la imaginación abarca el mundo entero.
Albert Einstein, físico teórico
El elemento <figcaption> debe ser el primer o último hijo del elemento <figure>. No se puede usar más de un <figcaption> dentro de un mismo <figure>.