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

Question

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

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

Answer 1

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

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

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

Answer 2

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

Ссылка

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

Answer 3

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

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

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

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

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

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

Answer 4

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

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

Answer 5

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

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

Answer 6

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