Вложенные элементы уровня блока внутри тега <p>... правильные или неправильные?

Синтаксически и семантически корректно вставить <div> или любой другой элемент уровня блока внутри тега <p>. Я говорю о HTML4 Transitional DTD.

Если нет, то нормально ли вместо этого использовать <span style="display: block">?

Ответ 1

Синтаксически a div внутри a p является недопустимым во всех стандартах HTML. Более того, при использовании соответствующего парсера HTML невозможно разместить элемент <div> внутри <p> в DOM, потому что открывающий тег <div> автоматически закрывает элемент <p>.

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

Однако, учитывая, что как <div>, так и <span> являются семантикой свободной и что CSS никоим образом не может ее изменить, если вы уверены, что содержимое тега <p> действительно формирует абзац, и что <span style="display: block"> дает вам презентационный эффект, который вы ищете, то это действительный HTML и будет полностью подходящим решением.

Ответ 2

Нет, элемент абзаца может не содержать других элементов блока.

Ссылка

Тег абзаца предназначен для блока текста. Если ваши элементы являются частью текста (а не элементов блока), это будет семантически корректно, иначе нет. Тег span с display:block по-прежнему является блочным элементом.

Ответ 3

Это синтаксически некорректно, поскольку вы можете убедиться в этом с помощью W3C-валидатора разметки.

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

Если ваш HTML создается путем ввода пользователем (например, виджет редактора HTML, в котором посетители могут оставлять комментарии), я бы сказал, просто пусть это будет, даже если оно "неверно".

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

<div class="para">
    <div>Some content</div>
</div>

и дайте .para соответствующие поля с CSS.

Ответ 4

Без какого-либо контекста мне кажется, что это хорошо для меня, если ваш внешний тег по-прежнему остается абзацем. Если ваш div - это что-то вроде вашей верхней панели навигации, то не так много, но если это контейнер для изображения и надписи, которые вы собираетесь плавать вправо, тогда проблем нет.

Ответ 5

Этот пост показывает что-то об этом. Похоже, это стандартное поведение браузера.

http://blog.programmingsolution.net/html/html-div-tag-inside-html-p-paragraph-tag-does-not-work-correctly/

Ответ 6

FWIW: У меня был абзац, заключенный в квадратные скобки по тегам абзаца. Внутри я положил div с дисплеем: inline на div. Но он по-прежнему обрабатывал div как элемент блока и закрывал абзац, создавая новую строку с интервалом абзаца.

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