Elementos HTML para código informático

Elementos para código informático.

---

Formateo del código informático

Con HTML normalmente se tiene un tamaño de letra y un espaciado variables.

Esto no es lo ideal cuando se está presentado código de computadora o informático.

Los elementos <kbd>, <samp>, y <code> se muestran con un tamaño de letra y un espaciado fijo.

---

El elemento <kbd>

Los datos de entrada que se requieren del usuario a través del teclado van aca.

El elemento <kbd> se emplea para indicar que comandos, datos, o información le requiere al usuario un programa que presenta una interfaz con campos para la entrada o ingreso de comandos, datos, o información a través del teclado; y como ingresarlos:

<p>
 Para visualizar el contenido del archivo, sin tener el permiso para editarlo habilitado. Escriba o ingrese en el campo llamado “escucha”, la siguiente secuencia (sustituyendo “Archivo” con el nombre del archivo que desea acceder):
</p>

<p>
 <kbd>
  Archivo | Abrir...
 </kbd>
</p>

El elemento <samp>

Los datos de salida que produce, presenta, o reporta un computador van aca.

El elemento <samp> se emplea para mostrar el tipo de datos de salida que produce, presenta, o reporta un programa de computadora, como una muestra o prueba:

<samp>
 demo.ejemplo.com inicioDeSesion: 12 Abr 09:10:17
 Linux 2.6.10-grsec+gg3+e+fhs6b+nfs+gr0501+++p3+c4a+gr2b-reslog-v6.189
</samp>

El elemento <code> para código de programacion

El elemento <code> se emplea para presentar una pieza de código de programación:

<code>
 var x = 5;
 var y = 6;

 document.getElementById("demo").innerHTML = x + y;
</code>

Ten en cuenta que el elemento <code> no preserva los espacios en blanco extras y los saltos de línea.

Para contrarestar esto, puedes poner el elemento <code> dentro de un elemento <pre>:

<pre>
 <code>
  var x = 5;
  var y = 6;

  document.getElementById("demo").innerHTML = x + y;
 </code>
</pre>

El elemento <var> para las Variables

El elemento <var> se emplea para las variables.

La variable podría estar en una expresión matemática o en un caso de programación:

<p>
 Einstein escribio: <var>E</var> = <var>m</var><var>c</var><sup>2<sup>.
</p>

---

Resumen de lo aprendido

Etiqueta	Descripción
<code>	Define una pieza de código de programación
<kbd>	Define los datos de entrada que se requieren del usuario a través del teclado
<samp>	Define los datos de salida que produce, presenta, o reporta un computador
<var>	Define una variable
<pre>	Define texto preformateado