Почему автоматически добавляется закрывающий тег?

Question

[bahanov]

Если на странице такая разметка:

<p>
<form action="doit">
</p>

Если открыть исходный код страницы, то там будет тоже самое. Но если зайти в Инструменты разработчика, то там будет такая картина:

<p></p>
<form action="doit">
<p></p>

Т.е. добавляются закрывающий тег /p в начале и открывающий тег p в конце.
В MSDN написано, что закрывающий тег не обязателен, если после открывающего идет тег form. Но ничего не написано, что теги будут дополняться автоматически.
Как сделать, чтобы они не добавлялись?

Comments

[techkiller]

То, что ты наблюдаешь в Инструментах разработчика, связано с тем, как браузер обрабатывает невалидный HTML. В твоём случае, вставка тега внутрь тега нарушает правила вложенности HTML. Тег (абзац) автоматически закрывается перед началом большинства блочных элементов, включая , потому что внутрь не может быть вложен блочный элемент.

Когда браузеры сталкиваются с такой разметкой, они автоматически "исправляют" HTML, добавляя закрывающий тег перед и, если необходимо, открывающий тег после . Это делается для сохранения валидности DOM-дерева страницы.

Чтобы избежать автоматического добавления этих тегов, ты должен корректно организовать HTML-структуру документа. Убедись, что тег не располагается внутри . Вместо этого, ты можешь закрыть перед и, если нужно, начать новый после .

[Nik Faraday]

techkiller, добавьте в ответы

[Nik Faraday]

Да, как уже сказал techkiller, у вас криво стоит <form>

[bahanov]

techkiller, значит я не могу использовать тег form внутри тега (абзац)? Из-за этого разметка съезжает. Нужно либо вместо form использовать что-то другое, либо абзац не использовать?

[alexalexes]

bahanov, не оборачивание форму в абзац. Абзац для другого предназначен.

Answer 1

[Виктор Кожухарь]

Дело в том, что инструменты разработчика оперируют не разметкой, а DOM.

Как браузер отображает вам страницу?
Браузер парсит текст HTML, превращая этот текст в программные объекты, которые уже записывает в память, чтобы можно было с этими объектами быстро работать прямо в памяти.
Структура этих объектов в памяти называется DOM - Document Object Model. Т.е. это программная модель того, что вы там понаписали в HTML-тексте.
Фактически браузер уже забывает о самом тексте, и работает с этими объектами.
Так же, браузер знает, с кем он имеет дело, поэтому "старается" по максимуму "исправить" все ваши ошибки в HTML, пытается понять, что вы имели ввиду и хоть что-нибудь вывести на экран.

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

Насколько мне известно, поделать с этим ничего нельзя

Answer 2

[SelenIT3]

Закрывающий тег для <p> опционален. Алгоритм парсинга по стандарту автоматически неявно подставляет </p> перед любым элементом, который в HTML4 называли «блочным» (сейчас их называют «non-phrasing flow content»). А потом парсер видит бесхозный явный закрывающий тег и исправляет эту ошибку, добавляя перед ним открывающий.

Если нужен контейнер для формы, лучше использовать <div>. Но с большой вероятностью это не нужно, форма сама по себе контейнер, стили можно навешивать прямо на нее.