---
title: '<pre>: Предварительно отформатированный текстовый элемент'
slug: Web/HTML/Element/pre
tags:
  - HTML
  - HTML группировка контента
  - 'HTML: поток контента'
  - Элемент
translation_of: Web/HTML/Element/pre
---
<div>{{HTMLRef}}</div>

<p><span class="seoSummary"><strong>Элемент HTML <code>&lt;pre&gt;</code> </strong> представляет собой предварительно отформатированный текст, который должен быть представлен точно так, как написано в HTML-файле.</span> Текст обычно отображается с использованием непропорционального ("<a href="/ru/docs/XUL/Style/monospace">monospace</a>") шрифта. Пробелы внутри этого элемента отображаются как записанные.</p>

<div>{{EmbedInteractiveExample("pages/tabbed/pre.html", "tabbed-standard")}}</div>

<p class="hidden">The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples </a> and send us a pull request.</p>

<table class="properties">
 <tbody>
  <tr>
   <th scope="row"><a href="/ru/docs/Web/Guide/HTML/Content_categories">Категории контента</a></th>
   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA">Основной поток</a>, <a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%AF%D0%B2%D0%BD%D1%8B%D0%B9_%D0%BA%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D1%82">Явный контент</a></td>
  </tr>
  <tr>
   <th scope="row">Разрешённый контент</th>
   <td><a href="/ru/docs/Web/Guide/HTML/Content_categories#Phrasing_content">Фразовый контент</a></td>
  </tr>
  <tr>
   <th scope="row">Tag omission</th>
   <td>{{no_tag_omission}}</td>
  </tr>
  <tr>
   <th scope="row">Разрешённые родители</th>
   <td>Любой элемент, который принимает <a href="/ru/docs/Web/Guide/HTML/Content_categories#%D0%9E%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D0%BE%D0%B9_%D0%BF%D0%BE%D1%82%D0%BE%D0%BA">содержимое потока</a></td>
  </tr>
  <tr>
   <th scope="row">Неявная роль ARIA</th>
   <td><a href="https://www.w3.org/TR/html-aria/#dfn-no-corresponding-role">Нет соответствующей роли</a></td>
  </tr>
  <tr>
   <th scope="row">Разрешённые роли ARIA</th>
   <td>Любые</td>
  </tr>
  <tr>
   <th scope="row">Интерфейс DOM</th>
   <td>{{domxref("HTMLPreElement")}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Атрибуты">Атрибуты</h2>

<p>Этот элемент включает в себя только <a href="/ru/docs/Web/HTML/Global_attributes">глобальные атрибуты</a>.</p>

<dl>
 <dt>{{htmlattrdef("cols")}} {{non-standard_inline}}{{obsolete_inline}}</dt>
 <dd>Содержит <em>предпочтительное</em> количество символов, которое должна иметь строка. Это был нестандартный синоним {{htmlattrxref("width", "pre")}}. Чтобы добиться такого эффекта, используйте CSS {{Cssxref("width")}}.</dd>
 <dt>{{htmlattrdef("width")}} {{obsolete_inline}}</dt>
 <dd>Содержит <em>предпочтительное</em> количество символов, которое должна иметь строка. Хотя технически он все ещё реализован, этот атрибут не имеет визуального эффекта; чтобы достичь такого эффекта, используйте CSS {{Cssxref("width")}}.</dd>
 <dt>{{htmlattrdef("wrap")}} {{non-standard_inline}}</dt>
 <dd>Подсказка, указывающая, как должен происходить перенос. В современных браузерах этот атрибут игнорируется, и никакого визуального эффекта не приводит; чтобы достичь такого эффекта, используйте CSS {{Cssxref("white-space")}}.</dd>
</dl>

<h2 id="Пример">Пример</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p&gt;Использовать CSS для изменения цвета шрифта легко.&lt;/p&gt;
&lt;pre&gt;
body {
  color: red;
}
&lt;/pre&gt;
</pre>

<h3 id="Результат">Результат</h3>

<p>{{EmbedLiveSample("Пример")}}</p>

<h2 id="Проблемы_доступности">Проблемы доступности</h2>

<p>Важно предоставить альтернативное описание для любых изображений или диаграмм, созданных с использованием предварительно отформатированного текста. Альтернативное описание должно чётко и лаконично описывать содержание изображения или диаграммы.</p>

<p>Люди, испытывающие проблемы с плохим зрением и просматривающие страницы с помощью вспомогательных технологий, таких как программа чтения с экрана, могут не понимать, что представляют собой предварительно отформатированные текстовые символы, когда они читаются последовательно.</p>

<p>Комбинация элементов {{HTMLElement("figure")}} и {{HTMLElement("figcaption")}}, дополненная {{htmlattrxref("id")}} и <a href="/ru/docs/Web/Accessibility/ARIA">ARIA</a> <code>role</code> и <code>aria-labelledby</code>, позволяет объявить предварительно отформатированный текст как изображение, а <code>figcaption</code> служит альтернативным описанием изображения.</p>

<h3 id="Пример_2">Пример</h3>

<pre>&lt;figure role="img" aria-labelledby="cow-caption"&gt;
  &lt;pre&gt;
  ____________________________
&lt;  Я эксперт в своей области.  &gt;
  ----------------------------
         \   ^__^
          \  (oo)\_______
             (__)\       )\/\
                 ||----w |
                 ||     ||
  &lt;/pre&gt;
  &lt;figcaption id="cow-caption"&gt;
     Корова говорит: «Я эксперт в своей области». Корова проиллюстрирована с использованием предварительно отформатированных текстовых символов.
  &lt;/figcaption&gt;
&lt;/figure&gt;
</pre>

<ul>
 <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.1_—_Providing_text_alternatives_for_non-text_content">MDN Understanding WCAG, Guideline 1.1 explanations</a></li>
 <li><a href="https://www.w3.org/TR/WCAG20-TECHS/H86.html">H86: Providing text alternatives for ASCII art, emoticons, and leetspeak | W3C Techniques for WCAG 2.0</a></li>
</ul>

<h2 id="Характеристики">Характеристики</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('HTML WHATWG', 'semantics.html#the-pre-element', '&lt;pre&gt;')}}</td>
   <td>{{Spec2('HTML WHATWG')}}</td>
   <td>No significant change from {{SpecName("HTML5 W3C")}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML5 W3C', 'grouping-content.html#the-pre-element', '&lt;pre&gt;')}}</td>
   <td>{{Spec2('HTML5 W3C')}}</td>
   <td>No significant change from {{SpecName("HTML4.01")}}</td>
  </tr>
  <tr>
   <td>{{SpecName('HTML4.01', 'struct/text.html#h-9.3.4', '&lt;pre&gt;')}}</td>
   <td>{{Spec2('HTML4.01')}}</td>
   <td>Deprecated the <code>cols</code> attribute</td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_браузера">Совместимость браузера</h2>



<p>{{Compat("html.elements.pre")}}</p>

<h2 id="Смотреть_также">Смотреть также</h2>

<ul>
 <li>CSS: {{Cssxref('white-space')}}, {{Cssxref('word-break')}}</li>
 <li>Связанный элемент: {{HTMLElement("code")}}</li>
</ul>

<div id="simple-translate">
<div>
<div class="simple-translate-button isShow" style="height: 22px; width: 22px; top: 1739px; left: 246px;"></div>

<div class="simple-translate-panel " style="width: 300px; height: 200px; top: 0px; left: 0px; font-size: 13px; background-color: rgb(255, 255, 255);">
<div class="simple-translate-result-wrapper" style="overflow: hidden;">
<div class="simple-translate-move"></div>

<div class="simple-translate-result-contents">
<p class="simple-translate-result" style="color: rgb(0, 0, 0);"></p>

<p class="simple-translate-candidate" style="color: rgb(115, 115, 115);"></p>
</div>
</div>
</div>
</div>
</div>