如何理解HTML语义化

• 让人更容易读懂（增加代码可读性）
• 让搜索引擎更容易读懂（SEO）

注意事项：

尽可能少的使用无语义的标签 div 和 span；
在语义不明显时，既可以使用 div 或者 p 时，尽量用 p, 因为 p 在默认情况下有上下间距，对兼容
特殊终端有利；
不要使用纯样式标签，如：b、font、u 等，改用 css 设置。
需要强调的文本，可以包含在 strong 或者 em 标签中（浏览器预设样式，能用CSS 指定就不用他
们），strong 默认样式是加粗（不要用 b），em 是斜体（不用i）；
使用表格时，标题要用 caption，表头用 thead，主体部分用 tbody 包围，尾部用 tfoot 包围。表
头和一般单元格要区分开，表头用 th，单元格用 td；
表单域要用 fieldset 标签包起来，并用 legend 标签说明表单的用途；
每个 input 标签对应的说明文本都需要使用 label 标签，并且通过为 input 设置id 属性，在 lable
标签中设置 for=someld 来让说明文本和相对应的 input 关联起来。

先看下面两段代码

<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）
   搜索引擎根据第一段代码分不清重点，机器只认识标签