对HTML中P标签的思考

这几天在用VUE-CLI做一个demo，然后在渲染一个列表的时候遇到了一个挺不可思议的事情：

<!--这只是一小部分，v-for的内容在上方-->
<div class="detail-evaluate">
    <p>
      <h3>用户评价（{{value.evaluatenumber}}）</h3>
      <i>{{value.percent}}好评</i>
    </p>
</div>

渲染后我在浏览器里面得到的结果是

然后我把p标签换成aside之后，得到的结果是这样的：

这让我很懵逼。。。。
之后我去MDN去查P标签相关的资料（https://developer.mozilla.org...）
终于知道为什么渲染总是出问题了，官方解释是这样的

P的起始标签是必需的，结束标签在以下情形中可以省略。<p>元素后紧跟<address>, <article>, <aside>, <blockquote>, <div>, <dl>, <fieldset>, <footer>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <header>, <hr>, <menu>, <nav>, <ol>, <pre>, <section>, <table>,<ul>或另一个<p>元素；或者父元素中没有其他内容了，而且父元素不是<a>元素

我的P标签后面的元素是h3，这会被填充内容后解析为我省略了P标签的闭合标签，所以就渲染出了一个空的P标签，后面的闭合标签同理，刚开始我还考虑过是不是VUE的模板是不是有什么问题，但是我很快否定了这个想法，毕竟VUE出现了这么久，也迭代了很多个版本，这种问题不可能会出现。
总结一下就是HTML5的标准还是需要再去多了解多总结~