H5语义化标签（SEO）

最近公司的网站强烈考虑SEO，恰当地使用html标签有利于搜索引擎的识别，特别是灵活使用语义化标签，对此做一个常用总结以及理解

1、什么是HTML语义化标签？

语义化标签，就是让标签有自己的含义，利用本身传达它所包含内容的一些信息，使浏览器和搜索引擎直观的认识标签和属性的用途和作用。

2、为什么要用H5语义化标签？

背景：

DIV标签本身就是一个容器，并没有独特的含义，当大量使用div会使文档结构不够清晰，同时影响对页面的读取
在没有CSS的时候，开发者不能够清晰地看出网页的结构，不利于于团队的开发和维护。

优点及特性

对人类友好之外，语义类标签也十分适宜机器阅读。它的文字表现力丰富，更适合搜索引擎检索(SEO)，也可以让搜索引擎爬虫更好地获取到更多有效信息，有效提升网页的搜索量。
在页面没有加载CSS的情况下，开发者也能够清晰地看出网页的结构，也更为便于团队的开发和维护。
代码结构清晰，可读性高，减少差异化，便于团队开发和维护。
网语义类可以支持读屏软件，根据文章可以自动生成目录等等。

3. 常用纯语义化标签布局

4. 常用纯语义化标签

纯语义: 指其实并没有实质性的作用，主要是纯语义化标签，用来标记当前内容块主要是写什么内容。

< header >

语法：

<header>
    <h1>这是标题1</h1>
    <p>这是标题1的相关介绍</p>
</header>

<article>
    <header>
    	   <h2>这是标题2</h2>
    	   <p>这是标题2的相关介绍</p>
    </header>
    <p>文章内容</p>
</article>

用于定义文档的页眉（介绍信息）
使用场景：
- 包裹顶部的导航栏
注意事项：
- header标签通常至少包含（但不限于）一个标题标记（< h1 >–< h6 >）一个页面只能有一个h1，
- header标签并不引入新的内容区块，而是一个区块的头部
- header标签中必须包含一个标题标签，并且子元素不唯一，否则不适用header标签。如果仅是为了样式，请使用DIV标签，避免header标签的滥用
- 一个页面内并没有限制header的出现次数，每一个不同内容区块，都可以使用一个header标签来定义它的头部

< nav >

语法：

<nav>
  <ul>
    <li>首页</li>
    <li>导航1</li>
    <li>导航2</li>
  </ul>
</nav>

表示页面中导航的链接部分
使用场景
- 网站导航条，侧边栏导航条，页内导航，前页后页翻页等
注意事项
- 一个页面最好只有一个nav标签(一般是网站导航条)
SEO：
- 让搜索引擎快速定位，避免误导

< section >

语法：

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is....</p>
</section>

表示页面中的一个独立内容区块，里面有自己的大纲结构，比如章节，页眉，页脚或页面的其他部分
一个 section 元素通常由内容以及标题组成，表示一个内容区块。
理解：
- section中可以包含h1h1、h2...h6标签，表示文档结构
- section标签用于标识页面上重要内容部分
- 该标签类似将一本书分成几个章节
注意事项：
- section 元素中，一定包含一个标题元素，而一般不用包含头部（header元素）或者底部（footer元素）。

< article >

语法：

// 官方：
<article>
  <h1>article</h1>
  <p>article在xxxx年xx月xx日xx:xx 发布。</p>
</article>

// 灵活使用：
<article>
  <header>
    <h1>主标题</h1>
  </header>
  <aside id="entry-meta">作者:xxx 时间:<time datetime="xxxx-xx-xx">xxxx-xx-xx</time></aside>
  <div id="entry-content"><p>内容描述</P></div>
</article>

表示页面中一块与上下文不相关的独立内容（主要是来自其它外部源的内容）
使用场景：
- 来自外部提供的一遍新文章，博客，论坛的文本等等
与header搭配使用
- 标记博客文章摘要列表：article包含自己的标题（通常h2,h3放在header里边）
与aside搭配使用
- 描述这篇文章摘要的相关信息(例如文章发布时间、文章作者、文章标签、分类目录等等)
与section的区别：
- aticle与section相似，只是article更强调独立性、完整性。section更强调独立性

< aside >

语法：

<p>My family and I visited The Epcot center this summer.</p>
 
<aside>
  <h4>Epcot Center</h4>
  <p>The Epcot Center is a theme park in Disney World, Florida.</p>
</aside>

表示页面主区域内容之外的内容（比如侧边栏）。
使用场景：
- 对主区域内容附加的一些广告
- 侧边栏
与article搭配使用：
- 表示article标签内容之外的，与article标签内容相关的辅助信息。
注意事项：
- aside 标签的内容应与主区域的内容相关.

< footer >

语法：

<footer>
  <p>Posted by: Hege Refsnes</p>
  <p><time pubdate datetime="2012-03-01"></time></p>
  <p>Copyright © 2015 xxx.com All Rights Reserved | 京ICP备 xxxxxxxx号-2</p>
</footer>

表示整个页面或页面中一个内容区块的脚注
一般来说，它会包含创作者的姓名、创作日期及创作者的联系信息或者公司的备注信息。
公司网站底部通常用来说明网站信息的版权，网站所有者，备案等。
在一个文档中，您可以定义多个 < footer > 元素。

< address >

语法：

<address>
    Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
    Visit us at:<br>
    Example.com<br>
    Box 564, Disneyland<br>
    USA
</address>

定义文档或者文章的作者/拥有者的联系方式
在标签里，表示不同的意义
- 如果在 < body >元素内，则它表示文档联系信息。
- 如果在 < article > 元素内，则它表示文章的联系信息。
标签特征：该标签的文本通常呈现为斜体
注意事项：
- 不应该用于描述通讯地址，除非它是联系信息的一部分
- 通常连同其他信息被包含在 < footer > 元素中。

< label >

语法：

<label for="name">姓名</label> 
<input type="text" name="name" id="name" />

标签用于为 < input > 元素做标题绑定。

< caption >

语法：

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table>

定义表格标题，会在< table >中居中显示

5. 常用语义化标签

指拥有语义化作用的同时，拥有它自己独特的作用，例如拥有独特的样式或者功能。

< figure > 和 < figcaption >

< figure > 标签表示一段独立的内容，经常与说明 < figcaption > 进行配合使用
使用场景：
- 需要有文字说明的图像，表格，代码段等
比如图片加文字：

<figure>
    <img src="/media/cc0-images/elephant-660-480.jpg" alt="Elephant at sunset">
    <figcaption>An elephant at sunset</figcaption>
</figure>

效果如下：

< summary > 和 < detail >

< detail > 标签可创建一个挂件，仅在被切换成展开状态时，它才会显示内含的信息。
< summary > 表示点击< detail >后显示的内容，一般用来表示< detail >元素的一个内容的摘要，标题或图例。
使用案例：

<details>
  <summary>猜猜我是谁</summary>
  <p>你的一生挚爱</p>
</details>

未点击< detail >效果如下：

点击< detail >，< summary >展开效果如下：

< progress >

表示进度条
有两个属性
- max：设置进度条的最大值
- value: 表示当前值，表示进度达到了多少，如何没有设置，进度条会来回循环
使用案例

<progress id="file" max="100" value="65"></progress>

效果如下：

< sub > 和 < sup >

< sub > :表示下标，< sup > :表示上标
在数学等式、科学符号和化学公式中都非常有用。
使用案例：

<p>这段文本包含 <sub>下标</sub></p>
<p>CO<sub>2</sub></b>
<p>x<sup>2</sub></p>

效果如下：

< del > 和 < ins >

< del >: 定义文档中已被删除的文本。
< ins >: 定义已经被插入文档中的文本。
- 属性cite：指向另外一个文档的 URL，此文档可解释文本被插入的原因。
- 属性datetime：定义文本被插入的日期和时间。
注意：两者一般配合使用, cite和datetime主流浏览器都不支持
使用案例

<del>
  <p>内容1：Here are some eggs</p>
</del>
<ins cite="../desc.html" datetime="2022-08">
  <p>“内容1：Here are some tomatoes</p>
</ins>

效果如下：

< base >

定义页面中所有链接的默认地址或默认目标。
注意：该标签位于< base >标签下
使用案例

<head>
    <base href="https://www.baidu.com/" />
    <base target="_blank" />
</head>

<body>
    <img src="sample.png" />
    <!--理解：
		因为head下已经定义了base的href，
		所以img中的src会从这个地址 "https://www.baidu.com/sample.png"找图片 
	-->
    <a href="https://www.baidu.com/">baidu</a>
	<!--理解：
		因为head下已经定义了base的target，
		所以点击a链接会从新窗口打开
	-->
</body>

< noscript >

表示当前浏览器或者其他环境中，如不支持Javascript的话，显示的替代内容。

<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript>