首先，对HTML语义化进行解释————让观看者不通过了解HTML的内容，直观的认识标签(markup)和属性(attribute)的用途和作用，让使用者根据内容的结构化，选择合适的标签。
常见的语义化标签及作用：
| 标签 | 作用 |
|---|---|
| header | 页眉通常包括网站标志、主导航、全站链接以及搜索框 |
| nav | 标记导航，仅对文档中重要的链接群使用 |
| main | 页面主要内容，一个页面只能使用一次 |
| article | 定义外部的内容，其中的内容独立于文档的其余部分 |
| section | 定义文档中的节。比如章节、页眉、页脚或文档中的其他部分 |
| aside | 定义其所处内容之外的内容。如侧栏、文章链接、广告、相关产品列表等 |
| footer | 页脚，只有当父级是body时，才是整个页面的页脚 |
| title | 页面主体内容 |
| hn | h1~h6，分级标题，h1 与 title 协调有利于搜索引擎优化 |
| ul | 无序列表 |
| li | 有序列表 |
| small | 呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权 |
| strong | 和 em 标签一样，用于强调文本，但它强调的程度更强一些 |
| em | 将其中的文本表示为强调的内容，表现为斜体 |
| mark | 使用黄色突出显示部分文本 |
| cite | 表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题 |
| q | 短的引述（跨浏览器问题，尽量避免使用） |
| address | 作者、或组织的联系信息（电子邮件地址、指向联系信息页的链接） |
| ins | 添加的内容 |
| del | 移除的内容 |
| code | 标记代码 |
| meter | 定义已知范围或分数值内的标量测量。（IE 不支持 meter 标签） |
| progress | 定义运行中的进度（进程） |
对比非语义化标签，语义化标签优点有：
(1)利于搜索引擎优化（SEO），使搜索引擎能正确索引网站的内容，提高网站在搜索引擎的访问量和搜索结果的排名，当然，网络爬虫更容易爬取信息
(2)语义类还支持读屏软件进行屏幕阅读以及支持其他辅助技术
(3)增加了代码的可读性以及结构性 ，节省深入理解代码的时间，利于维护
通过借助开发者工具进行实际分析，比如力扣官网就使用了HTML标签语义化，
其中，使用了nav设置了网站的导航页面
也使用了footer设置了网站的页脚，而中间的内容则是使用div标签自定义样式，以实现想要的效果。
再看比如MDN的官网导览，
通过开发者工具分析出大致的结构是这样的
<div id='root'>
<div id='page-wrapper'>
<div id='top-banner'>
<section/>
</div>
<div id='main-document-header-container'>
<header>
//页眉
</header>
</div>
<div id='container'>
</div>
<div id='main-wrapper'>
<div id='sidebar'>
<aside>//侧边栏
<button/>
<nav>
//导航
</nav>
</aside>
</div>
<main>
//页面主要内容
<article>
//侧边栏之外的独立部分
</article>
</main>
</div>
</div>
<footer>
//页脚
</footer>
</div>
首先，这里也有用一些<div>标签是为了实现想要的css效果，但相对于一般的使用大量<div><ul>等标签实现的网站页面，使用语义化标签会使网站更具有可读性和可维护性。
在web前端中，结构性是非常重要的，而语义化标签能恰恰实现这一要求，不仅是书写的时候，之后若是维护起来，也是相当方便的。
