Elementos HTML para código de computadora
Aprende los elementos HTML code, kbd, samp, var y pre: su significado semántico, cuándo usarlos y el patrón de bloque de código multilínea.
HTML ofrece una pequeña familia de elementos para marcar texto proveniente de una computadora: código fuente, lo que el usuario escribe, la salida de un programa y las variables. Todos se renderizan en una fuente monoespaciada por defecto, pero no son intercambiables — cada uno tiene un significado distinto. Elegir el correcto le indica a los navegadores, los motores de búsqueda y, especialmente, los lectores de pantalla qué tipo de texto de computadora están leyendo.
Esta página explica cuándo y cómo usar cada elemento:
<code>— un fragmento de código de computadora<kbd>— texto que el usuario escribe con el teclado<samp>— salida de muestra de un programa<var>— una variable o marcador de posición<pre>— texto preformateado que conserva los espacios en blanco y los saltos de línea- El patrón canónico
<pre><code>para bloques de código multilínea
Por qué importa la semántica
Como estas etiquetas se ven casi igual en pantalla, es tentador usar cualquiera que recuerdes. Resiste esa tentación. El estilo visual es solo un valor predeterminado — puedes cambiarlo con CSS en cualquier momento. Lo que no puedes cambiar tan fácilmente es el significado.
Un lector de pantalla puede anunciar el contenido de <kbd> y <samp> de manera diferente, los motores de búsqueda usan el marcado para entender la página, y otros desarrolladores que lean tu HTML dependen de estas etiquetas para saber si Ctrl + C es una combinación de teclas (<kbd>) o una cadena que el programa imprimió (<samp>). Usa el elemento que corresponda al significado y luego dale el estilo que quieras.
La etiqueta HTML <code>
La etiqueta HTML <code> marca un fragmento de código de computadora en línea — un nombre de función, una etiqueta, una propiedad CSS, un comando de shell, etc. No significa "variable"; para las variables usa <var>. Los navegadores muestran el contenido de <code> en una fuente monoespaciada.
Por sí sola, <code> es para fragmentos cortos e inline. Para bloques multilínea, envuélvela en <pre> (ver más abajo).
Ejemplo de la etiqueta HTML <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>The <code>console.log()</code> function prints a message.</p>
<p>Set the value with the <code>color</code> CSS property.</p>
</body>
</html>La etiqueta HTML <var>
La etiqueta <var> define una variable en una expresión matemática o en un contexto de programación — por ejemplo, x e y en una ecuación, o el nombre de un parámetro en el texto. Es el elemento correcto para las variables (un punto de confusión frecuente con <code>). Los navegadores la renderizan normalmente en cursiva.
Ejemplo de la etiqueta HTML <var>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p><var>x</var> = <var>y</var> + 5</p>
</body>
</html>La etiqueta HTML <kbd>
La etiqueta <kbd> marca entrada de teclado — texto o teclas que el usuario debe escribir o presionar. Úsala para atajos de teclado (Ctrl + V), comandos que el lector debe introducir y teclas individuales. Se renderiza en una fuente monoespaciada por defecto.
Ejemplo de la etiqueta HTML <kbd>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h2>The kbd example</h2>
<p>You can paste the document by pressing <kbd>Ctrl + V</kbd>.</p>
</body>
</html>La etiqueta HTML <samp>
La etiqueta <samp> marca la salida de muestra de un programa o script de computadora — el texto que el programa imprime de vuelta, a diferencia del código en sí (<code>) o lo que el usuario escribe (<kbd>). Se muestra en una fuente monoespaciada por defecto.
Una forma útil de recordar la diferencia: <kbd> es lo que entra, <samp> es lo que sale.
Ejemplo de la etiqueta HTML <samp>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Type <kbd>ls</kbd> and the shell prints <samp>file1.txt file2.txt</samp>.</p>
</body>
</html>La etiqueta HTML <pre>
La etiqueta <pre> define texto preformateado. A diferencia del HTML normal, el navegador conserva cada espacio, tabulación y salto de línea exactamente como están escritos en el código fuente, y renderiza el contenido en una fuente monoespaciada. Esto hace que <pre> sea ideal para arte ASCII, tablas de ancho fijo y — con mayor frecuencia — bloques de código donde la sangría y los saltos de línea deben preservarse.
Por sí sola, <pre> no transmite el significado de "esto es código"; solo controla el formato. Para expresar que el texto preformateado es código, combínala con <code>.
Ejemplo de la etiqueta HTML <pre>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>
This text
keeps its spacing
and line breaks.
</pre>
</body>
</html>Bloques de código multilínea con <pre> y <code>
Para un bloque de código fuente que abarca varias líneas, el patrón canónico y recomendado es anidar <code> dentro de <pre>. <pre> preserva los espacios en blanco y los saltos de línea; <code> agrega el significado semántico de que el contenido es código. Juntos constituyen la forma estándar de mostrar un bloque de código en HTML.
Ejemplo de <pre> con <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre><code>function greet(name) {
return "Hello, " + name;
}
greet("World");</code></pre>
</body>
</html>Ten en cuenta que el contenido de <code> comienza inmediatamente después de la etiqueta de apertura y termina justo antes de la etiqueta de cierre. Cualquier espacio o salto de línea que dejes entre <pre> y <code> también se renderizará, ya que <pre> preserva todos los espacios en blanco.
Elegir el elemento correcto
| Elemento | Significado | Uso típico |
|---|---|---|
<code> | Un fragmento de código | Un nombre de función, etiqueta o comando en línea |
<kbd> | Entrada de teclado | Atajos y texto que el usuario escribe |
<samp> | Salida de muestra de un programa | Texto que imprime un programa |
<var> | Una variable | x en una ecuación, un nombre de parámetro |
<pre> | Texto preformateado | Bloques multilínea; preserva los espacios en blanco |