先记住这个答案
<main> 是页面主要内容的地标，读屏用户可借它跳过重复菜单；页面通常应只有一个当前可见的主内容。<header>、<footer> 则看它们属于页面还是某个章节，并非只看屏幕上的上下位置。文章卡片可以有自己的标题区和页脚，但不能把每个视觉容器都当成全站地标。
header可用于页面或章节footer可用于页面或章节- 通常保留一个可见
main - 视觉位置由 CSS 决定
资讯页的三段主体结构
资讯站上方有站点 logo、搜索和导航，中间是文章列表，底部是版权与联系信息。用页面级 header、main、footer 表达结构，文章卡片内部也可以有自己的 header 或 footer。不要因为页脚视觉上在底部就把所有悬浮操作都塞进 footer，也不要把侧栏广告当作主要内容。单页应用切换路由时，应保持当前页面的主内容地标清楚。
<header>
<a href="/">站点首页</a>
<nav aria-label="主导航">...</nav>
</header>
<main id="content"><h1>最新文章</h1></main>
<footer>版权与联系方式</footer>
<!-- 正文只有一个当前主内容区域 -->这些结构元素给文档提供地标和内容关系，但具体视觉位置仍由 CSS 决定。
示例的导航属于页眉，最新文章属于主内容，版权属于页脚，这些位置不要求和 CSS 布局一一对应。页脚视觉上若固定在屏幕底部，也不会因此变成 <main>；一篇文章的作者栏即使在正文上方，也可以是该文章自己的 <header>。读屏地标应让用户快速跳到真正主内容，而不是让每个组件都报告成页面级页眉和页脚。
main 是当前页面主内容地标
header 和 footer 可属于整个页面，也可属于 article、section 等内容区域；它们的语义会随上下文变化。main 对应页面主体，不能靠重复多个可见 main 来做并列栏目；并列内容应在一个主内容区内组织。跳转链接还可指向 main，方便键盘用户绕过重复导航。
一个博客页可有全站 <header>、包住正文的 <main> 和全站 <footer>；正文里的每篇 <article> 还可有自己的标题区和作者信息。这些区域的语义取决于所属范围，不因视觉上都排在顶部就等价。若页面同时把桌面和移动版主内容都留在 DOM 中，应确认只有当前版本可见且不会产生两个竞争的主内容地标。
容易答错的地方
- 说一个页面只能有一个 header
- 页面级页头之外，文章或章节也可以有自己的
header。 - 用多个 main 表示多个栏
- 主内容地标应清楚且唯一，并列栏目放在同一主内容结构内。
面试官还会怎么问？
导航必须写在 header 里吗？
不必须。nav 可独立出现，位置由页面结构决定。
文章内部的 footer 能放什么？
作者、标签、修改时间等该文章的附属信息都可能适合。
为什么需要跳到主内容的链接？
键盘用户能跳过每页重复出现的导航，直接进入正文。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。