前端语义化

一、什么是语义化？

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化），便于开发者阅读和写出更优雅的代码的同时，让浏览器的爬虫和机器很好的解析。

二、如何理解语义化?

语义化的意图主要在于能让人和机器快熟的理解内容或者代码的含义，用中国的一句俗语来理解就是"见人说人话，见鬼说鬼话"。 例如我们在页面寻找一个标题

// 非语义化标签查找
if（this == '这可能是一个内容是标题的标签'）{
 if(this == '这个标签里面是标题') {
  console.log('找到了')
 }
}
// 语义化
if（this == '这是一个标题标签'）{
 console.log('找到了')
}

三、有哪些语义化标签?

标签	含义
<header>	用于规定文档或节的页眉
<nav>	定义导航链接
<main>	规定文档的主内容
<footer>	定义文档或节的页脚
<section>	定义文档中的节
<article>	定义文章
<aside>	定义页面内容以外的内容
<details>	定义用户能够查看或隐藏的额外细节
<summary>	定义 <details> 元素的可见标题
<figcaption>	定义 <figure> 元素的标题
<time>	定义日期/时间
<figure>	规定自包含内容，比如图示、图表、照片、代码清单等
<mark>	定义重要的或强调的文本

四、语义化有什么优点？

优点：

1. 标签语义化有助于构架良好的HTML结构，有利于搜索引擎的建立索引、抓取。简单来说，试想在H1标签中匹配到的关键词和在div中匹配到的关键词搜索引擎会吧那个结果放在前面。
2. 有利于不同设备的解析（屏幕阅读器，盲人阅读器等）满是div的页面这些设备如何区分那些是主要内容优先阅读
3. 有利于构建清晰的结构，有利于团队的开发、维护