Вложенные элементы в теге P в HTML5: допустимые и недопустимые

Быстрый ответ

Элемент <p> предназначен для вложения исключительно фразового контента. Это могут быть элементы типа <span>, <a>, <em>, <strong>, <small>, <abbr> и другие подобные. Вкладывание блочных элементов, таких как <div> или другой <p>, запрещено. При этом необходимо следить за тем, чтобы структура была простой и семантически корректной:

<!-- Подобный абзац будет корректным. -->
<p>Это текст с <a href="#">ссылкой</a> и несколькими <strong>выделенными</strong> словами.</p>

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

Фразовый контент: Список разрешенных элементов

Мы можем представить <p> как вечеринку, на которую пускают только определенных гостей. Среди таких гостей могут быть, например, элементы <a>, <abbr>, <img>, <input>, <video>, которые идеально вписываются в текст и не нарушают структуру документа.

Условное разрешение: Элементы с оговорками

Некоторые элементы допускаются в <p>, но только в том случае, если находятся в окружении иных фразовых элементов. Так, <a> и <map> могут быть встроены, если связаны исключительно с фразовым контентом. Того же касается <del> и <ins>, которые могут сочетаться с текстом и строчными элементами.

Частые ошибки: Недопустимые элементы

Старайтесь не допускать упомянутых ошибок в вашем коде! Вставка блочных элементов, например <div>, <ul>, <h1>, в <p>, приведет к многочисленным синтаксическим проблемам.

Визуализация

| Допустимые элементы 🛋️      | Запрещенные элементы 🚪  |
|------------------------------|------------------------- |
| Текст                      | Таблицы                  |
| Строчные элементы (🖋️)    | Блочные элементы         |
| Фразовый контент (🎶)      | Заголовки                |
| Ссылки (🔗)                | Списки                   |
| Форматирующие элементы (🌟)| Разделы и секции         |

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

Медиа и формы: Специальные элементы

При использовании медиа-элементов, таких как <img> или <video>, а также элементов формы <input>, <label>, убедитесь, что они соответствуют требованиям строчных элементов и органично вписываются в структуру вашего документа.

Доступность: Важность семантической верности

Для обеспечения доступности контента <p>, помните о семантически правильном использовании элементов. Использование <abbr> для аббревиатур, <code> для вставки кода, делает ваш текст более понятным и доступным.

Пример соблюдения правил

<!-- Грамотное использование элементов в <p>: -->
<p>
  Добро пожаловать! Поговорите с <strong>неотъемлемой частью команды Брэдом</strong>,
  улыбнитесь юмору <code>умного Карла</code>. Не желаете ли <a href="#bar">освежиться</a>?
</p>

Полезные материалы

1. HTML Спецификация — детальное руководство по использованию элементов в <p>.
2. MDN Web Docs о <p> — подробная документация и полезные советы.
3. Вкладывание <div> в <p> приводит к добавлению лишнего <p> — понимайте, какие элементы не следует включать.
4. Caninclude для элементов HTML — определите, какие элементы могут включаться.
5. Nu HTML Checker — удостоверьтесь, что ваш код правильно организован.
6. HTML <p> на W3Schools — важные принципы и рекомендации.
7. Изучение HTML: Шпаргалка по элементам и структуре — краткое руководство по организации структуры документа!