main必须包裹编辑器渲染的正文内容，否则影响屏幕阅读器定位和SEO；article是独立内容最小语义单元，须含header（含h1及元信息）、主体段落和可选footer；图片必须用figure包裹，配alt和figcaption。
main 必须包裹编辑器最终渲染的正文内容，否则屏幕阅读器无法定位核心信息，搜索引擎也会降权处理。
编辑器输出 HTML 不能只靠 div 堆砌
很多富文本编辑器（如 TinyMCE、Quill、Slate）默认导出纯 div + 内联样式结构，例如：<div class="paragraph">文字</div>。这种写法对 SEO 和可访问性是“隐形杀手”——既无语义层级，也无内容角色标识。
实操建议：
- 在编辑器保存/导出环节插入转换逻辑：将
class="paragraph"替换为p，class="heading-1"替换为h1，依此类推 - 禁止用户手动插入
div作为段落容器；若需自定义区块，优先用section并强制要求配h2或更高层级标题 - 避免把
nav或aside等语义标签暴露给编辑器 UI，它们应由模板层控制，而非用户可编辑内容
article 是编辑器内容的最小语义单元
当编辑器用于发布博客、新闻、产品描述等独立成篇的内容时，必须用 article 包裹整段输出，而不是仅用 main。因为 article 明确告诉搜索引擎：“这段内容可被单独索引、分发、引用”。
立即学习“前端免费学习笔记（深入）”；
常见错误现象：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 多个
article嵌套在同一个main中，但内部没有header或footer（如发布时间、作者），导致结构残缺 - 误用
section替代article：比如一篇完整教程被拆成 5 个section，但没用article包裹整体，搜索引擎无法识别其“独立性” -
article内未包含至少一个h1–h6，或出现多个h1，破坏标题层级
正确做法：每个编辑器输出块 = 一个 article → 内含 header（含 h1 + 元信息）→ 主体用 p/ul/figure → 结尾可选 footer（如“本文共 1234 字”）。
figure + figcaption 是图片 SEO 的硬门槛
编辑器插入图片后，若只生成 <img src="...">，等于放弃图片搜索流量，且对视障用户完全不可读。
必须强制转换为：
<figure> <img src="..." alt="描述性文字"> <figcaption>图注：说明图片上下文，非重复 alt 内容</figcaption> </figure>
关键细节：
-
alt属性必须由编辑器提供输入框（不可留空），且长度控制在 125 字符内；装饰图才允许设为alt="" -
figcaption不是可选项——它让图片脱离孤立状态，与周围段落形成语义关联，Google 明确将其纳入图文匹配信号 - 避免把
figcaption放在img外部（如用p模拟），否则无法被屏幕阅读器识别为该图专属说明
最易被忽略的一点：语义标签本身不解决可访问性，真正起效的是它们与标题层级、ARIA 属性、键盘焦点流的配合。比如 article 内用了 h2 开头，但模板里 main 外还有个隐藏的 h1，整个层级就崩了——机器不会猜你“本意”是什么，只认结构是否合法。
