Etiqueta pre en HTML
¿Qué es la etiqueta <pre> en HTML?
La etiqueta <pre> de HTML5 se utiliza para indicar que el contenido dentro de ella es una sección de texto preformateado, es decir, que mantiene la estructura de espacios en blanco y saltos de línea tal y como están en el código HTML.
El propósito principal de esta etiqueta es mostrar bloques de texto formateados de manera específica, como por ejemplo código fuente, poesía, citas, mensajes de correo electrónico, entre otros.
La etiqueta <pre> tiene una estructura de apertura (<pre>) y cierre (</pre>) y todo lo que se coloque entre ambas etiquetas será considerado como texto preformateado.
Ejemplo de uso
A continuación, se muestra un ejemplo básico de cómo se utiliza la etiqueta <pre> en HTML5:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ejemplo de etiqueta pre</title>
</head>
<body>
<h1>Ejemplo de etiqueta pre</h1>
<pre>
function saludar() {
console.log('Hola, mundo!');
}
</pre>
<p>Este es un ejemplo básico de cómo utilizar la etiqueta pre para mostrar código fuente de manera preformateada.</p>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se utiliza la etiqueta <pre> para mostrar una función de JavaScript preformateada. Todo el contenido dentro de la etiqueta <pre> mantiene la estructura original de espacios y saltos de línea, lo que facilita su lectura y comprensión.
Cabe destacar que aunque la etiqueta <pre> es muy útil para mostrar texto preformateado, su uso excesivo puede hacer que el código HTML sea difícil de leer y mantener.
Por lo tanto, se recomienda usarla solo en casos necesarios y no abusar de ella en la estructura de una página web.
Atributos
La etiqueta <pre> no tiene muchos atributos en HTML5. Aquí te muestro algunos atributos que puedes usar en la etiqueta <pre>:
- accesskey: Especifica una tecla de acceso rápido para enfocar el elemento.
- class: Define una o más clases de estilo que se aplican al elemento.
- contenteditable: Indica si el contenido del elemento es editable o no.
- dir: Define la dirección del texto.
- hidden: Indica que el elemento no debe ser visible.
- id: Define un identificador único (ID) para el elemento.
- lang: Define el idioma del contenido del elemento.
- spellcheck: Indica si el contenido del elemento debe ser revisado ortográficamente o no.
- style: Define uno o más estilos CSS que se aplican al elemento.
- tabindex: Indica si el elemento puede obtener el enfoque de entrada mediante el uso de la tecla Tab.
- title: Define un texto que describe el elemento cuando se muestra el cursor sobre él.
Es importante mencionar que, aunque estos atributos pueden ser útiles en ciertos casos, no son específicos de la etiqueta <pre> y se pueden usar en muchos otros elementos HTML.
La etiqueta <pre> se utiliza principalmente para mostrar texto preformateado y no requiere de muchos atributos para cumplir con su propósito.
Ejemplo
Aquí te dejo un ejemplo con algunos atributos de la etiqueta <pre> en HTML5:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta <pre></title>
</head>
<body>
<pre id="texto" class="rojo" lang="es" spellcheck="false">
Este es un ejemplo de texto preformateado
con la etiqueta <pre> de HTML5.
Se pueden incluir múltiples líneas de texto
y mantener la indentación y los espacios en blanco
tal como se escribieron originalmente.
</pre>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se utiliza la etiqueta <pre> para mostrar un bloque de texto preformateado. Se han agregado algunos atributos para demostrar su uso:
id="texto": Define un identificador único para el elemento.class="rojo": Define una clase de estilo llamada “rojo”.lang="es": Define el idioma del contenido del elemento en español.spellcheck="false": Indica que el contenido del elemento no debe ser revisado ortográficamente.
Cabe destacar que los atributos son opcionales y pueden variar según las necesidades del desarrollador.
El objetivo principal de la etiqueta <pre> es mostrar texto preformateado, por lo que la mayoría de las veces se utiliza sin atributos adicionales.
Más ejemplos
Aquí te dejo dos ejemplos avanzados de la etiqueta <pre> en HTML5:
- Ejemplo de mostrar código de programación con resaltado de sintaxis:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta <pre> en HTML5</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</head>
<body>
<h1>Ejemplo de etiqueta <pre> en HTML5</h1>
<p>El siguiente código JavaScript se muestra utilizando la etiqueta <pre>:</p>
<pre><code class="language-javascript">
function factorial(n) {
if (n === 0) {
return 1;
} else {
return n * factorial(n - 1);
}
}
console.log(factorial(5));
</code></pre>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se utiliza la biblioteca Highlight.js para agregar resaltado de sintaxis al código JavaScript que se muestra en la etiqueta <pre>.
Se agregan los archivos CSS y JavaScript de Highlight.js al encabezado, y se aplica la función hljs.initHighlightingOnLoad() en el encabezado para iniciar el resaltado de sintaxis.
- Ejemplo de mostrar código de programación con scroll horizontal:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de etiqueta <pre> en HTML5</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
pre {
background-color: #f7f7f7;
padding: 10px;
border: 1px solid #ccc;
font-size: 14px;
font-family: monospace;
white-space: pre;
overflow-x: auto;
}
</style>
</head>
<body>
<h1>Ejemplo de etiqueta <pre> en HTML5</h1>
<p>El siguiente código CSS se muestra utilizando la etiqueta <pre> con scroll horizontal:</p>
<pre>
body {
margin: 0;
padding: 0;
background-color: #f2f2f2;
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.5;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
p {
margin: 0 0 10px 0;
color: #666;
}
</pre>
</body>
</html>
Lenguaje del código: HTML, XML (xml)En este ejemplo, se utiliza el estilo CSS para agregar un scroll horizontal al contenido de la etiqueta <pre> cuando la línea es demasiado larga.
El estilo overflow-x: auto; permitirá la visualización del contenido completo del código CSS.