Tag HTML <pré>

Este artigo visa ensinar Tag pré através de exemplos , na crença de que preencherá uma necessidade de educação.

A tag HTML <pre> é usada para definir o texto pré-formatado, que preserva os espaços em branco e as quebras de linha.

Características principais

Aqui estão alguns dos principais recursos e usos da tag <pre> :

A tag <pre> preserva todos os espaços em branco e quebras de linha no texto, incluindo espaços, tabulações e novas linhas. Isso pode ser útil para exibir código ou outros tipos de texto em que o espaço em branco é importante.
O texto dentro da tag <pre> normalmente é exibido em uma fonte monoespaçada, o que garante que cada caractere ocupe a mesma quantidade de espaço. Isso pode ser útil para exibir código ou outros tipos de texto em que o alinhamento é importante.
A tag <pre> é frequentemente usada para exibir exemplos de código, pois preserva os espaços em branco e permite que o código seja exibido em uma fonte monoespaçada. Isso pode ser útil para tutoriais, documentação e outros tipos de conteúdo educacional.
A tag <pre> pode ser usada para exibir arte ASCII, que é uma forma de arte criada usando apenas caracteres do conjunto de caracteres ASCII. A fonte monoespaçada e o espaço em branco preservado da tag <pre> podem ajudar a garantir que a arte ASCII seja exibida corretamente.

Aqui está o texto pré-formatado:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<body>
<pre>
For instance, text in a pre element is displayed in a fixed-width font, and line breaks are preserved, such as
Twinkle, twinkle, little star.
How I wonder what you are.
Up above the world so high.
Like a diamond in the sky.
Twinkle twinkle little star.
How I wonder what you are.
</pre>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Veja como criar texto pré-formatado de largura fixa usando CSS:

Example:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<body>
<div style="width:300px ; overflow:auto">
<pre>This is the pre tag used it will used as
much space is defined for the use.</pre>
</div>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Aqui está outro exemplo da tag <pre> em HTML :

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
<body>
<pre>
<code>
function greet(fname) {
console.log("Hello, " + fname);
}
greet("Mr Example");
</code>
</pre>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Usando a tag <pre> para criar um layout de largura fixa para uma seção de texto em um site:

Example:

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html>
<body>
<pre style="width: 600px; overflow-x: scroll;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod nibh vel odio malesuada, non tristique nisi suscipit. Sed euismod nibh vel odio malesuada, non tristique nisi suscipit. Sed euismod nibh vel odio malesuada, non tristique nisi suscipit. Sed euismod nibh vel odio malesuada, non tristique nisi suscipit. Sed euismod nibh vel odio malesuada, non tristique nisi suscipit. Sed euismod nibh vel odio malesuada, non tristique nisi suscipit. Sed euismod nibh vel odio malesuada, non tristique nisi suscipit.
</pre>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Índice-

Marca HTML <pré>:

Tag pré-uso

A Tag pre <pre> indica texto pré-formatado.

O texto em um elemento <pre> aparece em uma fonte de largura fixa com espaços e quebras de linha mantidos. Você verá o texto da mesma forma que apareceria no código-fonte HTML .

Certifique-se de verificar o seguinte:

Marcação	Visão geral
<código>	Uma explicação de um bloco de código de computador.
<samp>	Descreva como um programa de computador produz saída de amostra.
<kbd>	Explique a entrada do teclado.
<var>	Definindo uma variável.

Atributos

Global

A Tag pre <pre> também é compatível com os Atributos Globais em HTML.

Evento

A tag <pre> também aceita os atributos de evento em HTML.

Compatibilidade do navegador

Elemento
<pré>	Sim	Sim	Sim	Sim	Sim

CSS predefinido

O elemento <pre> é frequentemente gerado com os valores padrão fornecidos:

pre {
display: block;
font-family: monospace;
white-space: pre;
margin: 1em 0;
}

Benefícios da tag HTML <pre>

Aqui estão alguns benefícios de usar a tag HTML <pre> :

A tag <pre> preserva todos os caracteres de espaço em branco, incluindo espaços, tabulações e quebras de linha. Isso facilita a exibição de código ou outro texto que depende de formatação precisa.
O texto dentro da tag <pre> é exibido em uma fonte monoespaçada, onde cada caractere ocupa o mesmo espaço. Isso é particularmente útil para exibir código, onde o alinhamento é importante.
A fonte monoespaçada usada na tag <pre> pode melhorar a legibilidade do texto, especialmente para código ou arte ASCII. Isso ajuda a tornar o texto mais fácil de ler e entender.
A tag <pre> pode melhorar a acessibilidade do seu conteúdo, tornando mais fácil para os leitores de tela e outras tecnologias assistivas analisar e exibir o texto.
A tag <pre> é amplamente suportada por todos os navegadores e dispositivos modernos, tornando-a uma maneira confiável de exibir texto pré-formatado.
Você pode personalizar o estilo do texto dentro da tag <pre> usando CSS para se adequar ao design do seu site ou aplicativo.

Se este artigo foi informativo o suficiente para atender às suas necessidades educacionais, compartilhe essas informações significativas com seus amigos clicando nos links aqui.

Nós valorizamos o seu feedback.

Tag HTML <pré>

Características principais

Example:

Example:

Example:

Example:

Tag pré-uso

Atributos

Global

Evento

Compatibilidade do navegador

CSS predefinido

Benefícios da tag HTML <pre>

Sentindo entediado?