¿Como funciona el comando en HTML5: 'Pre'?

Descripción del Elemento <pre> en HTML5

El elemento <pre> en HTML5 se utiliza para representar texto preformateado. El contenido dentro de este elemento se muestra en una fuente de ancho fijo y se mantiene el formato de espacios y saltos de línea que se encuentran en el código fuente. Aquí se explican sus atributos:

Atributos Globales:

1. accesskey: Proporciona una tecla de acceso rápido para enfocar el elemento.
2. class: Aplica una o varias clases CSS al elemento.
3. contenteditable: Indica si el contenido puede ser editado por el usuario.
4. contextmenu: Asocia un menú contextual al elemento.
5. dir: Define la dirección del texto (e.g., "ltr" para izquierda a derecha, "rtl" para derecha a izquierda).
6. draggable: Indica si el elemento es arrastrable.
7. dropzone: Define qué tipo de contenido se puede arrastrar sobre el elemento.
8. hidden: Indica que el elemento no debe ser renderizado.
9. id: Define un identificador único para el elemento.
10. lang: Establece el idioma del contenido del elemento.
11. spellcheck: Indica si se debe verificar la ortografía del contenido.
12. style: Permite agregar estilos CSS en línea.
13. tabindex: Especifica el orden de tabulación del elemento.
14. title: Proporciona información adicional sobre el elemento, que suele mostrarse como tooltip.
15. translate: Indica si el contenido del elemento debe ser traducido.

Uso del Elemento <pre> en HTML5

El <pre> se utiliza principalmente para mostrar bloques de texto donde se quiera preservar el espaciado, saltos de línea y tabulaciones tal y como se escriben en el código fuente HTML. Esto es especialmente útil para mostrar ejemplos de código de programación, datos preformateados o cualquier otro tipo de texto donde el formato sea importante.

Ejemplos:

1. Mostrar Código de Programación:

   <pre>
   function holaMundo() {
      console.log('¡Hola, Mundo!');
   }
   </pre>

   En este ejemplo, los espacios y saltos de línea se mantendrán igual que en el código fuente, permitiendo ver la estructura del código de programación tal y como se escribió.

2. Texto Preformateado (Poesía, Tablas ASCII, etc.):

   <pre>
   Roses are red,
      Violets are blue;
   Sugar is sweet,
      And so are you.
   </pre>

   Aquí, el formato de la poesía se conserva, incluyendo los saltos de línea y cualquier indentación.

3. Datos de configuración o Log:

   <pre>
   [Settings]
   resolution=1920x1080
   fullscreen=true
   </pre>

   Este código se utiliza para mostrar un archivo de configuración tal y como está, lo que facilita entender la estructura y el contenido sin que el formateo se altere.

Conclusión

El elemento <pre> es una herramienta poderosa en HTML5 para mostrar texto que requiere un formato específico, como en el caso del código de programación o texto preformateado. Al utilizar este elemento, se garantiza que cualquier espacio, tabulación o salto de línea en el contenido del HTML se mantenga tal cual al ser presentado en el navegador, lo cual es esencial para ciertos tipos de visualización de datos.