pre

Атрибуты

Устаревшие атрибуты

Определяет, где начинается следующая строка после перевода строки.

Стилизация с CSS

Элемент
имеет единственную цель – создать разрыв линии в блоке текста. Таким образом, он не имеет размеров или визуального стиля как такового. Есть всего несколько свойств, которые вы можете стилизовать.

Вы можете установить значение margin на
чтобы увеличить расстояние между линиями в блоке, но это плохая практика – лучше использовать свойство line-height для этой цели.

Примеры

Простой br

В следующем примере мы используем элемент
для разрыва линий в почтовом адресе:

br> 331 E. Evelyn Avenuebr> Mountain View, CAbr> 94041br> USAbr> 

Результат будет выглядеть так:

Проблемы доступности

Разделять абзацы в тексте, используя
не только плохая практика, но и проблема для людей, которые используют программы чтения с экрана. Программы чтения могут сообщать о наличии элемента, но не содержимом в
. Это может привести к путанице и разочарованию для человека, использующего программу чтения с экрана.

Техническая сводка

• Категории контентаОсновной поток, текстовый контент.
• Разрешённое содержимое Отсутствует, это пустой элемент.
• Пропуск теговДолжен иметь открывающий тег, но не закрывающий тег. В XHTML документах элемент пишется как
  .
• Допустимые родительские элементы Любой элемент, который поддерживает текстовый контент.
• Интерфейс DOMHTMLBRElement

Спецификации

Совместимость с браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

This page was last modified on 5 февр. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник

Работа с текстом

Для управления текстом и изменения его вида существует достаточно большое количество различных элементов. Что не удивительно, ведь текст — это самый популярный вид информации.

Особенности текста в HTML

Прежде чем редактировать код веб-страницы, следует принять во внимание некоторые особенности, которые присущи HTML при работе с текстом.

Любое количество пробелов идущих подряд, в браузере отображается как один

Сколько бы вы не поставили пробелов между словами, это никак не повлияет на конечный вид текста. То же правило относится к символам табуляции и переносу текста. Приведённые ниже строки будут отображаться на веб-странице одинаково, несмотря на их разное написание.

Измеряй микрометром. Отмечай мелом. Отрубай топором.

Измеряй микрометром. Отмечай мелом. Отрубай топором.

Измеряй микрометром. Отмечай мелом. Отрубай топором.

Исключением из этого правила является элемент , содержимое которого отображается именно так, как оно указано в коде, с учётом всех пробелов. По этой причине часто применяется для фрагментов программ, где важны пробелы (пример 1).

public boolean shouldOverrideUrlLoading(WebView view, String url) < if (url.startsWith("http://") || url.startsWith("https://")) < view.getContext().startActivity(new Intent(Intent.ACTION_VIEW, Uri.parse(url))); return true; >else < return false; >>

Результат данного примера показан на рис. 1.

Первый абзац

Второй абзац

Каждый абзац начинается с открывающего тега

и заканчивается закрывающим тегом

. В примере 2 показано применение нескольких абзацев.

Пример 2. Использование абзацев

В одних садах цветёт миндаль, в других метёт метель.

В одних краях ещё февраль, в других — уже апрель.

Проходит время, вечный счёт: год за год, век за век.

Во всём — его неспешный ход, его кромешный бег.

В году на радость и печаль по двадцать пять недель.

Мне двадцать пять недель февраль, и двадцать пять — апрель.

По двадцать пять недель в туман уходит счёт векам.

Летит мой звонкий балаган куда-то к облакам.

М. Щербаков

Результат данного примера показан на рис. 2.

Как видно из приведённого рисунка, при использовании элемента

между абзацами возникают отступы. От них можно избавиться, если в местах переноса строк добавить элемент
. В отличие от абзаца,
не создаёт дополнительных вертикальных отступов между строк и может применяться практически в любом тексте.

Так, текст примера 1 с учётом переноса строк будет преобразован следующим образом (пример 3).

В одних садах цветёт миндаль, в других метёт метель.
В одних краях ещё февраль, в других — уже апрель.
Проходит время, вечный счёт: год за год, век за век.
Во всём — его неспешный ход, его кромешный бег.
В году на радость и печаль по двадцать пять недель.
Мне двадцать пять недель февраль, и двадцать пять — апрель.
По двадцать пять недель в туман уходит счёт векам.
Летит мой звонкий балаган куда-то к облакам.

М. Щербаков

Результат примера продемонстрирован на рис. 3. Видно, что расстояние между строками текста уменьшилось и текст приобрёл более компактный вид.

Рис. 3. Вид текста с учётом переносов

Учтите, что один абзац нельзя вкладывать внутрь другого.

Заголовки

Заголовки выполняют важную функцию на веб-странице — с их помощью происходит систематизация текста и определяется иерархия подразделов. Это учитывается поисковыми системами при индексации веб-страницы и при отображении результатов поиска.

В HTML для заголовков есть шесть элементов от до . Элемент определяет заголовок первого уровня, он самый значимый и применяется обычно для заголовка статьи или поста блога. Элемент определяет заголовок второго уровня, он используется, как правило, для подзаголовков. Последним по иерархии идёт .

Синтаксис создания заголовков показан в примере 4.

Пример 4. Добавление заголовков

Заголовок первого уровня

Заголовок второго уровня

Заголовок третьего уровня

Заголовок четвёртого уровня

Заголовок пятого уровня

Заголовок шестого уровня

Результат данного примера показан на рис. 4. Содержимое элемента отображается самым крупным шрифтом жирного начертания, а — самым мелким.

Рис. 4. Вид заголовков на веб-странице

Как правило, на веб-странице применяют заголовки с первого по третий уровень, их вполне достаточно. Редко когда приходится использовать заголовки более низкого уровня.

Верхний и нижний индексы

Индексом по отношению к тексту называется смещение символов относительно базовой линии вверх или вниз (рис. 5). В зависимости от положения, индекс называется, соответственно, верхним или нижним. Они активно применяются в математике, физике, химии и для обозначения единиц измерения. HTML предлагает два элемента для создания индекса: — верхний индекс (от англ. superscript) и — индекс нижний (от англ. subscript). Текст внутри этих элементов обозначается меньшим размером, чем обычный текст, и смещается вверх или вниз.

Рис. 5. Базовая линия текста

В примере 5 показано применение нижнего индекса для химической формулы.

Пример 5. Использование нижнего индекса

Результат данного примера показан на рис. 6.

Преимуществом кодировки UTF-8 является то, что она позволяет напрямую вставлять символы, которых на клавиатуре нет, к примеру знаки зодиака. На сайте utf8icons.com вы можете найти множество различных символов, скопировать их и вставить в свой код HTML. Главное, чтобы текстовый редактор поддерживал кодировку UTF-8.

При этом некоторые символы нельзя вставлять в код напрямую. К примеру, если в тексте понадобились символы < и >, а вы вставите их в код, то HTML воспримет их как теги, что может привести к ошибке отображения. В подобных случаях используется специальная форма написания, показанная в табл. 1.

Спецсимвол начинается с амперсанда, затем идёт текстовое обозначение символа и заканчивается всё точкой с запятой. Любое отклонение от такой формы записи приведёт к тому, что символ отображаться не будет.

Таким образом, чтобы вывести код HTML, в тексте мы используем следующую запись (пример 7).

Пример 7. Использование спецсимволов

Переносы в тексте

HTML произвольно переносит текст на новую строку в тех местах, где встречается пробел или дефис. Но по правилам русского языка в некоторых случаях переносы запрещены. Так, нельзя разрывать переносом сокращения, вроде «т. д.», отрывать инициалы от фамилии, от значения единицы измерения (5 км) и обозначение года (1917 г.) и др. Чтобы запретить перенос в определённых местах вместо пробела применяется неразрывный пробел  , как показано в примере 8.

Пример 8. Неразрывный пробел

Возврат к стереотипам аннигилирует глубокий полифонический роман, именно об этом говорил Б. В. Томашевский в своей работе 1925 года.

И, наоборот, там, где в длинных словах желательно поставить перенос строки, вы можете использовать элемент или спецсимвол ­ . И тот и другой вариант работает одинаково — слово отображается целиком, когда оно помещается в строке, а если не помещается, то в указанных местах делается перенос (пример 9). Есть только небольшая разница в отображении — ­ добавляет при переносе дефис, а нет.

Пример 9. Переносы в тексте

Источник