Tag HTML <pre>
Use a tag <pre> para definir texto pré-formatado, apresentado exatamente como escrito no arquivo HTML, com espaços e quebras de linha preservados.
A tag HTML <pre> define texto pré-formatado — texto que é renderizado exatamente como escrito no código-fonte, com todos os espaços e quebras de linha preservados. Os navegadores exibem o conteúdo de um elemento <pre> em uma fonte de largura fixa (monoespaçada). É usada com maior frequência para exibir código-fonte (geralmente em conjunto com a tag <code>) ou qualquer texto em que o autor controla o layout exato das linhas, como um poema ou arte ASCII.
Por que <pre> Preserva os Espaços em Branco
Por padrão, os navegadores colapsam os espaços em branco: uma sequência de espaços, tabulações e quebras de linha é renderizada como um único espaço, e as quebras de linha no HTML não têm efeito visual. É por isso que escrever vários espaços ou pressionar Enter dentro de um parágrafo normal não altera a aparência do texto.
O elemento <pre> desativa esse comportamento. Dentro dele, cada espaço, tabulação e quebra de linha é significativo e exibido literalmente — não há necessidade de ou <br> para controlar o espaçamento. Internamente, esse é o mesmo efeito de aplicar a declaração CSS white-space: pre, que é o estilo padrão que os navegadores atribuem ao <pre>.
Use <pre> sempre que a disposição exata dos caracteres importar: listagens de código, saída de linha de comando, texto simples em formato tabular ou arte feita com caracteres.
Sintaxe
A tag <pre> vem em pares. O conteúdo é escrito entre as tags de abertura (<pre>) e fechamento (</pre>). Observe que o texto geralmente começa na linha após a tag de abertura, e qualquer indentação adicionada dentro do código-fonte aparecerá na saída.
Elementos inline são tipicamente colocados dentro da tag <pre>. Embora elementos de nível de bloco sejam permitidos no HTML5, eles podem introduzir espaços em branco ou indentação inesperados, por isso elementos inline são geralmente preferidos.
Exemplo da Tag HTML <pre>
<!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>Resultado
O Padrão <pre><code> para Blocos de Código
A maneira canônica e acessível de exibir um bloco de código-fonte é aninhar um elemento <code> dentro de um elemento <pre>:
<pre>fornece o layout de bloco e preserva os espaços em branco e as quebras de linha.<code>adiciona a semântica: marca o conteúdo como código de computador em vez de texto comum.
Juntos, informam aos mecanismos de busca e às tecnologias assistivas exatamente o que é o conteúdo. Leitores de tela podem anunciá-lo como uma região de código, e bibliotecas de realce de sintaxe (Prism, highlight.js, etc.) usam o seletor pre > code para colorir a marcação. Usar <pre> sozinho manteria a formatação, mas perderia esse significado, por isso o uso combinado é o padrão recomendado.
Exemplo da Tag HTML <pre> Com o Elemento <code>
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<pre><code>body {
color: orange;
}</code></pre>
</body>
</html>Os espaços em branco dentro de <pre> são literais, portanto coloque o </pre> de fechamento imediatamente após o código (como acima). Quebras de linha iniciais e indentação entre <pre> e <code> são renderizadas, o que explica por que código-fonte com indentação profunda pode aparecer com linhas em branco indesejadas e espaços iniciais.
Escapando <, > e & Dentro de <pre>
<pre> preserva os espaços em branco, mas não desativa a análise do HTML. O navegador ainda lê seu conteúdo como marcação. Portanto, se você quiser exibir HTML literal ou qualquer coisa contendo os caracteres <, > ou &, é necessário escapá-los com entidades HTML — caso contrário, o navegador tentará interpretá-los como tags:
| Caractere | Entidade |
|---|---|
< | < |
> | > |
& | & |
Por exemplo, para exibir o texto <p>Hello & welcome</p> você deve escrever:
<pre><code><p>Hello & welcome</p></code></pre>A página exibe os colchetes angulares em vez de renderizar um parágrafo. Consulte a referência Unicode HTML para a lista completa de entidades nomeadas.
Estilizando <pre> e a Propriedade white-space
Os navegadores estilizam <pre> com white-space: pre por padrão. Você pode alterar como o texto pré-formatado quebra linha usando a propriedade CSS white-space:
| Valor | Quebras de linha | Espaços / tabulações | Quebra automática |
|---|---|---|---|
pre | preservadas | preservados | nunca quebra (padrão para <pre>) |
pre-wrap | preservadas | preservados | quebra quando a linha é longa demais |
pre-line | preservadas | colapsados | quebra quando a linha é longa demais |
Como pre nunca quebra, uma linha longa de código ultrapassará o limite do contêiner. A solução habitual é adicionar uma barra de rolagem horizontal com overflow-x: auto, que mantém a formatação original e permite ao leitor rolar horizontalmente:
pre {
background-color: #f4f4f4;
padding: 10px;
overflow-x: auto; /* horizontal scroll for long lines */
}Se preferir que o texto quebre para a próxima linha em vez de rolar, use white-space: pre-wrap.
Atributos
O elemento <pre> não possui atributos obrigatórios. Os antigos atributos width, cols e wrap estão obsoletos e foram removidos do HTML5 — use CSS em vez deles:
| Atributo obsoleto | O que fazia | Use em vez disso |
|---|---|---|
width | sugeria a largura em caracteres | CSS max-width |
cols | sugeria o número de colunas | CSS width / max-width |
wrap | controlava a quebra de linha | CSS white-space: pre-wrap |
A tag <pre> suporta os Atributos Globais e os Atributos de Evento.
Tags Relacionadas
<code>— marca um fragmento de código de computador.<samp>— saída de amostra de um programa.<kbd>— entrada de teclado.- Elementos de código de computador HTML — visão geral de todas as tags relacionadas a código.