HTML 语义元素

HTML 语义元素是指那些具有明确含义的元素，语义元素有助于浏览器理解我们的 HTML 文档。

非语义元素的示例： <div> 和 <span> - 不提及其内容。

语义元素示例： <form> 、 <table> 和 <article> - 明确定义其内容。

HTML 中的语义元素

许多网站都包含 HTML 代码，例如： <div id="nav"> <div class="header"> <div id="footer"> 表示导航、页眉和页脚。由于 <div> 不是语义元素，我们并不能第一眼看出他的含义，智能从 id 或者 class 属性去推测。

除了上面的方法，我们可以使用语义元素定义网页的不同部分，这些元素有：

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

下图是基于语义元素的布局

HTML `<section>` 元素

<section> 元素定义文档中的一个部分。根据 W3C 的 HTML 文档：“部分是内容的主题分组，通常带有标题。”

一个文章网页通常可以分为介绍、内容和联系信息的部分。

文档中的两个部分：

<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>

HTML `<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>

实例：使用 CSS 设置 <article> 元素的样式

<html>
  <head>
    <style>
      .all-browsers {
        margin: 0;
        padding: 5px;
        background-color: lightgray;
      }

      .all-browsers > h1,
      .browser {
        margin: 10px;
        padding: 5px;
      }

      .browser {
        background: white;
      }

      .browser > h2,
      p {
        margin: 4px;
        font-size: 90%;
      }
    </style>
  </head>
  <body>
    <article class="all-browsers">
      <h1>Most Popular Browsers</h1>
      <article class="browser">
        <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 class="browser">
        <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 class="browser">
        <h2>Microsoft Edge</h2>
        <p>Microsoft Edge is a web browser developed by Microsoft, released in 2015\. Microsoft Edge replaced Internet Explorer.</p>
      </article>
    </article>
  </body>
</html>

在 `<section>` 中嵌套 `<article>` 还是反之亦然？

<article> 元素指定独立的、自包含的内容。

<section> 元素定义文档中的部分。

根据这个定义，好像在 <section> 中嵌套 <article> 是正确的。但是这些只是死板的定义，要根据实际情况灵活运用。我们假设有如下两种案例：

一个文章列表的部分包含了多篇文章，这里要在 <section> 中嵌套 <article>
一篇文章分了很多主题，这里就要在 <article> 中嵌套 <section>

因此， <section> 元素可以包含 <article> 元素， <article> 元素也可以包含 <section> 元素。

HTML `<header>` 元素

<header> 元素表示介绍性内容或一组导航链接的容器。

一个 <header> 元素通常包含：

一个或多个标题元素 (<h1> - <h6>)
标志或图标
作者信息
一个导航列表

! **注意：**您可以在一个 HTML 文档中包含多个 <header> 元素。但是，<header> 不能放置在 <footer>、 <address> 或其他 <header> 元素中。

下面的例子使用 <header> 定义了 <article> 标题：

<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>

HTML `<footer>` 元素

<footer> 元素定义文档或部分的页脚，和 <header> 一样也是一个容器元素。

一个 <footer> 元素通常包含：

作者信息
版权信息
联系信息
站点地图
回到顶部链接
相关文件

您可以在一个文档中包含多个 <footer> 元素。

下面例子定义了一个文档的页脚：

<footer>
  <p>Author: Hege Refsnes</p>
  <p><a href="mailto:[email protected]">[email protected]</a></p>
</footer>

HTML `<nav>` 元素

<nav> 元素定义了一组导航链接。<nav> 元素仅用于导航链接。

浏览器或者残疾用户的屏幕阅读器，可以根据此元素来确定是否忽略显示此部分内容。

一组导航链接：

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

HTML `<aside>` 元素

<aside> 定义了所属主题内容的一些附属信息。

<aside> 内容与主题内容相关联，又独立于主题内容，并且可以被单独拆分出来，而不会对整体内容产生影响。

aside 通常表现为侧边栏、说明、提示、引用、附加注释、广告等。如，在经典的页面布局中，页面被分为 header、main、aside、footer 四个部分：

<body>
  <header>header</header>
  <main>main</main>
  <aside>aside</aside>
  <footer>footer</footer>
</body>

使用 CSS 设置 <aside> 元素的样式：

<html>
  <head>
    <style>
      aside {
        width: 30%;
        padding-left: 15px;
        margin-left: 15px;
        float: right;
        font-style: italic;
        background-color: lightgray;
      }
    </style>
  </head>
  <body>
    <p>今年夏天，我和我的家人参观了未来世界中心。 天气很好，未来世界中心令人赞叹！ 我和家人一起度过了一个美好的夏天！ </p>

    <aside>
      <p>未来世界中心是华特迪士尼世界度假区的主题公园，拥有令人兴奋的景点、国际馆、屡获殊荣的烟花和季节性特别活动。 </p>
    </aside>
  </body>
</html>

HTML `<figure>` 和 `<figcaption>` 元素

<figure> 元素是一个容器，代表一段独立的内容, 经常与说明 <figcaption> 配合使用, 并且作为一个独立的引用单元，这个元素经常是在主体内容中引用的图片，插图，表格，代码段等等。

<figcaption> 元素为 <figure> 定义了一个标题/说明。

<img> 元素定义了实际的图像/插图。

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" />
  <figcaption>插图 1 - 特鲁利，普利亚大区，意大利</figcaption>
</figure>

为什么要用语义元素？

The Semantic Web provides a common framework that allows data to be shared and reused across application, enterprise, and community boundaries. 语义 Web 提供了一个通用框架，允许跨应用程序、企业和社区边界共享和重用数据。

– https://www.w3.org/2001/sw/SW-FAQ

HTML 中的语义元素

下面是 HTML 中一些语义元素的列表。

标签	说明
`<article>`	定义独立的内容
`<aside>`	定义主体内容的附加信息
`<details>`	定义用户可以查看或隐藏的其他详细信息
`<figcaption>`	定义 `<figure>` 元素的标题
`<figure>`	定义主体内容中引用的图片，插图，表格，代码段等
`<footer>`	定义文档或者区域的底部
`<header>`	定义文档或者区域的头部
`<main>`	定义主体内容区域
`<mark>`	定义标记或高亮的文本
`<nav>`	定义一个导航区，一般包含多个导航链接
`<section>`	定义一个区域或者部分
`<summary>`	定义一个 `<details>` 元素的一个内容的摘要，标题或图例
`<time>`	定义日期或者时间

如需所有可用 HTML 标签的完整列表，请访问 HTML 标签参考。

HTML 语义元素

HTML 中的语义元素

HTML <section> 元素

HTML <article> 元素

在 <section> 中嵌套 <article> 还是反之亦然？

HTML <header> 元素

HTML <footer> 元素

HTML <nav> 元素

HTML <aside> 元素

HTML <figure> 和 <figcaption> 元素

为什么要用语义元素？

HTML 中的语义元素

目录

HTML `<section>` 元素

HTML `<article>` 元素

在 `<section>` 中嵌套 `<article>` 还是反之亦然？

HTML `<header>` 元素

HTML `<footer>` 元素

HTML `<nav>` 元素

HTML `<aside>` 元素

HTML `<figure>` 和 `<figcaption>` 元素