HTML 语义化标签

语义是指对一个词或者句子含义的正确解释。很多 HTML 标签也具有语义的意义，也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如，当浏览器解析到

标签时，它将该标签解释为包含这一块内容的最重要的标题。h1 标签的语义就是用它来标识特定网页或部分最重要的标题。

许多网站包含了指示导航、页眉以及页脚的 HTML 代码，例如这些： <div id="nav"> <div class="header"> <div id="footer">，但其实 HTML 提供了有含义的标签

<article>
<aside>
<details>
<figcaption>
<figure>
<footer>
<header>
<main>
<mark>
<nav>
<section>
<summary>
<time>

为什么要语义化？

• 代码结构清晰：使页面没有css的情况下，也能够呈现出很好的内容结构
• 利于SEO： 爬虫依赖标签来确定关键字的权重，因此可以和搜索引擎建立良好的沟通，帮助爬虫抓取更多的有效信息
• 便于团队开发和维护：语义化使得代码更具有可读性，让其他开发人员更加理解你的 html 结构，减少差异化。
• 方便其他设备解析：如屏幕阅读器、盲人阅读器、移动设备等，以有意义的方式来渲染网页。

HTML 语义元素

section 元素

<section> 元素定义文档中的节。是有主题的内容组

实例：

<section>
<h1>WWF</h1>
<p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
<h1>WWF's Panda symbol</h1>
<p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>

article 元素

<article> 元素规定独立的自包含内容。文档有其自身的意义，并且可以独立于网站其他内容进行阅读。

主要应用场景：论坛、博客、新闻

<article>
<h2>Google Chrome</h2>
<p>Google Chrome is a web browser developed by Google, released in 2008. Chrome is the world's most popular web browser today!</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox is an open-source web browser developed by Mozilla. Firefox has been the second most popular web browser since January, 2018.</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge is a web browser developed by Microsoft, released in 2015. Microsoft Edge replaced Internet Explorer.</p>
</article>

header 元素

<header> 元素为文档或节规定页眉。元素应该被用作介绍性内容的容器。

<article>
  <header>
    <h1>What Does WWF Do?</h1>
    <p>WWF's mission:</p>
  </header>
  <p>WWF's mission is to stop the degradation of our planet's natural environment,
  and build a future in which humans live in harmony with nature.</p>
</article>

footer 元素

<footer> 元素为文档或节规定页脚,元素应该提供有关其包含元素的信息。

主要包含：作者信息、版权信息、联系方式、网站地图

实例：

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:hege@example.com">hege@example.com</a></p>
</footer>

nav 元素

<nav> 元素定义导航链接集合，元素旨在定义大型的导航链接块。

一组导航链接：

<nav>
  <a href="/html/">HTML</a> |
  <a href="/css/">CSS</a> |
  <a href="/js/">JavaScript</a> |
  <a href="/jquery/">jQuery</a>
</nav>