Presentar Código En HTML Con Etiquetas Como pre, code, kbd, samp y var

Mostrar código en HTML es una habilidad esencial para cualquier desarrollador web que quiera presentar fragmentos de programación de forma clara, semántica y accesible.

Ya sea para explicar un script, compartir atajos de teclado o visualizar la salida de una función, HTML ofrece etiquetas específicas que facilitan este trabajo.

Índice

• ¿Qué significa mostrar código en HTML?
• Etiqueta <pre>
• Etiqueta <code>
• Etiqueta <kbd>
• Etiqueta <samp>
• Etiqueta <var>
• Diferencias entre <pre> y <code>
• Cómo evitar que el código se ejecute
• Estilos CSS recomendados
• Buenas prácticas semánticas y accesibilidad
• Preguntas frecuentes
• Conclusión

¿Qué significa mostrar código en HTML?

Mostrar código en HTML implica representar fragmentos de programación, comandos, variables o salidas de forma que el navegador no los ejecute, sino que los muestre exactamente como están escritos. Para esto, se utilizan etiquetas semánticas que preservan la estructura, los saltos de línea, los espacios y los caracteres especiales.

Etiqueta <pre>: texto preformateado

La etiqueta <pre> se utiliza para mostrar texto con formato predefinido. El contenido dentro de <pre> respeta los espacios, saltos de línea y tabulaciones tal como se escriben en el código.

<pre>
function saludar() {
  console.log("Hola mundo");
}
</pre>

Esto lo convierte en ideal para representar bloques de código o salidas de consola.

Etiqueta <code>: fragmentos de código

La etiqueta <code> se usa para mostrar fragmentos cortos de código en línea. Por defecto, se representa en una fuente monoespaciada.

Ejemplo:

Para declarar una variable en JavaScript: <code>let x = 5;</code>

Cuando se quiere mostrar un bloque completo de código, se suele anidar dentro de <pre>:

<pre><code>
let nombre = "Carlos";
console.log(nombre);
</code></pre>

Etiqueta <kbd>: entradas desde el teclado

<kbd> se utiliza para representar entradas del usuario desde el teclado. Es útil para tutoriales o documentación técnica que necesita explicar combinaciones de teclas.

Presiona <kbd>Ctrl</kbd> + <kbd>C</kbd> para copiar.

Se renderiza normalmente en monoespaciado y muchas veces se estiliza con un borde o fondo para resaltarlo visualmente.

Etiqueta <samp>: resultados de salida

La etiqueta <samp> representa la salida de un programa o sistema.

<samp>
Resultado: conexión establecida con éxito.
</samp>

Es útil para mostrar mensajes de error, respuestas de consola u otros resultados de ejecución.

Etiqueta <var>: variables

<var> sirve para mostrar nombres de variables o constantes matemáticas. Generalmente se renderiza en cursiva para distinguirlo del resto del texto.

<p>El área del triángulo es 1/2 <var>b</var> × <var>h</var></p>

Se recomienda especialmente para documentación técnica o fórmulas.

Diferencias entre <pre> y <code>

Cómo evitar que el código se ejecute

Cuando se escriben etiquetas como <div> o <script>, el navegador podría intentar interpretarlas. Para evitar esto, es necesario usar entidades HTML:

• < → <
• > → >
• & → &

También se puede usar la función de escape de código en editores como VS Code, o herramientas online como FreeFormatter HTML Escape.

Estilos CSS recomendados para mostrar código

pre, code, kbd, samp {
  font-family: monospace;
  background: #f4f4f4;
  padding: 0.5em;
  border-radius: 4px;
}

Para bloques largos:

pre {
  overflow-x: auto;
  white-space: pre-wrap;
}

Buenas prácticas semánticas y de accesibilidad

• Utilizar siempre la etiqueta semántica adecuada para el contenido.
• Anidar correctamente <code> dentro de <pre> si es necesario.
• No usar <div> o <span> para representar código.
• Agregar títulos o leyendas cuando el contexto lo requiera.

Preguntas frecuentes

¿Qué etiqueta uso para mostrar un bloque de código?

<pre><code> es la combinación más adecuada para mostrar bloques de código respetando el formato.

¿Cómo se muestran atajos de teclado?

Con <kbd>. Por ejemplo: <kbd>Ctrl</kbd> + <kbd>S</kbd>.

¿Puedo usar solo <code> sin <pre>?

Sí, pero sólo para fragmentos pequeños en línea, como: const PI = 3.14;

¿Qué pasa si no escapo los caracteres especiales?

El navegador podría interpretar las etiquetas como elementos reales y no mostrar el código correctamente.

Conclusión

Mostrar código en HTML es una práctica imprescindible en cualquier sitio web técnico o educativo. Utilizando etiquetas como <pre>, <code>, <kbd>, <samp> y <var>, se mejora la legibilidad, semántica y accesibilidad del contenido. Con una buena estructura y estilo, estos elementos no solo ayudan a mostrar información correctamente, sino que también mejoran la experiencia del usuario y el posicionamiento SEO.