- Текст с новой строки в HTML. Все способы
- Тег для переноса строк
- Пример использования
- Тег для абзаца
- Пример использования
- Тег для блока
- Пример использования
- Материалы по теме
- — элемент переноса строки
- Интерактивный пример
- Атрибуты
- Устаревшие атрибуты
- Стилизация с CSS
- Примеры
- Простой br
- Проблемы доступности
- Техническая сводка
- Спецификации
- Совместимость с браузерами
- Смотрите также
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- Перевод на следующую строку html
- Правильное применение тега
- Случаи неправильного применения тега
- Неправильное объединение элементов в группу
- Вертикальные отступы
- Перевод на следующую строку html
- Синтаксис
- Атрибуты
- Пример
- Спецификация
- Браузеры
- См. также
Текст с новой строки в HTML. Все способы
Чтобы разметить текст, нужно понимать, какие использовать теги. Для создания новой строки в тексте есть несколько способов. В статье мы расскажем, как ими пользоваться.
Тег
для переноса строк
Применяется, чтобы вставить в текст перенос строки, не создавая при этом абзац.
- Синтаксис: является одиночным тегом, то есть не имеет закрывающего тега.
- Расположение: используется внутри блочного элемента или контейнера, где нужен перенос строки.
- Значение по умолчанию: не имеет атрибутов и свойств, не принимает никаких параметров, тег просто создаёт перенос строки.
- Использование в тексте: можно использовать несколько тегов
для создания множественных переносов строк. - Гдеиспользовать: в почтовых адресах, стихах, текстах песен, режиме работы.
❌ Не используйте тег
для разбиения текста на «как бы абзацы». Для этого используйте тег
.
Пример использования
Мяу мяу мяу
мррр мяу мяяяу
мяу мяу
мяу
Тег
для абзаца
Применяется, если нужно отделить один блок текста от другого.
- Синтаксис: тег
является блочным тегом, значит имеет открывающий и закрывающий теги.
- Расположение: тег обычно используется внутри контейнера для размещения абзаца на веб-странице. Может содержать текст, изображения, ссылки и другие элементы HTML.
- Отступы: тег создаёт отступы сверху и снизу от абзаца по умолчанию, чтобы отделить его от окружающего контента.
- Использование в тексте: можно использовать несколько тегов
для создания нескольких абзацев.
❌ Внутри абзаца не могут располагаться крупные структурные теги, заголовки, формы, списки, таблицы. Когда браузер встречает неподходящий тег внутри
, он «выбрасывает» этот тег из
.
Пример использования
Это первый абзац.
Это второй абзац.
⭐ Подробнее про тег
читайте в статье
Тег для блока
Тег используется для группировки структурных элементов или в качестве вспомогательных контейнеров для создания нужной раскладки.
- Синтаксис: тег является блочным тегом и имеет открывающий и закрывающий теги.
- Расположение: тег может быть размещен внутри других элементов HTML, например , , , , и других.
- Использование в структуре веб-страницы: тег часто используется для создания разделов или блоков на веб-странице. Например, можно использовать для группировки связанных элементов, создания сетки, стилей, расположения элементов и многого другого.
- Неструктурированный контент: в отличие от
, , , , не имеет семантического значения и не предназначен для определённого типа контента. Он используется в основном для стилизации и организации контента на странице.
👉 Использовать рекомендуется в тех случаях, если более подходящих семантических тегов не нашлось.
Пример использования
Это первый блок. Это второй блок. 
⭐ Подробнее про тег читайте в статье
Тег
используется для создания переноса строки внутри блока текста.
Тег
используется для создания абзацев или блоков текста.
Тег используется для создания блочного контейнера.
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
— элемент переноса строки
HTML-элемент устанавливает перевод строки в тексте (возврат каретки). Он полезен при написании поэмы или адреса, где важно деление на строки.
Интерактивный пример
Как мы видим из примера выше, элемент
поставлен в том месте, где мы хотим перенести строку. Текст после
начинается со следующей строки текстового блока.
Примечание: Не используйте для увеличения разрыва между строками в тексте; используйте CSS-свойство margin элемента .
Атрибуты
Устаревшие атрибуты
Определяет, где начинается следующая строка после перевода строки.
Стилизация с 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
Брутальный способ перенести текст или элемент на новую строку.
Время чтения: меньше 5 мин
Обновлено 7 сентября 2022
По мере развития стандарта HTML в него добавлялись новые теги и убирались неактуальные. В HTML5 большой упор был сделан на семантический смысл тегов, а всё, что касалось визуальной составляющей, было отдано на откуп CSS. То есть теперь использование тех или иных тегов определяется их функциональным назначением, а не тем, как тег влияет на внешний вид элемента.
Правильное применение тега
Скопировать ссылку «Правильное применение тега» Скопировано
Стандарт однозначно описывает назначение этого тега и ситуации, в которых уместно его применение: этот тег указывает на место разрыва строки и принудительного переноса текста на новую строку. И только для этих целей он должен применяться. Яркий пример — деление стихотворения по строкам:
Мой дядя самых честных правил, Когда не в шутку занемог, Он уважать себя заставил И лучше выдумать не мог.p> Мой дядя самых честных правил,br> Когда не в шутку занемог,br> Он уважать себя заставилbr> И лучше выдумать не мог. p>
Ещё одним примером может служить вёрстка почтового адреса, когда принципиально разнести части адреса по разным строкам:
432000 г. Ульяновск ул. Ленина, д. 34address> 432000br> г. Ульяновскbr> ул. Ленина, д. 34 address>
Обратите внимание: в обоих примерах текст является связанным. Другими словами, каждая новая строка по смыслу является частью всего текста.
Случаи неправильного применения тега
Скопировать ссылку «Случаи неправильного применения тега» Скопировано
Неправильное объединение элементов в группу
Скопировать ссылку «Неправильное объединение элементов в группу» Скопировано
А вот такое употребление
будет неверным, потому что каждая строка по сути является самостоятельной группой и должна быть выделена в отдельный абзац:
Имя: Адрес:p> label>Имя: input name="name">label>br> label>Адрес: input name="address">label> p>
Имя:
Адрес:
p>label>Имя: input name="name">label>p> p>label>Адрес: input name="address">label>p>
Вертикальные отступы
Скопировать ссылку «Вертикальные отступы» Скопировано
Ещё один пример неправильного употребления тега — использование его в декоративных целях: для задания вертикальных отступов между элементами. Вертикальные отступы — часть визуального оформления страницы, и должны задаваться исключительно в CSS.
Контейнеровоз сел на мель в Суэцком канале
.
Во всём мире наблюдается дефицит чипов
.
article> h2>Контейнеровоз сел на мель в Суэцком каналеh2> p>. p> article> br> br> article> h2>Во всём мире наблюдается дефицит чиповh2> p>. p> article>
Правильно с использованием CSS:
Контейнеровоз сел на мель в Суэцком канале
.
Во всём мире наблюдается дефицит чипов
.
article> h2>Контейнеровоз сел на мель в Суэцком каналеh2> p>. p> article> article> h2>Во всём мире наблюдается дефицит чиповh2> p>. p> article>
article margin-bottom: 2em;>article margin-bottom: 2em; >
Важно упомянуть, что при использовании
для вертикальных отступов между блочными элементами величина отступа напрямую зависит от размера шрифта родителя.
Попробуйте поизменять ширину окна в примере выше. Во втором блоке мы видим, что заголовок неестественно разрывает строки на малой ширине. Всё потому, что через CSS мы не можем управлять поведением
, и этот тег продолжает разрывать строку, несмотря ни на что.
Таким образом, использовать
можно, но с осторожностью, с оглядкой на спецификацию и здравый смысл.
Перевод на следующую строку html
Элемент
(от англ. line break — перенос строки) устанавливает перевод строки в том месте, где он находится. В отличие от элемента , использование
не добавляет пустой отступ перед строкой.
Синтаксис
Атрибуты
Пример
Результат данного примера показан на рис. 1.
Рис. 1. Вид текста при использовании
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation ( Рекомендация ) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation ( Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation ( Предлагаемая рекомендация ) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft ( Рабочий проект ) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft ( Редакторский черновик ) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft ( Черновик спецификации ) — первая черновая версия стандарта.
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.