HTML5: o elemento “pre”

Imagem gerada por IA para exemplificar um codificador.O elemento `<pre>` no HTML5 é utilizado para definir texto pré-formatado. A abreviação “pre” representa “preformatted text“. Este elemento preserva tanto os espaçamentos quanto as quebras de linha no texto, exibindo-o exatamente como está no código HTML. Ele é frequentemente utilizado quando a formatação do texto é crucial, como em blocos de código-fonte, saídas de código ou qualquer outro tipo de texto onde a formatação e espaçamento precisam ser mantidos.

Sintaxe

A sintaxe básica do elemento `<pre>` é bastante simples:

<pre>
Este é um exemplo
de texto pré-formatado.
</pre>

Exibir exatamente como está no código

O texto dentro do elemento `<pre>` é exibido exatamente como está no código, incluindo todos os espaços em branco e quebras de linha.

Além disso, o elemento `<pre>` quando combinado com outros elementos HTML para destacar ainda mais a informação, como quando se exibe código-fonte. Por exemplo, pode-se usar o elemento `<code>` dentro de `<pre>` para destacar o código:

<pre>
<code>
function olahMundo() {
console.log("Olá, mundo!");
}
</code>
</pre>

Referência da tag pre no W3C

https://html.spec.whatwg.org/multipage/grouping-content.html#the-pre-element