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

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

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

6 61
html css

6 ответов:

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

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

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

85

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

ссылка

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

23

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

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

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

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

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

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

6

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

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

1

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

0

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

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

0