电子书章节不必强制用，但不用就丧失结构语义；应以包裹逻辑章节并配～标题，确保屏幕阅读器可跳转、epub工具可提取目录，避免全用导致索引失效。
电子书网页不是普通页面，它需要被屏幕阅读器准确跳转、被搜索引擎识别章节结构、被阅读器提取纯内容——<article></article>、<section></section>、<header></header> 这些标签不是“锦上添花”，而是让 HTML 电子书真正可读、可索引、可复用的基础设施。
电子书章节必须用 <section></section> 吗？
不是“必须”，但不用就等于放弃结构语义。浏览器和 EPUB 转换工具（比如 Calibre）会依赖 <section></section> 的嵌套层级生成目录树；<section></section> 内部的 <h2></h2>～<h6></h6> 会被自动提取为 TOC 条目。而如果全用 <div class="chapter">，目录生成会失效或退化为线性编号。
<p>常见错误现象：</p>
<ul>
<li>EPUB 阅读器里点击目录无响应，或只显示“第1页”“第2页”这类无意义条目</li>
<li>屏幕阅读器无法通过“跳到下一节”快捷键导航，只能逐段朗读</li>
</ul>
<p>实操建议：</p>
<ul>
<li>每个逻辑章节（如“第三章：认知偏差”）用一个 <code><section></section> 包裹
<section></section> 必须包含且仅包含一个标题级元素（<h2></h2> 或更高），不能空着或塞多个 <h2></h2>
<section></section> 嵌套会让目录层级混乱，多数阅读器只支持两级折叠
<article></article> 和 <section></section> 在电子书里怎么分？
关键看内容是否“可独立分发”。电子书里的单篇附录、作者访谈、参考文献列表，即使出现在正文章节之间，也应使用 <article></article>；而正文各章、每章下的小节（如“3.1 定义”“3.2 案例”）属于同一上下文，用 <section></section> 更准确。
容易踩的坑：
- 把整本电子书包在一个
<article></article>里——这违反了“独立可分发”原则，搜索引擎可能将其识别为一篇长博文而非书籍 - 在
<article></article>内部又套<article></article>（如把每节都当 article）——HTML5 规范明确禁止嵌套<article></article>，会导致校验失败
性能影响很小，但兼容性上：Safari 对 <article></article> 的 outline 算法有 Bug，建议配合 role="article" 双保险。
页眉页脚用 <header></header>/<footer></footer> 还是 <div>？
<p>电子书页面通常没有传统网页的全局 header/footer，但每章开头的副标题、作者署名、出版信息，以及章节末尾的注释、延伸阅读链接，恰恰是 <code><header></header> 和 <footer></footer> 的典型场景。
示例结构：
<section><header><h2>第四章：记忆模型</h2>
<p><strong>作者：李明</strong>｜修订于 <time datetime="2026-07-12">2026年7月</time></p><div class="aritcle_card flexRow artxards">
<div class="artcardd flexRow">
<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill7761" title="Article To Html"><img
src="https://img.php.cn/upload/skill/000/000/081/179168408018805.jpg" alt="Article To Html" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
<div class="aritcle_card_info flexColumn">
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="overflowclass">Article To Html</a>
<p class="overflowclass">文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。</p>
</div>
<a rel="nofollow" href="/xiazai/skill7761" title="Article To Html" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
</a>
</div>
</div>
</header><p>人类短期记忆容量约为...</p>
<footer><p>注：本节内容参考 Baddeley 工作记忆模型（1986）</p>
</footer></section>
为什么这样做：
-
<header></header>和<footer></footer>是<section></section>的合法子元素，语义清晰，CSS 选择器可精准定位（如section > header） - 辅助技术能将
<header></header>中的<time></time>自动识别为时间元数据，提升可访问性 - 用
<div class="chapter-header"> 也能实现样式，但无法被 EPUB 工具提取为结构化元数据 <h3>哪些语义标签在电子书里容易被忽略但很关键？</h3> <p>三个常被跳过的标签： <code><figure></figure>、<figcaption></figcaption>、<aside></aside>。它们不是装饰，而是内容意图的声明。<figure></figure>必须包裹所有独立图表、代码块、公式——不只是图片。EPUB 阅读器会据此生成图注目录，并支持单独缩放/导出。<aside></aside>适合放旁注、术语解释、历史背景等“相关但非主线”的内容。它和<section></section>并列，而不是嵌套在段落里；否则屏幕阅读器会误判为干扰信息。最容易被忽略的细节：
- 所有
<figure></figure>必须配<figcaption></figcaption>，哪怕只是“图4-2：工作记忆模型示意图”，空<figcaption></figcaption>比不写更糟 -
<aside></aside>不该用于广告或无关推荐——电子书语境下，它的语义是“作者主动提供的补充说明”，不是容器 - 旧版 Safari 不渲染
<aside></aside>的默认样式，需加display: block兜底
电子书的语义化不是为了满足 W3C 校验器，而是为了让内容在不同设备、不同解析器、不同用户能力下，依然保持结构完整——漏掉一个
<section></section>可能导致整章无法被语音朗读器定位，少一个<figcaption></figcaption>就会让图表失去上下文。 - 所有
