Etiqueta code en HTML

¿Qué es la etiqueta <code> en HTML?

La etiqueta HTML <code> se utiliza para mostrar texto que debe ser interpretado como código informático. Este código puede incluir etiquetas HTML, CSS, JavaScript u otros lenguajes de programación.

La etiqueta <code> es útil para resaltar el código de un documento HTML y hacer que sea más fácil de leer y entender. El texto dentro de la etiqueta <code> se muestra generalmente en una fuente de ancho fijo (monoespaciada) y a menudo se resalta con un fondo de color diferente o un borde para separarlo visualmente del resto del contenido de la página.

Además, la etiqueta <code> se puede utilizar en combinación con otras etiquetas, como <pre>, <kbd> o <samp>, para crear bloques de código más complejos.

Ejemplo de uso

Aquí te presento un ejemplo sencillo de cómo se puede utilizar la etiqueta <code> en HTML5:


<p>Para imprimir un mensaje en JavaScript, utiliza el comando <code>console.log("Mensaje");</code></p>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <code> para resaltar el código JavaScript y hacerlo más fácil de leer para el usuario.

Nota: El contenido dentro de la etiqueta <code> debe ser escrito en un lenguaje de programación válido, sino no funcionaría como se espera.

Atributos

La etiqueta HTML <code> no tiene atributos específicos.

La única función de la etiqueta <code> es mostrar texto que debe ser interpretado como código informático. El contenido de la etiqueta <code> puede ser cualquier código, ya sea HTML, CSS, JavaScript u otro lenguaje de programación.

Sin embargo, se pueden utilizar atributos globales de HTML5, como “class” o “id”, en la etiqueta <code> para aplicar estilos CSS o para identificar el elemento en el documento.

Ejemplo:

Aquí te presento un ejemplo de cómo se puede utilizar el atributo “class” en la etiqueta <code>:


<p>Para imprimir un mensaje en JavaScript, utiliza el comando <code class="highlight">console.log("Mensaje");</code></p>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado el atributo “class” en la etiqueta <code> con el valor “highlight” para aplicar un estilo CSS específico a ese código.

Esto puede ser útil para hacer que el código sea más fácil de leer o para resaltar el código de manera diferente al resto del texto en la página.

Más ejemplos

Aquí te presento dos ejemplos completos y avanzados de la etiqueta <code> de HTML5:

Ejemplo 1: Utilizando la etiqueta <code> para mostrar código CSS y aplicando estilos personalizados con CSS.


<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo de etiqueta code</title>
	<style>
		.highlight {
			background-color: #f1f1f1;
			border: 1px solid #ddd;
			padding: 5px;
			border-radius: 3px;
		}
	</style>
</head>
<body>
	<p>El siguiente código CSS cambiará el color del texto:</p>
	<pre><code class="highlight">
		body {
			color: red;
		}
	</code></pre>
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <code> para mostrar código CSS y hemos aplicado estilos personalizados con CSS. Hemos utilizado el atributo “class” para identificar que se trata de código CSS y hemos aplicado un estilo CSS específico a ese código utilizando el valor “highlight”.

También hemos utilizado la etiqueta <pre> para mantener el formato de líneas del código.

Ejemplo 2: Utilizando la etiqueta <code> para mostrar código HTML en un formulario.


<!DOCTYPE html>
<html>
<head>
	<title>Ejemplo de etiqueta code en formulario</title>
</head>
<body>
	<form action="submit.php" method="post">
		<label for="name">Nombre:</label>
		<input type="text" id="name" name="name">
		<br>
		<label for="email">Email:</label>
		<input type="email" id="email" name="email">
		<br>
		<label for="message">Mensaje:</label>
		<textarea id="message" name="message" rows="5" cols="40"></textarea>
		<br>
		<input type="submit" value="Enviar">
	</form>
	<p>Aquí está el código HTML del formulario:</p>
	<pre><code>
		<form action="submit.php" method="post">
			<label for="name">Nombre:</label>
			<input type="text" id="name" name="name">
			<br>
			<label for="email">Email:</label>
			<input type="email" id="email" name="email">
			<br>
			<label for="message">Mensaje:</label>
			<textarea id="message" name="message" rows="5" cols="40"></textarea>
			<br>
			<input type="submit" value="Enviar">
		</form>
	</code></pre>
</body>
</html>

Lenguaje del código: HTML, XML (xml)

En este ejemplo, hemos utilizado la etiqueta <code> para mostrar el código HTML del formulario y hemos utilizado la etiqueta <pre> para mantener el formato de líneas del código.

Esto ayuda a que el código sea más legible para el usuario y permite que se copie y pegue fácilmente.