Códigos informáticos HTML

<code>
  var = 5;
  var = 6;
  document.getElementById("demo").innerHTML = X + Y;
</code>

Formateo de código informático en HTML

El HTML normalmente utiliza un tamaño de letra y espaciado variable. Esto no es necesariamente el deseado cuando queremos mostrar ejemplos de códigos informáticos.

Los elementos HTML <kbd>, <samp> y <code> son mostrados con un tamaño de letra y espaciado fijo.

HTML <kbd> para entradas al sistema

El elemento HTML <kbd> define entradas al sistema como el teclado o mouse:

<kbd>Archivo | Abrir</kbd>

Resultado:

Archivo | Abrir

El elemento HTML <samp> para salidas de dispositivos

El elemento HTML <samp> define salidas del sistema como pantalla o impresión:

<samp>
  demo.ejemplo.com
  Acceso: 01 Diciembre 12:24:12
  Linux 2.6.10
</samp>

Resultado:

demo.ejemplo.com
Acceso: 01 Diciembre 12:24:12
Linux 2.6.10

El elemento HTML <code> para código de programación

El elemento <code> define una pieza de código de programación.

<code>
  var = 5;
  var = 6;
  document.getElementById("demo").innerHTML = X + Y;
</code>

Resultado:

var = 5; var = 6; document.getElementById("demo").innerHTML = X + Y;

Nota que el elemento <code> no conserva los espacios extras ni saltos de línea. Para fijar esto puedes poner el elemento <code> dentro de un elemento <pre>:

<pre>
  <code>
    var = 5;
    var = 6;
    document.getElementById("demo").innerHTML = X + Y;
  </code>
</pre>

Resultado:

var = 5;
var = 6;
document.getElementById("demo").innerHTML = X + Y;

El elemento HTML <var> para Variables

El elemento <var> define una variable. Una variable puede ser una variable en un expresión matemática o una variable en un contexto de programación:

Einstein escribió: <var>E</var> = <var>m</var><var>c</var><sup>2</sup>

Resultado:

Einstein escribió: E = mc²