HTML таг pre

Пример

Кратък пример как се използва тагът <pre>.

<pre>
function helloWorld() {
    console.log("Hello, world!");
}

helloWorld();
</pre>

Дефиниция и употреба

Виж как се ползва тагът <pre>.

Тагът <pre> (от preformatted text) се използва за показване на предварително форматиран текст, при който браузърът запазва всички интервали, табулации и нови редове точно така, както са написани в HTML кода. Съдържанието вътре в <pre> се визуализира с моноширинен (monospace) шрифт по подразбиране, което го прави подходящо за показване на примерен код, логове, ASCII графики или текст, при който подравняването е важно.

За разлика от обикновения текст в HTML, където поредица от интервали се свежда до един интервал и новите редове се игнорират, в <pre> те се запазват. Това означава, че не е необходимо да използвате <br> за нов ред или специални HTML ентитети за множество интервали – просто форматирате текста така, както искате да изглежда.

Често <pre> се комбинира с таг <code>, когато се показва програмен код: <pre><code>...</code></pre>. Това позволява по-добра семантика и улеснява инструменти за синтактично оцветяване. Елементът <pre> поддържа всички глобални HTML атрибути (като id, class, style, title и др.), но няма собствени специфични атрибути.

При използване в отзивчиви (responsive) дизайни е добре да се внимава с много дълги редове вътре в <pre>, тъй като те могат да предизвикат хоризонтално скролиране. Това може да се контролира с CSS, например чрез white-space или overflow свойства.

Browser Support

Browser	Поддръжка
Chrome	✔️
Firefox	✔️
Edge	✔️
Safari	✔️
Opera	✔️

Атрибути