Тег <p> в HTML

Тег <p> в HTML является блочным элементом и интерпретируется как параграф. Ввиду того что <p> блочный элемент, по умолчанию его ширина занимает 100% ширины контейнера. Высота параграфа по умолчанию зависит от его текстового наполнения. Данный тег аналогичен элементу div, только обладает определенными заданными свойствами по умолчанию. Параграфы были определены стандартом W3C еще при зарождении HTML и это означает, что они поддерживаются всеми версиями браузеров.

Закрывающий тег необязателен. Если его нет, то считается, что он совпадает с началом следующего открывающего тега <p>, а также тегов заголовков H и некоторых других. Для удобства и порядка, конечно, лучше всегда ставить закрывающие теги.

Первоначальные свойства <p>

Параграф в HTML по умолчанию обладает следующими свойствами CSS:

1. font-size: 16px;
2. display: block;
3. margin-top, margin-bottom: 16 px или 1em;
4. margin-left, margin-right: 0px;
5. padding: 0px.

Абзацы разделяются между собой и другими элементами переводами строк.

Атрибуты

Параграф имеет один собственный атрибут, это:

align – значения: left, right, center, justify. Выравнивает текст по левому или правому краю, центру или по ширине (в HTML5 не поддерживается и значит нужно использовать text-align).

Также <p> поддерживает глобальные атрибуты:

1. class – имя класса;
2. id – имя идентификатора;
3. style – CSS свойства;
4. translate – разрешает или запрещает перевод текста на другой язык;
5. title – показывает информацию об элементе, при наведении на него курсора;

Также тег p поддерживает большинство событий JavaScript.

Обратите внимание, что пробелы, поставленные между открывающим тегом <p> и его содержимым, а также между содержимым и закрывающим </p> будут игнорироваться браузером. Чтобы сделать отступ в виде так называемой “красной строки” используйте CSS свойства text-indent, которое позволяет еще и определить размер отступа для нее.

Почему стоит использовать именно параграф

Семантическая верстка предполагает использование тегов по назначению. Конечно, вместо p можно установить div и придать ему определенный стиль. Но когда нужно сделать абзац, то p подходит лучше всего. Если требуется стилизовать абзац, то для этого, скорее всего, потребуется указать меньше свойств, нежели для <div>.

Если вам необходимо сделать больше отступ между абзацами, используйте для этого CSS-свойство margin-bottom.

Внутри <p> можно использовать все прочие теги форматирования текста, такие как cite, i, b, strong и другие.

По стандарту <p> не может содержать в себе блочных элементов, таких как <div>.

На примере у параграфов задано одно CSS-свойство – установлен голубой фон. Хорошо видны свойства, установленные по умолчанию: отступы сверху и снизу, отсутствие внутренних отступов и т.д.

See the Pen
тег p by Андрей (@adlibi)
on CodePen.