什么是语义化

语义化，主要指的是让代码（主要HTML标签）的含义更加具体明确，提高可读性和可维护性，一目了然看出网页的结构。比如使用<div>标签，只能告诉我们这是一个块级元素，但我们没有办法知道它是头部、文章、还是页脚。而使用语义化的HTML5标签，如<header>,<article>,<footer>等，就可以清楚的表示元素的含义。

另一个重要的部分是使得爬虫更好的识别内容，对SEO有很大的帮助。

语义化的主要优点有：

1. 易于用户阅读：代码更加清晰和简洁。
2. 有利于SEO：搜索引擎理解，并为搜索引擎优化。
3. 更好的兼容读屏软件：读屏软件（如：屏幕阅读器）用户可以更好的理解网页内容。
4. 合理使用标签，让页面拥有良好的结构，有利于代码的维护和团队的开发。

举个例子，比如以前我们编写导航栏部分可能会这样：

<div id="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</div>

然后加入语义化标签之后会变成：

<nav>
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">新闻</a></li>
        <li><a href="#">联系我们</a></li>
    </ul>
</nav>

直接用nav就能明白这是一个导航栏，比div语义更强。