article标签在百科页面中用于封装独立、可复用、有明确主题的条目正文，如“量子力学”“李白”，须单独包裹每条词条内容，内部用语义化标签（如header、section、figure、footer）组织结构，并推荐配合itemscope和itemtype提升机器可读性。
article 标签在百科类页面中，适合封装**独立、可复用、有明确主题的条目正文**，比如“量子力学”“李白”“青花瓷”这类自成一体的内容单元。它不是用来包裹整个页面或栏目导航的，而是聚焦于“一篇完整的、可单独存在”的知识性内容。
每个百科条目用一个 article 包裹
每条词条（如“光合作用”“深圳地铁1号线”）应作为独立语义单元，用 article 包裹其全部正文内容。浏览器和读屏器能据此识别这是可分发、可订阅、可单独引用的内容块。
- ✅ 正确：<article><h2>都江堰</h2><p>位于四川省……</p></article>
- ❌ 错误：把整页所有词条塞进一个 <article>，或用 <article> 包导航栏/侧边栏
内部结构保持语义清晰
article 内部应使用恰当的 HTML5 语义标签组织内容，避免仅靠 div 堆砌。标题用 h1–h6（通常 h2 或 h3，取决于页面整体大纲），关键信息可用 aside（如历史年表）、figure（配图与说明）、section（分章节，如“起源”“原理”“应用”）。
- 示例结构：
<article>
<header><h2>哈密顿量</h2><time datetime="2024-03-15">更新于2024年3月</time></header>
<section><h3>定义</h3><p>……</p></section>
<figure><img src="hamiltonian.svg" alt="哈密顿算符符号示意图"><figcaption>量子力学中的哈密顿算符</figcaption></figure>
<footer><p>参考资料：《量子力学导论》第三章</p></footer>
</article>
多个条目并列时，用 section 或 main 统筹
若一页展示多个百科条目（如“热门词条”列表、“相关条目”模块），应将这些 article 放入一个语义容器中，推荐使用 section（带标题时）或 main（页面主要内容区）。避免直接平铺 article 而无外层结构。
立即学习“前端免费学习笔记（深入）”；
- ✅ 推荐：
<main>
<h1>物理学基础概念</h1>
<article>…</article>
<article>…</article>
<article>…</article>
</main> - ⚠️ 注意：不要给每个 article 加 class="entry" 就以为解决了语义问题——语义来自标签本身，class 只是辅助样式或脚本钩子。
配合 metadata 提升机器可读性
可在 article 上添加 itemtype 和 itemscope（如 https://schema.org/Article），并在内部用 itemprop 标注标题、作者、日期、摘要等。这对搜索引擎理解条目身份、生成富摘要非常关键。
- 例如：
<article itemscope itemtype="https://schema.org/Article">
<h2 itemprop="headline">勾股定理</h2>
<time itemprop="datePublished" datetime="2023-08-20">2023年8月20日</time>
<p itemprop="description">直角三角形两直角边平方和等于斜边平方……</p>
</article>
