Etiqueta HTML <code>
La etiqueta <code> se utiliza para insertar variables, fragmentos de código de programa, etc., en un documento HTML. En el navegador, el código se muestra en una fuente monoespaciada (una fuente en la que todos los caracteres tienen el mismo ancho). La etiqueta <code> es un elemento en línea de forma predeterminada.
La etiqueta <code> por sí sola representa una sola línea o frase de código. Debe estar envuelta dentro de un elemento <pre> para representar varias líneas de código.
Puedes usar CSS para lograr mejores efectos.
Sintaxis
La etiqueta <code> se usa en pares. El contenido se escribe entre las etiquetas de apertura (<code>) y cierre (</code>).
Ejemplo de la etiqueta HTML <code>:
Etiqueta HTML <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<p>Ordinary text.</p>
<code>Line of program code.</code>
<p>Continuation of the ordinary text.</p>
</body>
</html>Resultado
Ejemplo de la etiqueta HTML <code> colocada dentro de una etiqueta HTML <pre>:
Ejemplo de la etiqueta HTML <code> dentro de una etiqueta HTML <pre>:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre>
<code>
body {
color: yellow;
font-size: 16px;
line-height: 1.5;
}
</code>
</pre>
</body>
</html>Ejemplo de la etiqueta HTML <code> con propiedades CSS:
Ejemplo de la etiqueta HTML <code> con propiedades CSS:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
.code-style {
font-size: 20px;
line-height: 28px;
background-color: lightblue;
color: #ffffff;
}
</style>
</head>
<body>
<p>Ordinary text.</p>
<code class="code-style">Line of program code.</code>
<p>Continuation of the ordinary text.</p>
</body>
</html>Atributos
La etiqueta <code> admite los Atributos Globales y los Atributos de Eventos.
Por ejemplo, puedes usar el atributo title para agregar un tooltip: <code title="Declaración de variable">let x = 10;</code>.
Práctica
¿Cuál es el uso correcto de la etiqueta HTML <code>?