<p>

Используйте тег <p>, чтобы превратить текст в абзац.

        
          
          <p>Это первый абзац текста.</p><p>А это уже второй.</p><p>И между ними небольшая пропасть.</p>
          <p>Это первый абзац текста.</p>
<p>А это уже второй.</p>
<p>И между ними небольшая пропасть.</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Тег <p> создаёт блок: всё, что находится внутри него, начнётся с новой строки. Между блоками <p> появляется вертикальный отступ, величину которого можно задать с помощью стилей.

Внутри блока может находиться любой текстовый контент.

        
          
          <p>Текст, хихик</p>
          <p>Текст, хихик</p>

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Дефолтные стили абзаца:

        
          
          p {  display: block;  margin-top: 1em;  margin-bottom: 1em;  margin-left: 0;  margin-right: 0;}
          p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

💡 Атрибут align для тега <p> устарел и больше не используется.

💡 Абзац может заканчиваться не только явно (закрывающим тегом </p>), но и неявно — перед началом следующего блочного элемента. Поэтому нельзя просто взять и вложить в абзац список, таблицу, <figure>, другой абзац и подобные элементы: браузер неявно закроет абзац перед ними и сделает эти элементы не вложенными, а соседними.

На практике

Скопировать ссылку "На практике" Скопировано

Дока Дог советует

Скопировать ссылку "Дока Дог советует" Скопировано

🛠 Тег <p> по факту ведёт себя как обычный блок <div>. Нужно учесть, что у <p> по умолчанию заданы свойства margin-block-start и margin-block-end — отступы от начала и конца блока, чтобы каждый абзац отступал на 1em (примерно 16 пикселей) от предыдущего. Поэтому этот показатель отступов надо прописывать в CSS для всех тегов <p>.

Чтобы сделать заголовок, который не имеет ценности для поисковых машин, то лучше, вместо одного из тегов <h1>...<h6> использовать тег <p> с классом h1 или h2 и так далее.

Алёна Батицкая советует

Скопировать ссылку "Алёна Батицкая советует" Скопировано

🛠 Я часто вижу, как начинающие разработчики оборачивают словосочетания или вообще одно слово в отдельные абзацы только для переноса текста на новую строку. Так делать не нужно, поскольку абзац является логической единицей текста.

Возьмите с полки любую книгу с прозой и откройте её. Вы увидите, что чаще всего абзацы состоят из нескольких предложений. Каждый абзац визуально отделён от предыдущего и следующего. В некоторых книгах это заметный отступ. Где-то — красная строка (отступ первой строки). Редко когда абзац состоит из отдельного слова или словосочетания.

Придерживайтесь этого принципа и в вёрстке. Оборачивайте в тег <p> как минимум одно полное предложение или текст из нескольких предложений.

Если нужен текстовый тег для слова или словосочетания — обратите внимание на <span>.

Текст — пластичная конструкция. Если нужно добиться переноса строк, то ограничьте ширину текстового блока и позвольте тексту занять отведённое ему пространство естественным образом.

+ Развернуть