Etiqueta code en HTML: fragmentos de código y escape
La etiqueta <code> en HTML representa un fragmento de código informático. Úsala al explicar una etiqueta, una función o una instrucción de un programa: identifica qué parte de la explicación es código, tanto dentro de una frase como en un ejemplo de varias líneas. Mostrar ese código y ejecutarlo son tareas diferentes.
Ejemplo mínimo de code
<p>Un párrafo se escribe con <code><p></code>.</p>Verás la frase «Un párrafo se escribe con <p>». La cadena <p> aparece como texto de código, normalmente con una fuente monoespaciada; no crea otro párrafo. < y > permiten escribir los signos de la etiqueta sin convertirla en marcado.
Para probarlo, pega el fragmento dentro del <body> de un documento HTML con codificación UTF-8, guárdalo y ábrelo en el navegador. Si retiras solo <code> y </code>, conservando las referencias de caracteres, la frase seguirá mostrando <p>, pero perderá el significado de código y su presentación predeterminada.
Sintaxis y contexto válido
Escribe una apertura <code> y un cierre </code>: ninguno se puede omitir. El elemento admite contenido de frase y puede colocarse donde se acepte ese contenido, por ejemplo dentro de <p>, de un elemento de lista o de <pre>. No envuelvas párrafos, listas o secciones completas con <code>.
En su interior puedes escribir texto y otros elementos de frase, pero al enseñar HTML las etiquetas de la muestra deben aparecer escapadas. Escribir una etiqueta real dentro de <code> hace que el navegador la interprete: este elemento no convierte automáticamente su contenido en texto literal. El HTML Living Standard establece el significado y modelo de contenido de code.
Diferencia entre code y pre
<code> identifica el contenido como código. <pre> representa texto preformateado: con sus estilos habituales conserva los espacios y los saltos de línea. Para una instrucción breve dentro de un párrafo, basta con <code>; para un bloque de varias líneas, combina <pre><code>…</code></pre> y coloca el bloque fuera del párrafo.
Con los estilos predeterminados, <code> por sí solo no conserva la indentación: las secuencias de espacios se reducen y un salto escrito en el archivo no obliga a comenzar otra línea visible. La propiedad CSS white-space puede modificar ese comportamiento; no es un atributo HTML. La sección del estándar sobre pre explica su uso para bloques de código.
Si quitas <code> de un bloque y dejas <pre>, conservarás el formato, pero el contenido dejará de estar identificado como código. Si retiras <pre> y conservas <code>, perderás la conservación predeterminada de espacios y saltos.
Cómo mostrar etiquetas HTML como texto
En el código fuente de la página que enseña el ejemplo, utiliza estas referencias de caracteres de HTML:
<muestra<.>muestra>.&muestra&.
Escapa los signos < y los ampersands del texto de muestra para evitar que se interpreten como marcado o referencias de caracteres. También puedes escribir > como > para que el ejemplo sea uniforme. Las referencias incluyen el punto y coma final.
Si quieres enseñar la cadena literal &, escribe &amp; en la página que la muestra. Hay dos niveles: el HTML del artículo produce texto visible; ese texto puede ser, a su vez, el código fuente de otro documento. No es necesario escapar las comillas de un atributo cuando lo muestras como texto dentro de <code>.
Caso práctico: un bloque de dos líneas
Esta página enseña dos párrafos como código. Incluye los estilos necesarios para mantener el texto legible y permitir desplazamiento horizontal en pantallas estrechas.
<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ejemplo de código HTML</title>
<style>
body {
margin: 1rem;
font-family: system-ui, sans-serif;
}
pre {
padding: 1rem;
overflow-x: auto;
background: #f2f4f8;
color: #1f2937;
}
pre:focus-visible {
outline: 2px solid #1d4ed8;
outline-offset: 2px;
}
code {
font-family: monospace;
}
</style>
</head>
<body>
<h1>Dos párrafos escritos en HTML</h1>
<p>Este bloque muestra el código; no genera los párrafos de la muestra.</p>
<pre tabindex="0" role="region" aria-label="Ejemplo de código HTML"><code class="language-html"><p>Hola.</p>
<p>Pan &amp; fruta para compartir en la merienda.</p></code></pre>
</body>
</html>Guarda todo el ejemplo en UTF-8 como muestra-code.html y ábrelo en tu navegador. No necesita servidor, archivos externos ni JavaScript. Verás el encabezado, la explicación y un bloque con dos líneas: la primera será <p>Hola.</p> y la segunda, <p>Pan & fruta para compartir en la merienda.</p>, con sus etiquetas visibles.
La clase language-html es una convención para herramientas de resaltado. No ejecuta HTML ni añade colores por sí sola. Si la retiras, esta página se verá igual: ninguna regla CSS del ejemplo utiliza esa clase.
Añade dos espacios al comienzo de la segunda línea de la muestra y vuelve a abrir el archivo: <pre> conserva esa indentación. Pulsa Tab para enfocar el bloque y usa las flechas para desplazarte si la línea supera su ancho. tabindex, la región con nombre y el contorno visible permiten localizar y manejar esa zona con teclado.
Atributos y accesibilidad
<code> no tiene atributos específicos vigentes. Admite los atributos globales: class para seleccionarlo con CSS o una herramienta, id para identificarlo de forma única y lang para indicar el idioma humano del texto cuando corresponda. lang="javascript" no declara un lenguaje de programación; para ese propósito puedes seguir la convención de clases del ejemplo.
font-family, white-space y overflow-x son propiedades CSS. En JavaScript, textContent es una propiedad del DOM que permite asignar texto a un elemento; ninguna de ellas es un atributo específico de <code>.
Explica qué hace cada fragmento con palabras, además de mostrarlo. Mantén contraste suficiente y permite leer las líneas largas sin desbordar toda la página. No dependas solo del color del resaltado ni supongas que todos los lectores de pantalla anunciarán el código de la misma forma.
Errores frecuentes y preguntas
¿Code ejecuta JavaScript o HTML? No. Marca el texto como código. Sin embargo, si pegas etiquetas reales sin escapar, el navegador seguirá procesándolas como HTML: <code> tampoco aísla un <script>. Para enseñarlas, escribe referencias de caracteres.
¿Por qué se pierde la indentación? Comprueba primero que el bloque esté dentro de <pre>. Después revisa si algún estilo cambia white-space a un valor que colapsa espacios. Añadir saltos de línea al archivo o una clase de lenguaje no conserva por sí solo el formato.
¿Por qué no aparecen colores? La clase solo identifica una convención. El resaltado necesita estilos y, según la herramienta, un proceso de compilación o JavaScript. El texto debe seguir siendo comprensible sin ese resaltado.
¿Cuándo conviene otra etiqueta? Usa <kbd> para entradas del usuario, como teclas; <samp> para una muestra de salida de un programa; y <var> para una variable en una explicación o expresión. <pre> resuelve el formato del bloque. Elige <code> cuando el fragmento sea el código que estás documentando, no solo porque quieras una fuente monoespaciada.
Compatibilidad y fuentes
<code> está ampliamente disponible en los navegadores actuales, según la referencia y compatibilidad de MDN. Su fuente monoespaciada habitual puede cambiar por los estilos del sitio o las preferencias de quien lo lee. Los dos ejemplos funcionan con JavaScript deshabilitado.
Fuentes consultadas el 3 de octubre de 2026: el estándar para significado, sintaxis y atributos; MDN para la presentación habitual y el soporte del elemento. El resaltado de sintaxis pertenece a la herramienta elegida y debe comprobarse por separado.