HTML5 语义化

HTML5 语义元素

HTML 中的语义（Semantics）是指使用能够准确描述内容含义和结构的标签，而不是仅仅关注其外观。

语义元素（Semantic elements）为浏览器和开发者都提供了上下文信息。

什么是语义元素？

语义元素清晰地描述了其用途以及它包含的内容类型。

示例：

• 非语义元素 (Non-semantic elements)：<div> 和 <span>。它们是通用容器，没有说明其内容的具体含义。
• 语义元素 (Semantic elements)：<form>、<table>、<article>、<header>、<footer>、<nav>。它们清晰地定义了自己所包含内容的类型。

为什么要使用语义元素？

使用语义化 HTML（semantic HTML）有几个关键优势：

• 可访问性 (Accessibility)：屏幕阅读器和其他辅助技术使用语义元素（如 <nav>、<main>、<article>）来帮助用户导航和理解页面结构。
• 搜索引擎优化 (SEO)：使用语义标签构建的内容更容易被搜索引擎理解其上下文和重要性，可能有助于提升排名。
• 可维护性 (Maintainability)：代码更容易阅读、理解和维护（包括未来的你！）。
• 清晰性 (Clarity)：为你的网页提供更清晰、更有意义的结构。

在 HTML5 之前，开发者经常使用带有 ID 或 class 的通用 <div> 元素，例如 <div id="header"> 或 <div class="nav">。HTML5 引入了针对这些常见结构的特定标签。

HTML5 中的关键语义元素

以下是 HTML5 中引入或强调的一些最重要的语义元素：

<header>

表示介绍性内容，通常是一组介绍性内容或导航辅助工具。可用于整个页面或特定的章节/文章。

通常包含标题（<h1>-<h6>）、标志、搜索表单、作者姓名等。

<header>
  <h1>My Website</h1>
  <nav>...</nav>
</header>

<nav>

定义包含导航链接的区域，通常是主站点的导航。

<nav>
  <ul>
    <li><a href="/">Home</a></li>
    <li><a href="/about">About</a></li>
    <li><a href="/contact">Contact</a></li>
  </ul>
</nav>

<main>

表示文档 <body> 的主要内容。<main> 中的内容应该是文档独有的，不包括在页面之间重复的内容（如侧边栏、导航链接、页眉、页脚）。每个页面只应有一个 <main> 元素。

<main>
  <h1>Main Article Title</h1>
  <p>This is the primary content of the page...</p>
</main>

<article>

表示文档、页面、应用程序或站点中一个独立自包含的组成部分， intended to be independently distributable or reusable（例如，论坛帖子、博客文章、新闻报道、用户评论）。

<article> 通常包含自己的页眉（通常带有标题）。

<article>
  <h2>Blog Post Title</h2>
  <p>Published on <time datetime="2023-10-27">October 27, 2023</time></p>
  <p>Content of the blog post...</p>
</article>

<section>

表示文档中一个通用的独立部分，没有更具体的语义元素来表示它。section 应该总是有一个标题。

用于按主题对相关内容进行分组。可以把它想象成书中的章节。

<section>
  <h2>Chapter 1: Introduction</h2>
  <p>Details about the introduction...</p>
</section>
<section>
  <h2>Chapter 2: Advanced Topics</h2>
  <p>Details about advanced topics...</p>
</section>

<article> vs. <section>

当内容是独立自包含且自身有意义时（例如博客文章），使用 <article>。使用 <section> 来分组较大整体中相关的部分（例如章节或文章中按主题划分的部分）。你可以根据内容结构在 <article> 中嵌套 <section>，反之亦然。

<aside>

表示与周围内容有间接关系的内容，通常以侧边栏（sidebar）形式呈现。

<article>
  <h1>Main Content</h1>
  <p>...</p>
</article>
<aside>
  <h2>Related Info</h2>
  <ul>...</ul>
</aside>

<footer>

表示其最近的区段内容或区段根元素（如 <body>、<article>、<section>）的页脚。通常包含作者信息、版权数据、相关文档链接等。

<footer>
  <p>&copy; 2023 My Website. All rights reserved.</p>
  <p><a href="/privacy">Privacy Policy</a></p>
</footer>

<figure> 和 <figcaption>

<figure> 表示自包含内容，通常是图片、插图、图表、代码片段等，在主体内容中被引用。

<figcaption> 为 <figure> 元素提供标题或说明。

<figure>
  <img src="diagram.png" alt="Workflow diagram">
  <figcaption>Fig. 1: Project Workflow Diagram</figcaption>
</figure>

其他语义元素

• <time>：表示特定的时间段或日期。
• <mark>：表示被标记或高亮以供参考的文本。
• <details> 和 <summary>：创建可隐藏/显示内容的交互式组件。

语义化页面结构

使用语义元素构建的典型页面布局可能如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Semantic Page Structure</title>
</head>
<body>

  <header> <!-- 页面头部 -->
    <h1>Site Name</h1>
    <nav> <!-- 主导航 -->
      <ul>...</ul>
    </nav>
  </header>

  <main> <!-- 主要内容区域 -->
    <article>
      <header> <!-- 文章头部 -->
        <h2>Article Title</h2>
      </header>
      <section>
        <h3>Subsection 1</h3>
        <p>...</p>
      </section>
      <section>
        <h3>Subsection 2</h3>
        <figure>
          <img src="..." alt="...">
          <figcaption>...</figcaption>
        </figure>
        <p>...</p>
      </section>
      <footer> <!-- 文章底部 -->
        <p>Author: ...</p>
      </footer>
    </article>

    <aside> <!-- 侧边栏 -->
      <h2>Related Info</h2>
      <p>...</p>
    </aside>
  </main>

  <footer> <!-- 页面底部 -->
    <p>Copyright info...</p>
  </footer>

</body>
</html>

现代浏览器普遍支持这些元素。对于非常老的浏览器（如 IE8 及以下），可能需要一个 JavaScript shim (html5shiv)，但现在这已很少成为问题。

语义元素参考摘要

标签	描述
	定义独立、自包含的内容。
	定义与主要内容相切的内容（如侧边栏）。
	定义用户可以查看或隐藏的额外细节。
	定义 元素的标题/说明。
	指定自包含内容，如图、图表、代码等。
	定义文档或部分的底部。
	指定文档或部分的头部。
	指定文档的主要内容。
	定义标记/高亮的文本。
	定义导航链接。
	定义文档中按主题分组的内容。
	定义 元素的可见标题。
	定义特定的时间或日期。