Текст с новой строки в HTML. Все способы

  • 24 мая 2023

HTML

Саша Ермайкина

Чтобы разметить текст, нужно понимать, какие использовать теги. Для создания новой строки в тексте есть несколько способов. В статье мы расскажем, как ими пользоваться.

Тег <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> читайте в статье

Материалы по теме

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.

ТелеграмПодкастБесплатные учебники

Читать дальше