寻北

Appearance

HTML 语义化标签 (Semantic HTML) ​

HTML5 引入了一整套语义化标签，旨在让机器（搜索引擎爬虫、屏幕阅读器）和开发者都能更清晰地理解网页的结构和内容含义，而不仅仅是视觉样式。

1. 核心布局标签 (Structure) ​

这些标签用于构建页面的宏观骨架，替代了以前满屏的 <div id="header">。

标签含义典型应用场景
<header>头部1. 全站头部：Logo、主导航、搜索框、登录按钮。
2. 文章头部：文章标题、作者头像、发布时间。
<nav>导航主要导航链接组。
如：顶部菜单、侧边栏目录、面包屑导航。
注：页脚的一堆友情链接通常不用 nav。
<main>主体页面唯一的核心内容区。不可包含全站重复内容（如 header/footer/sidebar）。
它是页面的“干货”所在。
<article>独立内容独立、完整、可分发的内容块。
如：一篇博客文章、一条新闻、一个论坛帖子、一条评论、一个商品卡片。
<section>区块/章节文档中的一个独立部分，通常包含一个标题 (h2-h6)。
如：首页的“产品介绍区”、“联系我们区”；文章的“第一章”。
<aside>侧边/附属与周围内容关系不紧密，删除后不影响阅读的内容。
如：侧边栏广告、推荐文章、标签云、文章中的引用框。
<footer>尾部版权声明、备案号、联系方式、相关链接。
同样适用于 <article> 的底部（如作者简介、点赞区）。

2. 文本内容标签 (Text Content) ​

标签含义视觉默认区别与应用
<h1>主标题最大加粗一个页面建议只用一个，概括全页主题（Logo 或文章名）。
<h2>~<h6>副标题依次减小构建文档目录树（Outline）。
<strong>重要加粗表示内容的重要性（SEO 权重高）。
对比 <b> 只是视觉加粗。
<em>强调斜体表示语气的重读。
对比 <i> 只是视觉斜体。
<time>时间无datetime="2023-11-11"。让机器能读懂具体的日期/时间。
<mark>高亮黄背景表示搜索匹配或需注意的文本。
<figure>独立流缩进包裹图片、图表、代码块等独立内容。
<figcaption>图注无配合 <figure> 使用，描述图片内容。

3. 语义化布局实战案例 ​

假设我们要写一个标准的博客详情页：

html
<body>
  <!-- 1. 网站头部 -->
  <header>
    <h1>我的技术博客</h1>
    <nav>
      <ul>
        <li><a href="/">首页</a></li>
        <li><a href="/about">关于</a></li>
      </ul>
    </nav>
  </header>

  <div class="container">
    <!-- 2. 页面主体 (左侧) -->
    <main>
      <!-- 一篇完整的文章 -->
      <article>
        <header>
          <h2>HTML5 语义化详解</h2>
          <p>作者: 张三 | <time datetime="2023-10-24">2023年10月24日</time></p>
        </header>
        
        <section>
          <h3>第一章: 为什么需要语义化?</h3>
          <p>...</p>
        </section>

        <section>
          <h3>第二章: 常用标签</h3>
          <p>...</p>
        </section>

        <footer>
          <p>版权所有，转载请注明出处。</p>
        </footer>
      </article>
      
      <!-- 评论区 (也是独立内容，可用 article 或 section) -->
      <section class="comments">
        <h3>评论</h3>
        <article class="comment">...</article>
        <article class="comment">...</article>
      </section>
    </main>

    <!-- 3. 侧边栏 (右侧) -->
    <aside>
      <h3>热门文章</h3>
      <ul>...</ul>
      <h3>广告位</h3>
      <div>...</div>
    </aside>
  </div>

  <!-- 4. 网站底部 -->
  <footer>
    <p>&copy; 2023 My Blog. All rights reserved.</p>
  </footer>
</body>

4. 常见问题 (FAQ) 与 避坑指南 ​

4.1 <div> 还能用吗？ ​

能，而且用得最多。 不要为了语义化而语义化。如果一个容器仅仅是为了：

  1. CSS 布局（如 Flex 容器、Grid 网格）。
  2. 样式修饰（如背景色、圆角框）。
  3. 脚本操作（如 Vue/React 的挂载点）。 那么请放心使用 <div>。语义化标签是用来描述内容结构的，<div> 是用来做容器的。

4.2 <section> 和 <article> 到底怎么分？(高频痛点) ​

判断标准：把这块内容单独拿出来（发到 RSS 或另一个网站），它是否依然完整、有独立意义？

  • 是 -> 用 <article> (如：新闻、帖子、商品)。
  • 否 -> 用 <section> (如：文章的一段章节、网站的一个板块)。
  • 嵌套：<article> 里可以包含多个 <section>（章节）；<section> 里也可以包含多个 <article>（列表页的卡片）。

4.3 按钮用 <a> 还是 <button>？ ​

  • 跳转页面 (URL 变化) -> 用 <a>。
  • 页内交互 (提交表单、弹窗、开关) -> 用 <button>。
  • 忌讳：千万别用 <div onclick="..."> 做按钮。这会让盲人读屏器无法识别，且不支持键盘 Tab 键聚焦。

4.4 为什么不用 <b> 和 <i> 了？ ​

  • <b> (Bold) 和 <i> (Italic) 是样式标签，只管长得粗/斜，不管含义。
  • HTML5 提倡结构与样式分离。样式的活儿应该交给 CSS (font-weight, font-style)。
  • 在需要表示“重要”或“语气”时，应使用语义更强的 <strong> 和 <em>。
  • 例外：现在的图标库（如 FontAwesome）习惯用 <i> 标签做图标容器，这属于约定俗成的特例。

4.5 语义化对 SEO 真的有帮助吗？ ​

极大帮助。 搜索引擎爬虫是“盲人”，它看不见你的页面设计多精美。它只能读 HTML 代码。

  • 看到 <nav>，它知道这里全是重要链接，要爬取。
  • 看到 <main>，它知道正文在这里，权重最高。
  • 看到 <footer>，它知道这里通常是版权信息，权重较低。
  • 看到 <strong>，它知道这个词是关键词。

4.6 一个页面可以有多个 <h1> 吗？ ​

  • HTML5 标准：允许。每个 <section> 都可以有自己的 <h1>。
  • SEO 建议：不推荐。搜索引擎依然倾向于“一个页面只有一个核心 <h1>”，用于概括全页内容。建议层级向下顺延使用 h2, h3。