HTML 语义元素

语义元素 = 具有含义的元素。

什么是语义元素？

语义元素能够清晰地描述其含义给浏览器和开发者。

非语义元素的例子：<div> 和 <span> - 没有提供任何关于其内容的信息。

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

HTML 中的语义元素

许多网站包含如下的 HTML 代码：<div id="nav">、<div class="header">、<div id="footer"> 来表示导航、页眉和页脚。

在 HTML 中，有多个语义元素可用于定义网页的不同部分：

HTML 语义元素

HTML <section> 元素

<section> 元素定义文档中的一个节。

根据 W3C 的 HTML 文档：“节是对内容进行主题分组，通常带有标题。”

<section> 元素可以使用的示例：

  • 章节
  • 简介
  • 新闻项目
  • 联系信息

一个网页通常可以分为简介、内容和联系信息等部分。

实例

文档中的两个节：

<section>
<h1>WWF</h1>
<p>世界自然基金会（WWF）是一个致力于环境保护、研究和恢复的国际组织，前身为世界野生动物基金会。WWF 成立于 1961 年。</p>
</section>

<section>
<h1>WWF 的熊猫标志</h1>
<p>熊猫已成为 WWF 的象征。WWF 著名的熊猫标志源于一只名叫 Chi Chi 的熊猫，它在北京动物园被转移到伦敦动物园的那一年，正是 WWF 成立的同一年。</p>
</section>

亲自试一试

HTML <article> 元素

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

一篇文章应具有独立的意义，并且应该可以独立于网站的其他部分进行分发。

<article> 元素可以使用的示例：

  • 论坛帖子
  • 博客文章
  • 用户评论
  • 产品卡片
  • 报纸文章

实例

三篇具有独立、自包含内容的文章：

<article>
<h2>Google Chrome</h2>
<p>Google Chrome 是由 Google 开发的网页浏览器，于 2008 年发布。Chrome 是当今世界上最流行的网页浏览器！</p>
</article>

<article>
<h2>Mozilla Firefox</h2>
<p>Mozilla Firefox 是由 Mozilla 开发的开源网页浏览器。自 2018 年 1 月以来，Firefox 一直是第二受欢迎的网页浏览器。</p>
</article>

<article>
<h2>Microsoft Edge</h2>
<p>Microsoft Edge 是由 Microsoft 开发的网页浏览器，于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p>
</article>

亲自试一试

实例 2

使用 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 是由 Google 开发的网页浏览器，于 2008 年发布。Chrome 是当今世界上最流行的网页浏览器！</p>
  </article>
  <article class="browser">
    <h2>Mozilla Firefox</h2>
    <p>Mozilla Firefox 是由 Mozilla 开发的开源网页浏览器。自 2018 年 1 月以来，Firefox 一直是第二受欢迎的网页浏览器。</p>
  </article>
  <article class="browser">
    <h2>Microsoft Edge</h2>
    <p>Microsoft Edge 是由 Microsoft 开发的网页浏览器，于 2015 年发布。Microsoft Edge 取代了 Internet Explorer。</p>
  </article>
</article>

</body>
</html>

亲自试一试

将 <article> 嵌套在 <section> 中还是相反？

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

<section> 元素定义文档中的一个节。

我们可以使用这些定义来决定如何嵌套这些元素吗？不，我们不能！

因此，您会发现 HTML 页面中有 <section> 元素包含 <article> 元素的情况，以及 <article> 元素包含 <section> 元素的情况。

HTML <header> 元素

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

<header> 元素通常包含：

  • 一个或多个标题元素（<h1> - <h6>）
  • 徽标或图标
  • 作者信息

注意：您可以在一个 HTML 文档中拥有多个 <header> 元素。但是，<header> 不能放在 <footer>、<address> 或另一个 <header> 元素内。

实例

<article> 的页眉：

<article>
  <header>
    <h1>WWF 做什么？</h1>
    <p>WWF 的使命：</p>
  </header>
  <p>WWF 的使命是阻止我们星球自然环境的退化， 并构建一个人类与自然和谐共处的未来。</p>
</article>

亲自试一试

HTML <footer> 元素

<footer> 元素定义文档或节的页脚。

<footer> 元素通常包含：

  • 作者信息
  • 版权信息
  • 联系信息
  • 网站地图
  • 返回顶部链接
  • 相关文档

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

实例

文档中的一个页脚节：

<footer>
  <p>作者：Bill Gates</p>
  <p><a href="mailto:bill@example.com">bill@example.com</a></p>
</footer>

亲自试一试

HTML <nav> 元素

<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> 内容应与周围内容间接相关。

实例

显示与放置位置内容相关的旁注内容：

<p>今年夏天，我和家人参观了艾波卡特中心。天气很好，艾波卡特很棒！我和家人度过了一个美好的夏天！</p>

<aside>
<h4>艾波卡特中心</h4>
<p>艾波卡特是华特迪士尼世界度假区的一个主题公园，设有令人兴奋的景点、国际展馆、获奖的烟火和季节性特别活动。</p>
</aside>

亲自试一试

实例 2

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

<p>今年夏天，我和家人参观了艾波卡特中心。天气很好，艾波卡特很棒！我和家人度过了一个美好的夏天！</p>
<p>今年夏天，我和家人参观了艾波卡特中心。天气很好，艾波卡特很棒！我和家人度过了一个美好的夏天！</p>

</body>
</html>

亲自试一试

HTML <figure> 和 <figcaption> 元素

<figure> 标签指定自包含的内容，如插图、图表、照片、代码清单等。

<figcaption> 标签定义 <figure> 元素的标题。<figcaption> 元素可以作为 <figure> 元素的第一个或最后一个子元素放置。

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

实例

<figure>
  <img src="trulli.jpg" alt="特鲁利建筑">
  <figcaption>图 1 - 意大利普利亚的特鲁利建筑。</figcaption>
</figure>

亲自试一试

为什么使用语义元素？

根据 W3C：“语义 Web 允许数据在应用程序、企业和社区之间共享和重用。”

HTML 中的语义元素

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

标签 描述
<article> 定义独立、自包含的内容。
<aside> 定义与页面内容相关的旁注内容。
<details> 定义用户能够查看或隐藏的额外细节。
<figcaption> 定义 <figure> 元素的标题。
<figure> 规定自包含的内容，如插图、图表、照片、代码清单等。
<footer> 定义文档或节的页脚。
<header> 规定文档或节的页眉。
<main> 规定文档的主内容。
<mark> 定义标记/高亮文本。
<nav> 定义导航链接。
<section> 定义文档中的节。
<summary> 定义 <details> 元素的可见标题。
<time> 定义日期/时间。

如需查看所有可用 HTML 标签的完整列表，请访问我们的 HTML 标签参考手册。