重构HTML5布局应优先聚焦header、main、article三个不可替代的语义标签：header须含恰当heading声明上下文起点；main必须全页唯一且直接包裹核心内容；article仅用于可独立分发的内容并自带heading。
直接切入重点：重构HTML5布局，不靠重写整页，而是聚焦三个不可替代的语义标签——header、main、article。它们是结构语义化的底线，改对这三处，SEO可感知、屏幕阅读器能导航、搜索引擎能抓取核心区块；其余标签可逐步补充。
header：页面上下文入口，不是每个区块都配一个
header的作用是声明“这是当前上下文的起点”，比如全站页眉或某篇文章的标题区。常见误区是给每篇博客、每个卡片都套一个header却不配h1–h6，结果破坏标题大纲，让辅助技术无法建立层级。
- 全局页眉用
包裹logo、主导航和搜索框，内部必须有h1（页面主标题） - 单篇文章内可用
包它的标题、作者、时间等元信息，但必须含h2或更高级别标题 - 避免无heading的header，也别把整个导航栏单独塞进一个没语义的div再改名header
main：唯一且不可嵌套的主内容声明
main不是“内容容器”，而是向机器明确宣告“这里才是用户真正要读的东西”。它必须全页唯一，且不能被其他语义区块包裹——否则Google可能降权，屏幕阅读器也可能跳过。
- 检查DOM：若无
，就在第一层插入，只包裹正文、商品详情、表单主体等核心块 - 已有多个main时，只保留最外层那个，其余统一改为
或删掉冗余wrapper - main内部可合法包含
、 、 （文章标题）、
article：只用于能独立分发的内容
判断标准就一条：这段内容能否被RSS订阅、单独转发、跨站引用？能，就用
立即学习“前端免费学习笔记（深入）”；
- 适用场景：一篇博客、一条新闻、一个用户评论、一张产品卡片
- 不适用场景：“关于我们”、“服务流程”、“客户评价汇总”这类聚合型区块，应归为
- article必须自带heading（至少h2起），否则屏幕阅读器无法锚定导航点；内部避免套section来“模拟”article，会稀释主题权重
兼容与性能：IE11也能稳住，但别滥用
IE11不原生支持
- 过度使用article（例如每张banner图都包一层）会让爬虫认为页面信息碎片化，降低主题聚焦度
- section、aside、nav等标签可后续补，但header/main/article必须优先落地——它们是机器理解页面的“第一眼信号”
- 结构清晰后，再配合h1–h6连续层级、figure/figcaption图文关联、aria-label精准标注，无障碍与SEO效果自然叠加
