Etiqueta HTML <code>
La etiqueta <code> se usa para insertar fragmentos de código de programa. Descripción, atributos y ejemplos de uso.
La etiqueta <code> se utiliza para marcar un fragmento de código de computadora — el nombre de una variable, una llamada a función, un trozo de código fuente de programa, o cualquier texto que el usuario deba escribir o leer como código. En el navegador, el contenido se muestra con una fuente monoespaciada (una fuente en la que todos los caracteres tienen el mismo ancho). La etiqueta <code> es un elemento en línea por defecto.
La etiqueta <code> es semántica: le indica a los navegadores, las tecnologías de asistencia y los motores de búsqueda que el texto incluido es código, no prosa. Ese significado es la razón para usarla — el estilo monoespaciado es solo la presentación predeterminada, que puede modificarse con CSS.
Esta página explica cómo se comporta <code> por sí sola, por qué el código de varias líneas debe envolverse en <pre>, el problema de escape de HTML que encontrará al intentar mostrar corchetes angulares, la convención de los resaltadores de sintaxis y cuándo no usar <code> en absoluto.
Sintaxis
La etiqueta <code> va en pares. El contenido se escribe entre las etiquetas de apertura (<code>) y cierre (</code>).
Ejemplo de la etiqueta HTML <code>:
Etiqueta HTML <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Ordinary text.</p>
<code>Line of program code.</code>
<p>Continuation of the ordinary text.</p>
</body>
</html>Ejecute el ejemplo anterior con el editor Try it: el texto de <code> aparece en la misma línea que los párrafos circundantes, renderizado con una fuente monoespaciada, igual que cualquier otro elemento en línea.
Por qué <code> solo colapsa los espacios en blanco
Como la mayoría de los elementos HTML, <code> sigue las reglas normales de espacios en blanco: las secuencias de espacios, tabulaciones y saltos de línea se colapsan en un único espacio. Esto está bien para un único token (<code>let x = 10;</code>), pero falla en el momento en que se pega un fragmento de varias líneas:
<code>
function greet(name) {
return "Hello, " + name;
}
</code>En el navegador, esto se renderiza como una sola línea larga — function greet(name) { return "Hello, " + name; } — porque cada salto de línea y la indentación quedan reducidos a espacios simples.
Para preservar los saltos de línea y la indentación, envuelva el <code> en un elemento <pre> ("preformateado"). <pre> mantiene los espacios en blanco exactamente como están escritos, y el <code> dentro conserva el significado semántico. <pre><code>…</code></pre> es la combinación estándar para cualquier bloque de código de más de una línea.
Ejemplo de la etiqueta HTML <code> colocada dentro de una etiqueta HTML <pre>:
Ejemplo de la etiqueta HTML <code> dentro de una etiqueta HTML <pre>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>
<code>
body {
color: yellow;
font-size: 16px;
line-height: 1.5;
}
</code>
</pre>
</body>
</html>Escapar <, > y & dentro de <code>
Una tarea muy común es mostrar HTML en sí mismo dentro de un bloque <code> — pero el navegador no sabe que su <div> debe mostrarse y no ejecutarse. Si escribe un < o > literal, el navegador intenta analizarlo como una etiqueta y su ejemplo desaparece silenciosamente. Lo mismo ocurre con &, que inicia una referencia de carácter.
Debe reemplazar esos caracteres con sus entidades HTML:
| Carácter | Entidad | Significado |
|---|---|---|
< | < | menor que |
> | > | mayor que |
& | & | ampersand |
Así, para mostrar el texto <a href="#"> en realidad se escribe:
<code><a href="#"></code>Y para mostrar if (a && b):
<code>if (a && b)</code>Olvidar escapar & es el error más sutil: © se renderizará como el símbolo © en lugar del texto literal. En caso de duda, escape siempre <, > y &.
Ejemplo de la etiqueta HTML <code> con propiedades CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.code-style {
font-size: 20px;
line-height: 28px;
background-color: lightblue;
color: darkslategray;
}
</style>
</head>
<body>
<p>Ordinary text.</p>
<code class="code-style">Line of program code.</code>
<p>Continuation of the ordinary text.</p>
</body>
</html>La clase language-* para los resaltadores de sintaxis
El <code> simple no tiene noción de qué lenguaje de programación contiene, por lo que no puede colorear palabras clave, cadenas y comentarios por sí solo. Las bibliotecas de resaltado de sintaxis como Prism y highlight.js resuelven esto con una convención de nombres de clase: se agrega una clase language-<nombre> al elemento <code> (generalmente dentro de un <pre>), y la biblioteca recorre la página, lee la clase y aplica los colores correctos.
<pre><code class="language-js">
const greet = (name) => `Hello, ${name}`;
</code></pre>Aquí language-js le indica al resaltador que trate el contenido como JavaScript. Otros valores comunes son language-css, language-html y language-python. La clase es puramente informativa para el resaltador — el elemento <code> sigue manteniendo su significado semántico aunque no haya ningún resaltador cargado. (Observe el => en el fragmento anterior: incluso dentro de un bloque resaltado, se debe escapar > para que la función flecha se muestre correctamente.)
Cuándo no usar <code>
<code> es para contenido que es genuinamente código. No lo use simplemente porque desee una fuente monoespaciada:
- Entrada de teclado que el usuario debe presionar → use
<kbd>, p. ej.<kbd>Ctrl</kbd> + <kbd>C</kbd>. - Salida de programa / resultados de muestra → use
<samp>. - Una variable o marcador en matemáticas o prosa → use
<var>. - Texto monoespaciado puramente decorativo sin significado de código → use un
<span>y aplíquele estilo con CSS. Usar<code>aquí es engañoso para los lectores de pantalla y los motores de búsqueda.
Elegir el elemento correcto mantiene el marcado honesto: la etiqueta describe qué es el texto, mientras que CSS decide cómo se ve.
Etiquetas relacionadas
<pre>— preserva los espacios en blanco; envuelva<code>en ella para bloques de varias líneas.<kbd>— entrada de teclado que escribe el usuario.<samp>— salida de muestra de un programa.<var>— nombre de variable o marcador.
Atributos
La etiqueta <code> admite los Atributos Globales y los Atributos de Evento.
Por ejemplo, puede utilizar el atributo title para agregar un tooltip: <code title="Variable declaration">let x = 10;</code>.