La etiqueta CODE

La etiqueta <code> se utiliza para marcar fragmentos de código de computadora dentro de un documento HTML. Es esencial para mostrar ejemplos de código, comandos o sintaxis de programación de manera semántica y legible.

Sintaxis básica

<p>Para imprimir un mensaje en Python, usa: <code>print("Hola Mundo")</code>.</p>

Resultado:
Para imprimir un mensaje en Python, usa: print("Hola Mundo").

Casos de uso comunes

Mostrar comandos en línea

<p>En la terminal, ejecuta: <code>npm install react</code></p>

Ejemplos de sintaxis

<p>En JavaScript, un bucle se crea con: <code>for (let i = 0; i < 5; i++)</code></p>

Variables o valores técnicos

 

 

<p>El código de estado HTTP para "No encontrado" es <code>404</code>.</p>

Atributos importantes

Atributo	Descripción
class	Para aplicar estilos CSS personalizados
id	Identificador único
style	Estilos en línea (no recomendado, mejor usar CSS externo)

Accesibilidad

Los lectores de pantalla identifican el contenido como código.

Buenas prácticas:

 

• Combinar con <pre> para bloques de código largos.

• Usar aria-label para descripciones adicionales:

<code aria-label="Ejemplo de función en Python">def suma(a, b):</code>

Estilización con CSS

Personaliza la apariencia para mejorar la legibilidad:

code {
  font-family: 'Courier New', monospace;
  background: #f8f9fa;
  padding: 2px 6px;
  border-radius: 4px;
  color: #c7254e;
  border: 1px solid #e1e1e1;
}

/* Bloques de código con <pre> */
pre code {
  display: block;
  padding: 1rem;
  overflow-x: auto;
}

Errores comunes

No escapar caracteres especiales

<!-- Incorrecto -->
<code><div></code> <!-- ¡Cierra el tag HTML accidentalmente! -->

<!-- Correcto -->
<code>&lt;div&gt;</code>

Usar para texto no relacionado con código

<!-- Incorrecto -->
<code>Texto destacado</code> <!-- ¡No es código! -->

Ignorar saltos de línea en bloques largos

 

<!-- Incorrecto -->
<code>function hola() { console.log("Hola"); }</code>

<!-- Correcto -->
<pre><code>function hola() {
  console.log("Hola");
}</code></pre>

Ejemplos prácticos

Bloque de código con <pre>

<pre><code class="language-javascript">
function suma(a, b) {
  return a + b;
}
console.log(suma(2, 3)); // 5
</code></pre>

Comando de terminal estilizado

HTML

<p>Clona un repositorio en Git:</p>
<code class="git-command">git clone https://github.com/usuario/repo.git</code>

CSS

.git-command {
  background: #2d2d2d;
  color: #00ff9d;
  padding: 8px;
  display: block;
  width: fit-content;
}

Código con resaltado de sintaxis

Usa bibliotecas como Prism.js o Highlight.js:

<!-- Con Highlight.js -->
<pre><code class="html">
&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
  &lt;title&gt;Ejemplo&lt;/title&gt;
&lt;/head&gt;
&lt;/html&gt;
</code></pre>

Buenas prácticas

1. Escapar caracteres HTML: Usa entidades como <, > y &.

2. Priorizar <pre> para bloques: Mantén la indentación y saltos de línea.

3. Usar clases semánticas: Ej: class="language-python" para ayudar a herramientas de resaltado.

4. Evitar CSS en línea: Usa hojas de estilo externas para mantenimiento fácil.

Comparación con etiquetas similares

Etiqueta	Propósito	Ejemplo
<code>	Código en línea o bloque	console.log()
<samp>	Salida de un programa	Error: archivo no encontrado
<kbd>	Entrada de teclado	Presiona <kbd>Ctrl</kbd> + <kbd>S`

Conclusión:

La etiqueta <code> es indispensable para:

• Mejorar la legibilidad de ejemplos técnicos.
• Proporcionar contexto semántico a navegadores y lectores de pantalla.
• Crear documentación clara y profesional.

¡Úsala para hacer que tus tutoriales, guías y documentación sean más efectivos y accesibles!