bahanov

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

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

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

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

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

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