Introducción
En el desarrollo web, a veces necesitamos mostrar contenido relacionado con la programación o con la informática en nuestras páginas web. Cuando queremos mostrar términos específicos como el nombre de una función o el nombre de una variable, podemos usar la etiqueta <code> para encerrar los mismos. Esta etiqueta cambia la familia de fuentes del texto encerrado a una fuente de ancho fijo como courier.
Nota: Puedes practicar la codificación en
index.htmly aprender Cómo escribir HTML en Visual Studio Code. Haz clic en 'Go Live' en la esquina inferior derecha para ejecutar el servicio web en el puerto 8080. Luego, puedes actualizar la pestaña Web 8080 para previsualizar la página web.
Agrega la etiqueta
Primero, crea un archivo index.html en tu sistema local y úbrelo con un editor de código de tu elección.
A continuación, agreguemos la etiqueta <code> a tu archivo HTML. La sintaxis de esta etiqueta es sencilla. Tiene una etiqueta de inicio y una de fin que encierran el texto que quieres mostrar.
<body>
<!-- Agregar la etiqueta <code> -->
<p>Este es un ejemplo de uso de la etiqueta <code>code</code> en HTML.</p>
</body>
En el bloque de código anterior, encerramos el término code dentro de la etiqueta <code>. Esto hace que el texto encerrado aparezca en una fuente de ancho fijo.
Agrega la etiqueta para mostrar código en múltiples líneas
Si necesitas mostrar código de programación en múltiples líneas, utiliza la etiqueta <pre> junto con la etiqueta <code>. Veamos cómo funciona agregando el siguiente código a tu archivo index.html.
<body>
<!-- Usando la etiqueta <pre> con la etiqueta <code> -->
<pre>
<code>
function multiply(a, b) {
return a * b;
}
// Llamar a la función
multiply(2, 3);
</code>
</pre>
</body>
En este bloque de código, usamos la etiqueta <pre> para indicar que queremos mostrar el código en un formato de bloque. Dentro de la etiqueta <pre>, agregamos la etiqueta <code> para indicar que estamos encerrando código de programación.
Utiliza atributos globales y atributos de eventos
Puedes utilizar los atributos globales y los atributos de eventos con la etiqueta <code>.
<body>
<!-- Utilizando atributos globales con la etiqueta <code> -->
<p>
<code class="highlight" style="color: red" title="This is a title"
>Some code</code
>
</p>
</body>
En el bloque de código anterior, utilizamos los atributos class, style y title con la etiqueta <code>.
Agrega el estilo CSS predeterminado
Si no especificas ningún estilo para la etiqueta <code>, utilizará los ajustes CSS predeterminados. La mayoría de los navegadores utilizan monospace como la familia de fuentes predeterminada para la etiqueta <code>.
<body>
<!-- Estilo CSS predeterminado para la etiqueta <code> de HTML -->
<p>
<code>Estilo CSS predeterminado</code>
</p>
</body>
Resumen
La etiqueta <code> se utiliza para encerrar contenido relacionado con la programación o con la informática. Al utilizar esta etiqueta, puedes mostrar el texto encerrado en una fuente de ancho fijo como courier. También puedes utilizar la etiqueta <pre> junto con la etiqueta <code> para mostrar código de programación en múltiples líneas. La etiqueta <code> admite atributos globales y atributos de eventos. Si no especificas ningún estilo para la etiqueta <code>, utilizará los ajustes CSS predeterminados con monospace como la familia de fuentes predeterminada.
