HTML tiene elementos que permiten mostrar código de lenguajes de programación. En este sitio los utilizamos de forma abundante y has visto su uso en los artículos de este curso. Y de hecho, ya conoces un elemento que se usa para eso: <pre>, de preformateado, que preserva los espacios múltiples, los saltos de línea y las tabulaciones. En este artículo aprenderás elementos más específicos:
Lista de elementos para mostrar código descritos en este artículo:
| Elemento | Descripción |
|---|---|
<code> | Para representar código fuente de programación |
<samp> | Para representar la salida de un programa |
<var> | Para representar variables |
<kbd> | Para representar teclas |
Representar código fuente: elemento <code>
Para representar código fuente de cualquier lenguaje de programación se utiliza el elemento <code> dentro del elemento <pre> de preformateado. Por lo tanto, el código deberá ir entre las etiquetas <code> (de apertura) y </code> (de cierre). Si no usáramos el elemento <pre> de preformateado, no se preservarían los espacios múltiples ni las tabulaciones para sangrar código, ni los saltos de línea.
Ejemplo de código HTML para representar código de programación:
<pre>
<code>
var x = 5;
var y = 6;
var z = x + y;
</code>
</pre>
Y este es el resultado:
var x = 5;
var y = 6;
var z = x + y;
En el ejemplo anterior definimos tres variables en JavaScript. Se puede ver el cambio de color de la sintaxis, que aparece como si se tratara de un editor de código. Existen paletas de colores dependiendo de la tecnología que se use. En este sitio usamos el resaltador de sintaxis Rouge con la paleta de colores Atomic.
También lo utilizamos como elemento de línea, simplemente poniendo las etiquetas <code> y </code> dentro de un párrafo y sin usar el elemento <pre> de preformateado. De hecho, lo has estado viendo a lo largo del curso, pues es el elemento que usamos par representar o marcar las etiquetas HTML en nuestros artículos. Por ejemplo: este texto de aquí.
Representar salida de programa: elemento <samp>
El elemento <samp> se utiliza para representar o citar texto de la salida (output) de un programa de ordenador. El texto aparece con la tipografía monoespaciada (todos los caracteres ocupan el mismo ancho) y sin ningún tipo de coloreado de sintaxis. Se usará las etiquetas <samp> (de apertura) y </samp> (de cierre).
Ejemplo de código HTML para representar la salida de un programa:
<p>Mensaje de mi ordenador:</p>
<p><samp>¡Hola, mundo!<br>Presiona 'q' para salir.</samp></p>
Se verá así:
Mensaje de mi ordenador:
¡Hola, mundo!
Presiona 'q' para salir.
Representar variables: elemento <var>
Con el elemento <var> se puede marcar o representar variables, ya sean de programación o matemáticas. Por tanto, todo contenido entre las etiquetas <var> (de apertura) y </var> (de cierre) será entendido por el navegador web como una variable. A nivel de estilos aparecerá en cursiva.
Ejemplo de código HTML para representar variables:
<p>La variable <var>int</var> contiene un valor numérico.</p>
<p>El área del rectángulo es <var>a</var> × <var>b</var>.</p>
La variable int contiene un valor numérico.
El área del rectángulo es a × b.
Representar teclas: elemento <kbd>
Para representar teclas o entradas de teclado se utiliza el elemento <kbd>. Cada sitio web lo tiene estilizado de manera diferente con las hojas de estilo CSS; en el nuestro tiene la apariencia de una tecla. Todo texto entre las etiquetas <kbd> (de apertura) y </kbd> (de cierre) se verá como una tecla.
Por ejemplo, para referirnos al atajo de teclado «Ctrl+s»:
<kbd>Ctrl</kbd>+<kbd>s</kbd>
Se verá de la siguiente manera:
Ctrl+s
Otro ejemplo:
<p>Pulse <kbd>Esc</kbd> para salir.</p>
Se verá así:
Pulse Esc para salir.
