Mostrar código informático en HTML

HTML proporciona etiquetas especiales para mostrar código, atajos de teclado, resultados o texto preformateado. Estas ayudan a diferenciar visualmente el código del contenido normal.

El elemento <code>

El elemento <code> se usa para mostrar fragmentos de código en línea. Normalmente aparece dentro del texto.

<p>To print something, use <code>console.log()</code> in JavaScript.</p>

El elemento <pre>

La etiqueta <pre> (preformateado) conserva los espacios en blanco, saltos de línea y formato exacto. Es ideal para bloques de código y se usa a menudo junto con <code>.

<pre>
function greet(name) {
  console.log("Hello " + name);
}
</pre>

El elemento <kbd>

La etiqueta <kbd> marca teclas o combinaciones de teclas que el usuario debe presionar, como Ctrl + C, Enter o ESC.

<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save the file.</p>

El elemento <samp>

La etiqueta <samp> representa una salida de computadora o programa. Se usa para mostrar resultados como mensajes de error o respuestas del sistema.

<p>The output is: <samp>File not found.</samp></p>

Buenas prácticas

Usa <code> para fragmentos cortos en línea y <pre> para bloques de código completos. Evita mezclar demasiados estilos: la claridad es clave.

Ejemplo visual

Así puedes combinar <pre> y <code> para mostrar código bien formateado:

<pre><code>
function sum(a, b) {
  return a + b;
}
</code></pre>

Errores comunes

No uses <code> para bloques largos ni lo coloques solo en párrafos. Usa siempre etiquetas semánticas para una mejor comprensión.

Resumen de visualización de código

Las etiquetas <code>, <pre>, <kbd> y <samp> tienen propósitos específicos. Mejoran la legibilidad y la accesibilidad del contenido técnico.