illegalCreed

中文

English

中文

English

Appearance

参考 ​

基于 HTML Living Standard · 核于 2026-06

速查 ​

  • 七件套骨架：<header>·<nav>·<main>·<article>·<section>·<aside>·<footer>
  • 四类分区内容：<article>·<section>·<nav>·<aside>（<header>/<footer>/<main> 不是分区内容）
  • 地标：顶层 <header>→banner、<main>→main、<nav>→navigation、顶层 <footer>→contentinfo、<aside>→complementary
  • <header>/<footer> 只有顶层才是地标；<main> 每页唯一；<section> 有名才升 region
  • article vs section：自包含可复用用 article，主题分组用 section，纯样式盒子用 div
  • 标题：用真实级别 h1–h6、别向下跳级、一页一个 <h1>；「大纲算法」从未实现，别依赖
  • <search>（2023-10 Baseline）代替 role="search"；<address> 只表联系方式；<hgroup> = 一标题 + 若干 <p>
  • 红线：能用原生语义元素就别贴 role；<div> 是最后手段，不是默认

语义化页面骨架模板 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>页面标题 · 站点名</title>
  </head>
  <body>
    <a href="#main">跳到主内容</a>

    <header>
      <a class="logo" href="/">站点名</a>
      <nav aria-label="主导航">
        <ul>
          <li><a href="/">首页</a></li>
          <li><a href="/blog">博客</a></li>
        </ul>
      </nav>
      <search>
        <form action="/search">
          <label for="q">搜索</label>
          <input type="search" id="q" name="q" />
        </form>
      </search>
    </header>

    <main id="main">
      <article>
        <header>
          <hgroup>
            <h1>文章标题</h1>
            <p>一行副标题</p>
          </hgroup>
        </header>
        <section>
          <h2>第一节</h2>
          <p>……</p>
        </section>
        <footer>
          <p>作者：<a href="/me" rel="author">作者名</a></p>
        </footer>
      </article>

      <aside aria-label="相关阅读">
        <h2>相关阅读</h2>
        <ul>
          <li><a href="#">相关链接</a></li>
        </ul>
      </aside>
    </main>

    <footer>
      <p>&copy; 2026 站点名</p>
      <address>联系：<a href="mailto:hi@example.com">hi@example.com</a></address>
    </footer>
  </body>
</html>

分区与骨架元素速查 ​

元素含义顶层隐式角色嵌套时备注
<header>页眉 / 引导内容bannergeneric内部不能再放 header/footer
<nav>主要导航块navigationnavigation别滥用；页脚杂链不必包
<main>文档主体main—（不应嵌套）每页唯一可见实例
<article>自包含可复用单元articlearticle可嵌套（评论嵌文章）
<section>主题分组有名→region，否则 generic同应带标题
<aside>间接相关旁支complementarycomplementary别包正文括号补充
<footer>页脚contentinfogeneric可放 <address>

分组与内容元素速查 ​

元素含义易错点
<h1>–<h6>六级标题别跳级、别当字号用、一页一个 <h1>
<hgroup>一个标题 + 若干 <p> 副标题别再用旧法包多个标题
<p>段落别用空 <p> 撑间距
<blockquote>块级长引用（cite 属性）署名放外面；缩进是 CSS
<q> / <cite>行内引用 / 作品标题<cite> 标作品名，不标人名
<figure>/<figcaption>自包含图表 + 说明caption 必须首/末子元素；可挪动
<hr>主题转换（语义分隔）不是「画横线」工具
<pre>预格式化文本保留空白；配 <code>
<address>最近 article/body 的联系方式不是「地址标签」；别塞日期
<div> / <span>无语义容器（块 / 行内）最后手段，只为样式

地标导航速查 ​

读屏用户靠这些地标快速跳转，一页里同类地标出现多个时务必用 aria-label / aria-labelledby 起名区分：

地标角色由谁产生一页可有几个
banner顶层 <header>通常 1
navigation每个 <nav>多个（需命名区分）
main<main>1
complementary每个 <aside>多个（需命名区分）
contentinfo顶层 <footer>通常 1
region有无障碍名的 <section>多个（需命名区分）
search<search>多个（需命名区分）

标题与文档大纲规则 ​

  • 用真实级别：<h1> 最高逐级向下，表达结构层级而非字号（字号用 CSS）。
  • 别向下跳级：<h1>→<h3> 缺 <h2>，不符合规范；但收束子区段时可向上回跳（<h4>→<h3>/<h2> 合法）。
  • 一页一个 <h1>：描述整页主题；多 <h1> 标准允许但非最佳实践。
  • 大纲算法从未实现：⚠️ 别写「每个 section 里放 <h1>、靠嵌套自动降级」——浏览器不会降级，结果是一串平级标题。分区元素不改变标题级别，想要几级就显式写几级。
  • 规范现状：有标题则大纲应至少含一个 <h1>；相邻标题级别向下最多差 1 级。

现代特性 Baseline 状态（2026-06 核） ​

特性状态用法建议
<article>/<section>/<nav>/<aside>/<header>/<footer>/<main>✅ Baseline 广泛可用（2015-07 起）放心用
<figure>/<figcaption>✅ 广泛可用放心用
<hgroup>（新语义：标题 + <p>）✅ 广泛可用放心用；注意旧语义已废
<search> 元素✅ Baseline 广泛可用（2023-10 起）现代项目可用；极老浏览器降级为 <div role="search">

红线清单 ​

  • ❌ 能用原生语义元素却用 <div role="…"> 模拟（如 <p role="button">）——丢失原生功能；
  • ❌ 给本就有该角色的元素重复贴 role（如给 <button> 加 role="button"）；
  • ❌ 用标题级别当字号 / 加粗的样式开关；
  • ❌ 向下跳级（<h1>→<h3>）；
  • ❌ 依赖「文档大纲算法」自动降级标题（从未实现）；
  • ❌ 把 <search> 当结果容器、把 <address> 当任意地址标签、用旧法让 <hgroup> 包多个标题；
  • ❌ 把 <section> 当通用容器、或用 <div> 顶替本该有语义的内容。

权威链接 ​

标准 / 规范

课程 / 指南

兼容性 / 调试

相关页 ​