今天来分析一下一些实际网站的HTML结构，并对比非语义化标签的差异。
什么是 HTML 语义化
HTML 语义化是指在创建 HTML 页面时，使用正确的标记来正确地描述内容的含义和结构。简单来说，它是一种用正确的标记来表示正确的内容的做法。
HTML 语义化的优点
(1). 提高可访问性。HTML 语义化可以帮助屏幕阅读器和其他辅助技术更好地理解页面内容，从而提高可访问性。
(2). 提高代码可维护性。使用正确的标记来表示正确的内容可以使代码更加清晰和易于维护。
(3). 提高代码的可读性。HTML 语义化可以使代码更加易于理解和阅读。
(4). 有助于搜索引擎优化( SEO )。HTML语义化可以帮助搜索引擎更好地理解页面内容，从而提高页面排名，增加流量。
常见的语义化标签
<header>：定义文档或节的页眉。<nav>：定义导航链接。<main>：定义文档的主体内容。<article>：定义一个可以独立展示或分发的内容块，比如新闻文章、博客文章等。<aside>：定义一个页面或文章的旁注栏，比如侧边栏、广告等。<footer>：定义文档或节的页脚。
如何实现 HTML 语义化
我们以实际网站掘金为例。
下面是部分代码的截图。
看了它的整体结构，使用了语义化标签header(nav)-main(article-section)-footer，而不是只使用div标签。
实现 HTML 语义化的方法：
- (1). 使用语义化标记。
- (2). 避免使用无语义的标记。避免使用无语义的标记，如 div 和 span 。
- (3). 使用标题标记。使用标题标记（h1-h6）来表示页面的标题结构。
- (4). 使用列表标记。使用列表标记（ul、ol）来表示列表的结构。比如掘金就使用了很多列表标记。
- (5). 使用表格标记。使用表格标记（table、th、tr、td）来表示表格的结构。
- (6). 使用段落标记。使用段落标记（p）来表示段落的结构。
总结
在我们平时的练习和实践中，要多使用语义化标签，减少一味地只使用div标签。这样结构可以更直观易懂。
参考文章：
面试官：说说什么是 HTML 语义化？
