如何理解html语义化

先看下面两段代码

<div>标题</div>
<div>
    <div>一段文字</div>
    <div>
        <div>列表1</div>
        <div>列表2</div>
    </div>
</div>

html语义化代码

<h1>标题</h1>
<div>
    <p>一段文字</p>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
    </ul>
</div>

HTML语义化的好处？

1. 让人更容易读懂（增加代码可读性）
2. 让搜索引擎更容易读懂（SEO）
   搜索引擎根据第一段代码分不清重点，机器只认识标签