Можно ли в тег p вложить p

Обновлено: 24.04.2024

The HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.

Paragraphs are block-level elements, and notably will automatically close if another block-level element is parsed before the closing

tag. See "Tag omission" below.

Try it

Content categories Flow content, palpable content.
Permitted content Phrasing content.
Tag omission The start tag is required. The end tag may be omitted if the element is immediately followed by an , , , , , , , , , , , , , , , , , , , , , , , or another element, or if there is no more content in the parent element and the parent element is not an element.
Permitted parents Any element that accepts flow content.
Implicit ARIA role No corresponding role
Permitted ARIA roles Any
DOM interface HTMLParagraphElement

Attributes

This element only includes the global attributes.

Note: The align attribute on

tags is obsolete and shouldn't be used.

Example

Result

Styling paragraphs

By default, browsers separate paragraphs with a single blank line. Alternate separation methods, such as first-line indentation, can be achieved with CSS:

JavaScript

Result

Accessibility concerns

Breaking up content into paragraphs helps make a page more accessible. Screen-readers and other assistive technology provide shortcuts to let their users skip to the next or previous paragraph, letting them skim content like how white space lets visual users skip around.

Using empty

elements to add space between paragraphs is problematic for people who navigate with screen-reading technology. Screen readers may announce the paragraph's presence, but not any content contained within it — because there is none. This can confuse and frustrate the person using the screen reader.

If extra space is desired, use CSS properties like margin to create the effect:

Для блочных элементов характерны следующие особенности.

Не все блочные теги допустимо вкладывать один в другой, поэтому при создании структуры кода активную роль выполняет как универсальный кирпичик вёрстки. Тег допустимо вкладывать один в другой, другие блочные элементы также можно помещать внутрь . В примере 3.13 показан фрагмент кода сайта CSS Zen Garden, где активно применяются эти теги для формирования требуемой конструкции.

Пример 3.13. Использование тега

Если в одном блочном элементе содержатся строчные элементы наряду с блочными, то вокруг строчных элементов генерируется анонимный блок. Для таких блоков применяется стиль по умолчанию, а также наследуемый стиль, заданный для его родителя. В примере 3.14 внутри располагается два тега

и рядовой текст. Поскольку этот элемент анонимный, напрямую только к нему одному нельзя применить стили.

Пример 3.14. Анонимный блок

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Схематично блоки в данном примере показаны на рис. 3.23. Серым цветом выделены блочные теги

, а пунктиром — анонимный блок.

Блоки в документе

Рис. 3.23. Блоки в документе

Преобразование в блочный элемент

В некоторых случаях требуется наделить строчный элемент характеристиками блочного. Так, превращение ссылки в блок позволяет увеличить полезную площадь ссылки за счёт использования свойств width и height . В примере 3.15 показано создание меню, в котором ссылками является вся доступная область.

Пример 3.15. Меню

XHTML 1.0 CSS 2.1 IE Cr Op Sa Fx

Вся строка выступает ссылкой, поэтому при наведении на неё курсора происходит изменение стиля (рис. 3.24).

Ссылка как блочный элемент

Рис. 3.24. Ссылка как блочный элемент

Следует понимать, что превращение элемента в блочный не даёт право нарушать последовательность вложения тегов и вкладывать блочные элементы внутрь строчных, даже если через стили они установлены блочными.


HTML5


Блочные элементы


Строчные элементы


Универсальные элементы


Нестандартные теги


Осуждаемые теги


Видео


Документ


Звук


Изображения


Объекты


Скрипты


Списки


Ссылки


Таблицы


Текст


Форматирование


Формы


Фреймы

Internet Explorer Chrome Opera Safari Firefox Android iOS
1.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

Описание

Определяет текстовый абзац. Тег

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

Синтаксис

Атрибуты

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

HTML5 IE Cr Op Sa Fx

Статьи по теме


HTML5


Блочные элементы


Строчные элементы


Универсальные элементы


Нестандартные теги


Осуждаемые теги


Видео


Документ


Звук


Изображения


Объекты


Скрипты


Списки


Ссылки


Таблицы


Текст


Форматирование


Формы


Фреймы

Internet Explorer Chrome Opera Safari Firefox Android iOS
1.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+ 1.0+

Спецификация

Описание

Определяет текстовый абзац. Тег

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

Синтаксис

Атрибуты

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег

HTML5 IE Cr Op Sa Fx

Статьи по теме

HTML расшифровывается как «Hypertext Markup Language», то есть «язык гипертекстовой разметки».

Язык HTML отвечает за структуру и содержание страницы. HTML состоит из тегов, а тег состоит из имени, заключённого между знаками «меньше» и «больше». Примеры тегов:

Парные теги

Теги бывают парными и одиночными. Парные теги могут содержать текст и другие теги. У парных тегов, в отличие от одиночных, есть вторая половинка — закрывающий тег:

В закрывающей части парных тегов перед именем ставится символ / («слэш»).

В парные теги можно вкладывать другие теги. Например, как в списках:

У вложенных тегов всегда нужно следить за правильным порядком закрытия. Вложенный тег не может закрываться позже родительского:

Не все теги можно вкладывать в другие теги, например, тег нельзя вкладывать в

.

Одиночные теги

Существуют не только парные, но и одиночные теги. Например, тег позволяет добавить картинку в разметку.

Сам по себе не имеет смысла. Чтобы этот тег был действительно полезен, необходимо написать внутри него адрес, ведущий к картинке. Делается это с помощью атрибута src :

У тега может быть несколько атрибутов. В этом случае они пишутся через пробел:

Например, картинке при желании можно задать размеры:

Комментарии

Код, заключённый между символами , работать не будет. Если эти символы удалить, то код заработает, это называется «раскомментировать». С помощью комментариев обычно временно отключают какой-то код или оставляют подсказки и разъяснения.

CSS расшифровывается как «Cascading Style Sheets», то есть «каскадные таблицы стилей».

Язык CSS отвечает за внешний вид страницы.

С помощью CSS можно задавать параметры для любого тега: ширину и высоту, отступы, цвет и размер шрифта, фон и так далее. Все эти параметры задаются с помощью свойств в следующем формате:

Стили к тегам добавляются чаще всего при помощи атрибута class .

Например, если мы хотим, чтобы определённые стили, описанные, допустим, в классе feature-kitten , применились к тегу

, то в разметке напишем так:

CSS-правила

Можно сказать, что CSS-правило — это группа свойств и их значений, которая целиком применяется к тем тегам, на которые указывает селектор.

И выглядит это так:

Задавать стили можно не только с помощью атрибута class , но и по тегам. Селектор указывает, к каким тегам применятся свойства из CSS-правила. Селекторы по тегам работают проще всего: они выбирают все теги с подходящим именем.

В примере селектором является p , и он выбирает все теги с именем p (то есть теги

), а теги с другим именем, например h1 , не выбирает.

Когда же стилизация задаётся по классам, то стили применяются только к тегам с такими классами.

Миксование классов

У HTML-элемента может быть сколько угодно классов, в этом случае они перечисляются в атрибуте class через пробел, например:

Обычно миксование используют так: в один класс выносят общее оформление, а в дополнительных классах описывают его модификации.

Комментарии

В CSS тоже существуют комментарии, их отличие от HTML-комментариев в том, что код или подсказки пишутся между символами /* и */ .

Автор статьи

Куприянов Денис Юрьевич

Куприянов Денис Юрьевич

Юрист частного права

Страница автора

Читайте также: