如何设计语义清晰且符合内容模型的 HTML 文档结构？

核心结论

语义化的本质不是把所有 div 换成新标签，而是根据内容在文档中的角色、层级和关系选择元素。一个结构良好的页面通常以 html 为根，使用 head 描述文档元数据，使用 body 承载可呈现内容；正文再按实际含义组织为 header、nav、main、article、section、aside、footer 等。每个页面通常只有一个代表主体内容的 main，但可以存在多个属于不同区域的 header 或 footer。

底层机制与决策依据

浏览器会将标记解析为 DOM 树，而辅助技术、搜索引擎和阅读模式会结合元素语义、标题层级、可访问性树与