header 和 main 是 HTML5 语义化布局最核心的两步：header 作为上下文入口可嵌套使用，main 必须全页唯一且直接位于 body 下，二者按 header→nav→main 顺序构建清晰内容流，支撑 SEO 与无障碍访问。
用 header 和 main 搭建页面逻辑骨架，是 HTML5 语义化布局最核心、最不可省略的两步。它们不是装饰性标签，而是向浏览器、搜索引擎和辅助技术发出的明确信号：这里是你该关注的入口，那里是真正要读的内容。
header 要做“上下文入口”，不是“顶部大盒子”
- 整页
通常放在 第一层，包含网站 Logo、主标题（ ）、主导航（可嵌套
- 每个
内部也可以有自己的 ，用于放文章标题（ ）、发布时间、作者等，这是完全合法且推荐的
- 避免把整个顶部导航栏+横幅图+登录框全塞进一个
，尤其当其中混入大量操作控件或广告时，语义会弱化
main 是“唯一主内容声明”，不是“内容容器”
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 检查现有代码：如果还没用
，就在 下第一层、 和 - 如果已有多个
，保留最外层那个，其余一律改为 或直接去掉冗余 wrapper 内部可以放心放 、 、 （文章标题）、
header + main 组合要形成清晰的内容流
从 DOM 顺序看，
立即学习“前端免费学习笔记（深入）”；
- 不要把
- 如果页面有多个主题内容（如首页展示三篇博文），
内应直接并列多个 ，而不是用 包一层再放 ，否则可能稀释主内容权重 - Google Search Console 的结构化数据测试工具能直接识别
+ + 这组组合，仅靠前两者就能建立基础内容区块感知
常见踩坑点与快速自检
这些错误看似微小，却直接影响 SEO 解析和屏幕阅读器导航效率：
- 把整个 替换成
，结果包进了导航、侧栏甚至页脚 —— 只负责“主内容”，其余都该剥离 - 每个
都配 ，但里面没用 –
，导致标题大纲断裂 ——
需配合语义化标题才完整 - 在
外层又套一层 ，或者把它当“样式容器”加 class 做布局 —— 它没有视觉样式，布局靠 CSS，语义靠位置和唯一性 - 每个
