Para representar bloques de código informático, se recomienda combinar los elementos <pre> y <code>. El elemento <pre> preserva el formato original (espacios, saltos de línea) mientras que <code> proporciona el significado semántico.
code
<pre>: Preserva espacios, tabulaciones y saltos de línea
integration_instructions
<code>: Aporta significado semántico al contenido
format_align_left
Combinación ideal: <pre><code>...</code></pre>
accessibility
Accesibilidad: Mejora la experiencia para lectores de pantalla
Esta combinación es especialmente útil para mostrar ejemplos de código, fragmentos de configuración o cualquier texto donde el formato original sea importante.
<pre>
<code>
function saludar(nombre) {
console.log(`Hola, ${nombre}!`);
return `Saludo enviado a ${nombre}`;
}
// Llamada a la función
saludar("Mundo");
</code>
</pre>
Resultado visual
El siguiente bloque de código muestra una función JavaScript:
function saludar(nombre) {
console.log(`Hola, ${nombre}!`);
return `Saludo enviado a ${nombre}`;
}
// Llamada a la función
saludar("Mundo");
Como puedes ver, el formato original (indentación, saltos de línea) se mantiene intacto.
check_circle
Correcto
<pre><code>...</code></pre>
Preserva formato y aporta significado semántico
error
Evitar
<pre>...</pre> sin <code>
Preserva formato pero carece de significado semántico