语义化标签

Mar 6, 2026

1900 字约 10 分钟

语义化标签

看完了一遍MDN的HTML教程，自己上手写了一下，发现这个语义化写得简直是一坨啊，现在来整理一下常用的语义化标签，以达到加深印象的目的。

内容主体结构语义

含义

介绍性内容或头部区域。

用法

全站头部

通常出现在 <body> 的最上面，例如：

<header>
    <div class="logo">我的博客</div>
    <h1>欢迎来到AbelTomato的博客</h1>
    <nav>
        <ul>
            <li><a href="/">首页</a></li>
            <li><a href="/">博客</a></li>
            <li><a href="/">关于我</a></li>
        </ul>
    </nav>
</header>

文章/区块的小头部

每个 <article,<section>等都可以有自己的 <header>,例如：

<article>
    <header>
        <h2>关于HTML</h2>
        <p class="meta">
            <time datetime="2026-03-06">2026年3月6日</time>
        </p>
    </header>

    <p>正文...</p>
</article>

注意

<header> 不必须有标题 <h1>~<h6> ，但建议填写以避免语义残缺。

<nav>

含义

导航链接区域

用法

常见使用场景

1.主导航（顶部菜单）

2.侧边栏导航

3.页脚导航

4.分页导航

6.目录导航

示例：

<!--主导航-->
<nav aria-label="主导航">
    <ul class="nav-list">
        <li><a href="/">首页</a></li>
        <li><a href="/course">课程</a><li>
        <li><a href="/blog">博客</a></li>
        <li><a href="/login">登录</a></li>
    </ul>
</nav>

<!--页脚次级导航-->
<footer>
    <nav aria-label="网站底部导航">
        <ul>
            <li><a href="/privacy">隐私政策</a></li>
            <li><a href="/terms">使用条款</a></li>
            <li><a href="sitemap">网站地图</a></li>
        </ul>
    </nav>
</footer>

<main>

含义

顾名思义，页面的最主体内容，这里仅应该放置当前页面的核心功能，如文章正文、表单、搜索结果。

用法

不能放导航栏 <nav>,侧边栏 <aside>,页头 <header>,页脚 <footer>，广告，全局搜索框等重复出现在每个页面的东西。

一个页面只能有一个 <main>

示例：

<body>
    <header>
        <nav>
            <!--导航栏-->
        </nav>
    </header>

    <main>
        <h1>页面标题</h1>
        <article>
            <h2>文章，核心内容</h2>
            <p>...</p>
        </article>
    </main>

    <footer>
        <!--版权之类的-->
    </footer>
</body>

<article>

含义

代表一段完整、自包含、原则上可以独立分发/复用的内容。

用法

常用场景

1.博客的一篇完整文章

2.论坛的一条帖子

3.一则新闻

4.商品详情卡片

5.用户评论（可以套在另一个 <article> 里面

示例：

<body>
    <header>网页头部</header>

    <main>
        <h1>页面标题</h1>
        <article>
            <h2>文章标题</h2>
            <p>正文...</p>

            <article>用户评论：...</article>
        </article>
    </main>

    <footer>页脚</footer>
</body>

<section>

含义

一个独立的、成主题的、通常带标题的内容区块，而且没有更好的语义标签能代表它的时候才用。

用法

几乎必须带标题 <h1>~<h6>

会被屏幕阅读器和SEO当做一个章节来理解。

如果你只是想使用一个布局用的容器 $\Rightarrow$ 用 <div>

可以在 <article> 中嵌套 <section> 以表示章节

示例：

<main>
    <section>
        <h2>产品特色</h2>
        <ul>...</ul>
    </section>

    <section>
        <h2>用户评价</h2>
        <!--当然这里也可以套article-->
    </section>

    <section>
        <h2>联系我们</h2>
        ...
    </section>
</main>

<aside>

含义

代表与主内容只有间接关系，可视为独立的部分内容。删除后主内容仍然完整。

用法

常用场景

1.博客文章右边的侧边栏（最新文章、热门标签、作者简介）

2.相关链接

3.广告

4.次要导航（如相关专题）

示例：

<article>
    <h1>文章标题</h1>
    <p>正文...</p>

    <aside>
        <h2>相关文章</h2>
        <ul>
            <li><a href='#'>文章1</a></li>
            <li><a href='#'>文章2</a></li>
        </ul>
    </aside>

    <p>继续正文...</p>

</article>

<aside class="consider">
    <h3>关于作者</h3>
    <p>AbelTomato:...</p>

    <h3>广告位招租...</h3>
</aside>

含义

用来表示页脚或底部的标签。

用法

和 <header> 性质类似。

内容辅助语义

<figure>

含义

表示一段有说明的、相对独立的内容。

用法

常见用于图片+文字，但也可以包代码片段、视频、图表等。

在中间使用 <figcaption> 来包含说明文字。

示例：

<figure>
    <img src='/tomato.png' alt='Tomato' />
    <figcaption>这是一个番茄</figcaption>
</figure>

<figure>
    <figcaption>居中写法</figcaption>

    <pre>
        <code class="language-css">
            .parent {
                display: grid;
                place-items: center;
            }
        </code>
    </pre>
</figure>

<details>

含义

一段可以展开/收起的额外细节/补充信息/可披露内容，用户可以按需查看。

自带键盘/屏幕阅读器支持，比 JS+div 写展开友好很多。

用法

配合 <summary> 使用

示例：

<details>
    <summary>点我</summary>
    这里是默认隐藏内容，点击上面的summary才会露出来。
    可以放任何东西，包括图片、代码、段落，甚至再套一层details
</details>

<mark>

含义

用于表示与当前上下文特别相关的内容，并不代表它很重要。

用法

默认为黑字+黄色背景，不可用于装饰，装饰用CSS。

示例：

<p>今天一定要记得买<mark>牛奶</mark>，不然晚上就得被赶出家门了。</p>

<blockquote>
    原作者说：“学习编程最重要的是坚持与实践...”
    但我们应当注意：<mark>方向选择</mark>比想象中更重要。
</blockquote>

<time>

含义

用于表示当前的内容属于时间，并标出标准时间。

用法

<time> 框住时间内容，并在 datetime 属性中写出标准日期。

示例：

<!--年月日-->
<p>AbelTomato的生日是<time datetime="2026-08-18">八月十八日</time></p>

<!--加上具体时间-->
<time datetime="2026-03-20T09:30+08:00">今年三月二十号早上九点半</time>

<!--带时区-->
<time datetime="2026-04-01T19:00Z">愚人节UTC19:00</time>

<!--带持续时间-->
<p>写代码<time datetime="PT2H30M">两个半小时</time></p>

属性合法格式速查

$\cdot$ 年月日：YYYY-MM-DD

$\cdot$ 年月：YYYY-MM

$\cdot$ 月日：MM-DD

$\cdot$ 时间：HH:mm / HH:mm:ss

$\cdot$ 完整：YYYY-MM-DDTHH:mm:ss

$\cdot$ 加时区：+08:00 / Z

$\cdot$ 持续时间：P2DT3H4M5S （2天3小时4分5秒）

附录

HTML大纲算法

浏览器使用 <h1>~<h6> 和sectioning tags(如 <article>,<section>)生成隐形大纲。每个sectioning tag开新纲要级别，标题定义子级。

示例：

<h1>主标题</h1>
<section>
    <h2>节1</h2>
</section>
<article>
    <h2>文章</h2>
    <section>
        <h3>子节</h3>
    </section>
</article>

$\cdot$ 可以使用开发者工具的Accessibility面板查看大纲。

ARIA landmarks和HTML语义标签

ARIA landmarks: 可以理解为为页面的关键区域打上的地标标签，让屏幕阅读器能快速跳转到对应位置。本质上是ARIA规范内的一类特殊role，专门用于标识页面结构的大区块，帮助残障用户导航。

而上文所提到的部分标签，现代浏览器会自动给它们映射对应的ARIA role，具体参见下表：

HTML标签	隐式ARIA landmark role	典型用途	注意事项
`<header>` (页面顶级)	banner	网站头部、logo、标题栏	文章里的小header不要用banner
`<nav>`	navigation	任何导航链接组	多个nav必须加aria-label区分
`<main>`	main	页面唯一核心内容区	页面只能有一个
`<aside>`	complementary	侧边栏、相关内容、广告	删除后主内容仍完整才用
`<footer>` (页面顶级)	contentinfo	页脚、版权、联系方式	同header，别滥用
`<form role="search">`	search	搜索表单	常见全局搜索框
`<section>`	region	自定义主题区块	必须有标题+aria-labelledby

什么时候该用<div>

<div> : 无语义容器，只用于布局、样式分组或JS钩子。

用 <div> 的场景：

$\cdot$ 纯布局容器：如flex/grid wrapper，没有内容含义。

$\cdot$ 组件内部分组：如按钮组、图表wrapper

$\cdot$ 无独立含义的块：如一堆 <span> 的父级。