Текст с новой строки в HTML. Все способы
- 24 мая 2023
Чтобы разметить текст, нужно понимать, какие использовать теги. Для создания новой строки в тексте есть несколько способов. В статье мы расскажем, как ими пользоваться.
Тег <br>
для переноса строк
Применяется, чтобы вставить в текст перенос строки, не создавая при этом абзац.
- Синтаксис: является одиночным тегом, то есть не имеет закрывающего тега.
- Расположение: используется внутри блочного элемента или контейнера, где нужен перенос строки.
- Значение по умолчанию: не имеет атрибутов и свойств, не принимает никаких параметров, тег просто создаёт перенос строки.
- Использование в тексте: можно использовать несколько тегов
<br>
для создания множественных переносов строк. - Гдеиспользовать: в почтовых адресах, стихах, текстах песен, режиме работы.
❌ Не используйте тег <br>
для разбиения текста на «как бы абзацы». Для этого используйте тег <p>
.
Пример использования
<p>
Мяу мяу мяу
<br>
мррр мяу мяяяу
<br>
мяу мяу
<br>
мяу
</p>

⭐ Подробнее про тег <br>
читайте в нашем HTML-справочнике
Тег <p>
для абзаца
Применяется, если нужно отделить один блок текста от другого.
- Синтаксис: тег
<p>
является блочным тегом, значит имеет открывающий и закрывающий теги. - Расположение: тег обычно используется внутри контейнера
<body>
для размещения абзаца на веб-странице. Может содержать текст, изображения, ссылки и другие элементы HTML. - Отступы: тег создаёт отступы сверху и снизу от абзаца по умолчанию, чтобы отделить его от окружающего контента.
- Использование в тексте: можно использовать несколько тегов
<p>
для создания нескольких абзацев.
❌ Внутри абзаца не могут располагаться крупные структурные теги, заголовки, формы, списки, таблицы. Когда браузер встречает неподходящий тег внутри <p>
, он «выбрасывает» этот тег из <p>
.
Пример использования
<p>Это первый абзац.</p>
<p>Это второй абзац.</p>

⭐ Подробнее про тег <p>
читайте в статье
Тег <div>
для блока
Тег <div>
используется для группировки структурных элементов или в качестве вспомогательных контейнеров для создания нужной раскладки.
- Синтаксис: тег
<div>
является блочным тегом и имеет открывающий и закрывающий теги. - Расположение: тег может быть размещен внутри других элементов HTML, например
<body>
,<section>
,<article>
,<header>
,<footer>
и других. - Использование в структуре веб-страницы: тег часто используется для создания разделов или блоков на веб-странице. Например, можно использовать
<div>
для группировки связанных элементов, создания сетки, стилей, расположения элементови многого другого. - Неструктурированный контент: в отличие от
<p>
,<ul>
,<ol>
,<table>
,<div>
не имеет семантического значения и не предназначен для определённого типа контента. Он используется в основном для стилизации и организации контента на странице.
👉 Использовать рекомендуется в тех случаях, если более подходящих семантических тегов не нашлось.
Пример использования
<div>Это первый блок.</div>
<div>Это второй блок.</div>

⭐ Подробнее про тег <div>
читайте в статье
Материалы по теме
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше




search: новый HTML-элемент в 2023
Перевод статьи Альваро Монторо о новом теге
- 12 мая 2023

Как сверстать доступный сайт
Что важно учесть, чтобы сайтом смогли пользоваться все.
- 11 мая 2023


В каких браузерах тестировать вёрстку в 2023
Понятная инструкция для тех, кто запутался в хромиумах.
- 11 апреля 2023


