<pre>: Предварительно отформатированный текстовый элемент
Элемент HTML <pre> представляет собой предварительно отформатированный текст, который должен быть представлен точно так, как написано в HTML-файле. Текст обычно отображается с использованием непропорционального («monospace») шрифта. Пробелы внутри этого элемента отображаются как записанные.
Интерактивный пример
| Категории контента | Основной поток, Явный контент |
|---|---|
| Допустимое содержимое | Фразовый контент |
| Пропуск тегов | Нет, открывающий и закрывающий теги обязательны. |
| Допустимые родители | Любой элемент, который принимает содержимое потока |
| Неявные ARIA-роли | Нет соответствующей роли |
| Допустимые ARIA-роли | Любые |
| DOM-интерфейс | HTMLPreElement (en-US) |
Атрибуты
Этот элемент включает в себя только глобальные атрибуты.
Содержит предпочтительное количество символов, которое должна иметь строка. Это был нестандартный синоним width . Чтобы добиться такого эффекта, используйте CSS width .
Содержит предпочтительное количество символов, которое должна иметь строка. Хотя технически он все ещё реализован, этот атрибут не имеет визуального эффекта; чтобы достичь такого эффекта, используйте CSS width .
Подсказка, указывающая, как должен происходить перенос. В современных браузерах этот атрибут игнорируется, и никакого визуального эффекта не приводит; чтобы достичь такого эффекта, используйте CSS white-space .
Пример
Результат
Проблемы доступности
Важно предоставить альтернативное описание для любых изображений или диаграмм, созданных с использованием предварительно отформатированного текста. Альтернативное описание должно чётко и лаконично описывать содержание изображения или диаграммы.
Люди, испытывающие проблемы с плохим зрением и просматривающие страницы с помощью вспомогательных технологий, таких как программа чтения с экрана, могут не понимать, что представляют собой предварительно отформатированные текстовые символы, когда они читаются последовательно.
Комбинация элементов <figure> и <figcaption> , дополненная id и ARIA role и aria-labelledby , позволяет объявить предварительно отформатированный текст как изображение, а figcaption служит альтернативным описанием изображения.
Pre в html что это
The pre tag defines preformatted text. Text in a pre element is displayed in a fixed-width font and preserves both spaces and line breaks.
Overview Table
Examples of content might include:
- computer code
- ASCII art
- program output
This element is used with the code element, the samp element, or the kbd element, and so on, according to the kind of content inside a pre element.
Rendering in text/html
Unlike in XML mode, a text/html parser will strip the newline character if it appears after the opening <pre> tag, as an authoring convenience.
Accessibility
The author should consider accessibility, when use the pre element. This is because, when speech synthesizers, braille displays, and the like is used, there is a possibility that preformatted text is destroyed. For example, for cases like ASCII art, it is likely that an alternative presentation, such as a textual description, would be more universally accessible to the readers of the document.
Examples
This example uses the PRE element to format text so that it renders exactly as it is typed.
Example of pre-formatted computer code inside a <code> tag
Usage
Notes
Remarks
Text within the PRE element is formatted. Spaces and carriage returns are preserved.
Pre в html что это
Тег <pre> (от англ. preformatted — предварительно отформатированный) определяет блок предварительно форматированного текста.
Такой текст отображается обычно моноширинным шрифтом и со всеми пробелами между словами. По умолчанию, любое количество пробелов идущих в коде подряд, на веб-странице показывается как один. Элемент <pre> позволяет обойти эту особенность и отображать текст как требуется разработчику.
Pre в html что это
В рубрике «HTML» Вы найдете бесплатные уроки по работе с этим языком гипертекстовой разметки, который лежит в основе большинства сайтов.
Данная рубрика заменит Вам полноценный «HTML учебник». Здесь Вы сможете найти ответы на большинство вопросов, связанных с HTML и DHTML.
Бесплатные уроки HTML для начинающих
Помимо текстовых уроков, Вы также сможете найти на нашем сайте полезные видео уроки по HTML. Простые и понятные примеры и объяснения помогут Вам в кратчайшие сроки освоить этот базовый язык «сайтостроения».
Лайфхак: наиполезнейшая функция var_export()
При написании или отладки PHP скриптов мы частенько пользуемся функциями var_dump() и print_r() для вывода предварительных данных массив и объектов. В этом посте я бы хотел рассказать вам о функции var_export(), которая может преобразовать массив в формат, пригодный для PHP кода.
17 бесплатных шаблонов админок
Парочка бесплатных шаблонов панелей администрирования.
30 сайтов для скачки бесплатных шаблонов почтовых писем
Создание шаблона для письма не такое уж простое дело. Предлагаем вам подборку из 30 сайтов, где можно бесплатно скачать подобные шаблоны на любой вкус.
Как осуществить задержку при нажатии клавиши с помощью jQuery?
К примеру у вас есть поле поиска, которое обрабатывается при каждом нажатии клавиши клавиатуры. Если кто-то захочет написать слово Windows, AJAX запрос будет отправлен по следующим фрагментам: W, Wi, Win, Wind, Windo, Window, Windows. Проблема?.
15 новых сайтов для скачивания бесплатных фото
Подборка из 15 новых сайтов, где можно скачать бесплатные фотографии для заполнения своих сайтов.
50+ бесплатных Bootstrap 3 шаблонов и элементов UI
Подборка бесплатных UI материалов и Bootstrap 3 шаблонов за уходящий месяц.
Зум слайдер
Сегодняшний черновик — это простой слайдер с возможностью раскрытия подробной информации о каждом элементе.