HTML语义化：使得HTML元素可以表明其内部内容的意义。在HTML5中新增了语义化的标签，其中有header、footer、nav、menu、section、article等等。以前的网页都是一堆div标签，不管是对搜索引擎还是我们阅读都很不友好，加入语义化信息后，可以直接从代码上就能看出来那一块到底是要表达什么内容。

1.常用的HTML语义化标签

< header >:定义文档或节的页眉 < nav >:定义导航链接 < main >:定义文档的主体内容 < article >:定义一个可独立展示的内容块 < aside >:定义一个页面或文章的旁注栏 < footer >:定义文档或节的页脚

2.实际网站HTML语义化结构

某新闻网站文章下面的评论案例

<header>
    <h1>一篇文章</h1>
    <p><time pubdate datetime="2024-10-03">2012/10/03</time></p>
</header>

<p>文章内容..</p>

<article>
    <h2>评论</h2>

    <article>
        <header>
            <h3>评论者: XXX</h3>
            <p><time pubdate datetime="2024-10-03T19:10-08:00">~1 hour ago</time></p>
        </header>
        <p>哈哈哈</p>
    </article>

    <article>
        <header>
            <h3>评论者: XXX</h3>
            <p><time pubdate datetime="2024-10-03T19:10-08:00">~1 hour ago</time></p>
        </header>
        <p>哈哈哈哈</p>
    </article>

</article>

3.语义化的优点

（1）有利于SEO，帮助搜索引擎更好地理解页面内容，有利于被搜索引擎收录，增加流量 （2）在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构 （3）提高可访问性，帮助屏幕阅读器和其他辅助技术更好地理解网页内容 （4）便于项目开发维护，使代码更加清晰和易于维护 （5）提高代码可读性，使得代码更加易于理解和阅读

4.无语义的标签

div和span是没有语义的标签，一般来说没有语义的标签用在页面布局，在实际项目开发中，经常用到这个两个标签，其中div标签一行显示一个，而span标签一行显示多个。

5.总结

因此我们在写代码时，尽可能少的使用无语义的标签p、span，最后看我们写的代码语义化是否良好，可以去掉样式，看网页结构是否组织良好有序，是否仍然有好的可读性。语义化良好的网页去掉样式后结构仍然是比较清晰的。