【HTML】为何用<p>包<div>会出错？

【前言】
本系列为个人前端学习之路的学习笔记，在过往的学习过程中累积了很多笔记，如今想藉着IT邦帮忙这个平台做整理+再复习。
本系列标题一律以【】标示该篇文章主要涉及的内容，例如【JavaScript】、【Vue】等等。
若内容有误，还麻烦各路大神不吝於点出问题，感激不敬。

用<p>包<div>会出错？

在HTML中，如果我们写出这样的程序码：

<p>
    <div>内容文字</div>
</p>

乍看之下会觉得没什麽问题，并没有拼错字，也没有少掉结尾标签
实际用浏览器打开之後也没有跳错，一切看起来没问题......吗？

不，其实问题默默地发生了
如果打开开发者工具，会发现HTML结构变成：

<p> </p>
<div>内容文字<div>
<p></p>

这就很玄了，浏览器自动帮我们在<div>前後各补上了</p>和<p>
彷佛像是浏览器不允许我们用<p>包<div>一样
然而，实际上还真的是这样

并不是每个HTML标签都能够任意巢状

在学习HTML的过程中，像是<ul>或是<table>等等HTML标签，它们的子层能使用的HTML标签是有限定的
不过由於多数标签，尤其像是<p>和<div>这种泛用标签，我们平常并不会去思考它的使用限制
把<p>类比成<ul>就很好理解了，我们应该要在<ul>里面放<li>
同样的，我们不应该在段落（<p>）中放置<div>，这样逻辑上说不通

因此，浏览器在读到这行逻辑不通的程序码时，会很贴心（？）的帮忙补上</p>和<p>
从原始码的结构：

<p>
    <div>内容文字</div>
</p>

变成：

<p> </p>
<div>内容文字<div>
<p></p>

而第一个<p>为何会有空白，也就很好理解了
之前的【HTML】【CSS】如何处理inline-block 元素之间的空白文章中有提到
HTML元素之间的空白、换行及 Tab 字元将占用一格空间，也就是一格空白字元
因为在一开始撰写原始码时，用巢状结构让<p>包<div>，所以会有换行
这个换行被当作一个空白字元保留了下来