El elemento <figure> es ideal para presentar poemas y bloques de código con leyendas descriptivas, manteniendo una estructura semántica correcta y mejorando la accesibilidad.
menu_book
Poemas: Preserva formato y estructura del texto poético
code
Código: Mantiene indentación y saltos de línea
text_format
<figcaption>: Proporciona contexto y atribución
accessibility
Accesibilidad: Mejora comprensión de contenido complejo
menu_book
Poemas
• Usa <pre> para mantener formato
• Añade autor y título
• Preserva saltos de línea
• Ideal para versos y estrofas
• Añade autor y título
• Preserva saltos de línea
• Ideal para versos y estrofas
code
Código
• Combina <pre> y <code>
• Mantiene indentación
• Añade descripción
• Facilita copiar y pegar
• Mantiene indentación
• Añade descripción
• Facilita copiar y pegar
<figure>
<pre>
Caminante, son tus huellas
el camino y nada más;
caminante, no hay camino,
se hace camino al andar.
</pre>
<figcaption>
Antonio Machado, "Caminante no hay camino"
</figcaption>
</figure>
<figure>
<pre>
<code>
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n-1) + fibonacci(n-2);
}
</code>
</pre>
<figcaption>
Función recursiva para calcular la serie de Fibonacci
</figcaption>
</figure>
Ejemplos visuales
Caminante, son tus huellas
el camino y nada más;
caminante, no hay camino,
se hace camino al andar.
el camino y nada más;
caminante, no hay camino,
se hace camino al andar.
Antonio Machado, "Caminante no hay camino"
function fibonacci(n) {
if (n <= 1) return n;
return fibonacci(n-1) + fibonacci(n-2);
}
Función recursiva para calcular la serie de Fibonacci
El elemento <figure> permite que el contenido sea autónomo y pueda ser referenciado desde otras partes del documento, manteniendo siempre su contexto a través de <figcaption>.