前端日常一问：你对HTML语义化如何理解的？

在面试的过程中，基本上都会被面试官问到你是如何理解HTML标签语义化的？使用div不就好了，为什么还要使用语义化标签呢？有什么好处？

何为语义化标签？
语义化是根据内容的结构，选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码，并能让浏览器的爬虫和机器很好地解析。
下图展示了一个典型的页面结构

具体来说就是使用正确的标签做正确的事情。
一个语义化标签可以同时给开发者和浏览器描述其意义，清楚的说明关于其内容的信息。

使用语义化标签的好处？

• 更易于用户阅读，样式丢失的时候能让页面呈现清晰的结构。
• 有利于SEO，搜索引擎根据标签来确定上下文和各个关键字的权重。
• 方便其他设备解析，如盲人阅读器根据语义渲染网页
• 有利于开发和维护，语义化更具可读性，代码更好维护，与CSS3关系更和谐。

语义化标签有哪些？

标签	说明
<article>	页面独立的内容区域
<aside>	页面的侧边栏内容
<bdi>	用于多语言混合时指定语言或者书写方向，允许设置一段文本，使其脱离其父元素的文本方向设置
<command>	命令按钮
<details>	用于描述文档或文档某个部分的细节
<dialog>	对话框
<summary>	标签包含details元素的标题
<figure>	规定独立的流内容（图片、图表之类的）
<figcaption>	figure元素的标题
<footer>	section或者document的页脚
<header>	文档的头部区域
<mark>	带有标记的文本
<meter>	度量衡
<nav>	导航链接的部分
<progress>	任何类型的任务的进度
<ruby>	ruby注释（中文注音或字符）
<rt>	字符的解释或发音
<rp>	在 ruby 注释中使用，不支持 ruby 元素的浏览器所显示的内容。
<section>	文档的段落
<time>	日期或者时间
<wbr>	规定在文本中的何处适合添加换行符
<sub>	下标
<sup>	上标
<var>	变量
<wbr>	规定在文本中的何处适合添加换行符
<menu>	功能菜单时使用
<main>	表示页面的主要内容

如何正确的使用语义化标签？
比如我们熟悉的MDN,页面结构元素的使用如下：

语义化标签就是用更合适的标签代替<div>和<span>,如果使用不好，不如不用。
所以在日常开发中，尽可能使用自己熟悉的语义标签，并有把握的引入。