40 - 💻 Elementos de Código en HTML: Cómo Usarlos

---

Elementos de código informático en HTML

• <code> - Fragmento de código en línea
• <kbd> - Entrada del usuario (teclas)
• <samp> - Salida del programa
• <var> - Variable o valor
• <pre> - Texto preformateado
• <pre> - Resumen del episodio

---

<code> - Fragmento de código en línea

El elemento <code> en HTML se utiliza para representar pequeños fragmentos de código en línea. Este elemento no aplica ningún estilo específico por defecto, pero se suele utilizar en combinación con estilos de fuente monoespaciada, lo que ayuda a distinguir visualmente el código del texto circundante.

Este elemento es útil cuando necesitas incluir una pequeña cantidad de código en el mismo contexto que el texto regular, por ejemplo, al explicar una función, una etiqueta HTML o una palabra clave de programación. Si necesitas mostrar grandes bloques de código, es mejor usar otros elementos como <pre>.

Ejemplo

  
  
El elemento <code> no preserva los espacios en blanco ni los saltos de línea.
  
Para corregir esto, puedes colocar el elemento <code> dentro de un elemento <pre>:
  <pre>
  <code>
  let x = 5;
  let y = 6;
  let z = x + y;
  console.log(z);
  </code>
  </pre>
  
Se ve de esta manera
  
  
  
  let x = 5;
  let y = 6;
  let z = x + y;
  console.log(z);
  
  
                        

---

<kbd> - Entrada del usuario (teclas)

El elemento <kbd> en HTML se utiliza para representar las entradas del usuario, como las teclas que debe presionar en el teclado. Es útil cuando necesitas indicar combinaciones de teclas o acciones que un usuario debe ejecutar.

Por ejemplo, cuando das instrucciones para copiar texto, puedes indicar que el usuario debe presionar Ctrl + C en Windows, o Cmd + C en macOS.

El texto dentro del elemento <kbd> generalmente se presenta en una fuente monoespaciada para diferenciarse del texto normal, lo que lo hace fácilmente identificable como una entrada del usuario.

Ejemplo

    
    <p>Para copiar un texto, presiona <kbd>Ctrl</kbd> + <kbd>C</kbd> en Windows o <kbd>Cmd</kbd> + <kbd>C</kbd> en macOS.</p>
          

Para copiar un texto, presiona Ctrl + C en Windows o Cmd + C en macOS.

---

<samp> - Salida del programa

El elemento <samp> en HTML se utiliza para representar la salida de un programa, como el resultado de un comando o una respuesta de un sistema. Es útil en documentación técnica o tutoriales donde se desea mostrar la salida esperada de un programa de forma clara.

Al igual que otros elementos de semántica específica, el texto dentro del elemento <samp> suele mostrarse en una fuente monoespaciada, lo que ayuda a distinguirlo del texto normal y enfatiza que se trata de una salida de código.

Ejemplo

    
    <h1>Salida de un programa</h1>
    <samp>Hola, mundo!</samp>
          

Salida de un programa

Hola, mundo!

---

<var> - Variable o valor

El elemento <var> en HTML se utiliza para representar una variable matemática o un valor que puede cambiar. Este elemento es especialmente útil en contextos académicos, científicos o técnicos, donde se requiere mostrar fórmulas o expresiones que involucran variables.

El texto dentro de un elemento <var> generalmente se muestra en una fuente itálica para distinguirlo del resto del texto y para enfatizar que se trata de una variable que puede cambiar o tomar diferentes valores.

Ejemplo

    
    <p>La variable <var>x</var> representa un número en la ecuación <var>y = 2 * x + 3</var>.</p>
          

La variable x representa un número en la ecuación y = 2 * x + 3.

---

<pre> - Texto preformateado

El elemento <pre> en HTML se utiliza para mostrar texto que debe conservar su formato original, incluyendo espacios, tabulaciones y saltos de línea. Es ideal para mostrar fragmentos de código, poesía o cualquier texto en el que el formato sea importante.

El contenido dentro de un elemento <pre> se muestra en una fuente monoespaciada, lo que significa que cada carácter ocupa el mismo ancho. Esto ayuda a que el texto se vea alineado y ordenado, tal como se escribió.

Ejemplo

    
    <pre>
    function helloWorld() {
        console.log("¡Hola, mundo!");
    }
    </pre>
          

Salida

  function helloWorld() {
      console.log("¡Hola, mundo!");
  }
        

---

Resumen de Elementos de Código en HTML

En esta lección hemos abordado varios elementos HTML que son esenciales para representar contenido relacionado con código y texto técnico:

• <code>: Se utiliza para mostrar fragmentos de código en línea. Es ideal para destacar sintaxis de programación y se presenta generalmente en una fuente monoespaciada.
• <kbd>: Representa la entrada del usuario, como las teclas del teclado. Este elemento es útil para indicar combinaciones de teclas y se visualiza en una fuente monoespaciada.
• <samp>: Se utiliza para mostrar la salida de un programa. Es útil en documentación técnica y tutoriales, donde se espera que el usuario vea el resultado de un comando.
• <var>: Indica una variable en una expresión matemática o un valor que puede cambiar. Se utiliza en contextos académicos y técnicos, y se representa en itálico para resaltar su significado.
• <pre>: Muestra texto preformateado, manteniendo el formato original del texto, incluidos espacios y saltos de línea. Es ideal para mostrar código de programación y otros textos donde el formato es crítico.

Cada uno de estos elementos permite una mejor semántica y claridad en la presentación de contenido técnico en HTML.

---

Ir al índice

---