Etiqueta HTML `<pre>`

La etiqueta <pre> se utiliza para insertar texto preformateado en un documento HTML. Los espacios y saltos de línea en el texto se conservan. La etiqueta <pre> se suele utilizar para mostrar código o texto (por ejemplo, un poema), donde el propio autor establece la ubicación de las líneas en relación con las demás. El texto en un elemento <pre> se muestra en una fuente de ancho fijo.

El contenido de la etiqueta se muestra en el navegador en una fuente monoespaciada.

Los elementos en línea suelen colocarse dentro de la etiqueta <pre>. Aunque los elementos de bloque están permitidos en HTML5, pueden introducir espacios en blanco o sangría inesperados, por lo que generalmente se prefieren los elementos en línea.

éxito
La etiqueta <pre> puede utilizarse al mostrar texto con un formato poco común o algún tipo de código informático.

Sintaxis

La etiqueta <pre> viene en pares. El contenido se escribe entre las etiquetas de apertura (<pre>) y cierre (</pre>).

Ejemplo de la etiqueta HTML `<pre>`:

Ejemplo de la etiqueta HTML <pre>|W3Docs

html

<!DOCTYPE html>
<html>
  <head>
    <title>The title of the document</title>
  </head>
  <body>
    <pre>Spaces
               and line breaks
               within this element 
        are shown as typed.           
    </pre>
  </body>
</html>

Try it Yourself »

Resultado

ejemplo de etiqueta pre

éxito
Para insertar código en un documento HTML, utiliza la <code> etiqueta, anidada en el elemento <pre>. En ese caso, los robots de búsqueda y los lectores de pantalla entenderán inmediatamente que se trata de código de programación.

Ejemplo de la etiqueta HTML `<pre>` con el elemento `<code>`:

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <pre>
      <code>
        body {
          color:orange;
        }
      </code>
    </pre>
  </body>
</html>

Try it Yourself »

Atributos

Atributo	Valor	Descripción
width	number	Obsoleto. Utiliza CSS `max-width` o `overflow` en su lugar.

La etiqueta <pre> admite los Atributos globales y los Atributos de eventos.

Cómo dar estilo a una etiqueta HTML <pre>

css

pre {
  background-color: #f4f4f4;
  padding: 10px;
  overflow-x: auto;
}

Práctica

¿Qué características se asocian a la etiqueta 'pre' en HTML?

La etiqueta 'pre' se utiliza para definir texto preformateado.La etiqueta 'pre' no conserva ni los espacios ni los saltos de línea.El texto en una etiqueta 'pre' se muestra en una fuente de ancho fijo.La etiqueta 'pre' debe utilizarse cuando se necesita un formato de texto exacto.La etiqueta 'pre' elimina espacios adicionales y nuevas líneas.

Etiqueta HTML <pre> ​

Sintaxis ​

Ejemplo de la etiqueta HTML <pre>: ​

Resultado ​

Ejemplo de la etiqueta HTML <pre> con el elemento <code>: ​

Atributos ​