html5语义化是用标签明确页面结构：header声明上下文，main唯一承载核心内容，nav专用于主要导航，section按主题分组，article表示独立内容，aside存放辅助信息。

HTML5语义化不是给页面“加装饰”，而是用标签说清楚：哪是入口、哪是主干、哪是补充。骨架立住了，代码才真正可读、可访问、可被搜索引擎理解。

header：上下文入口，不等于顶部大盒子

header 的本质是声明“当前区块的上下文”。它可以出现在整页最上层，也可以嵌套在 article 或 section 里——比如一篇博客正文自带的标题、作者、发布时间，就该包在一个独立的 header 中。

• 整页 header 通常含网站 logo、主标题（h1）、主导航或搜索框
• 每篇 article 内部的 header 放文章标题（h1–h6）、作者、时间等元信息，完全合法且推荐
• 避免把登录框、广告横幅、多级操作栏全塞进一个 header，会稀释语义重点

main：唯一主内容声明，不是内容收纳筐

main 是页面中不可替代的核心区域，必须全页唯一，且只能作为 body 的直接子元素出现。它里面放的，是用户点进来真正想看的东西。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• ✅ 正确：文章正文、商品详情、表单主体、列表页主内容区
• ❌ 错误：导航栏、侧边栏、页脚链接、版权声明、面包屑导航
• ⚠️ 注意：main 里可以包含多个 article 或 section，但不能嵌套在 article、aside、footer 等其他语义容器内部

nav 与 section：各司其职，不混用

nav 只用于主要导航系统；section 则是主题层面的逻辑分组，两者功能不同，不能互相替代。

• nav 适用：顶部主导航菜单、左侧分类目录、文档大纲跳转链接
• nav 不适用：“上一篇/下一篇”、页脚杂项链接、文章内锚点导航（这类更适合普通 a 标签或 ol/ul）
• section 必须有明确主题和标题（h2–h6），例如「安装步骤」「用户评价」「售后政策」——它们合起来才构成完整信息，拆开意义不全

article 和 aside：区分“能独立存在”和“可随时移除”

是否具备独立传播性，是判断用 article 还是 aside 的关键标准。

• article：博客正文、新闻稿、用户评论、独立卡片组件——单独提取出来仍具完整意义，支持 RSS 订阅或分享
• aside：作者简介、同类文章推荐、广告位、术语注释——与主内容相关但移除后不影响主线表达
• 注意：aside 里的内容若强绑定某段正文（如代码块旁的解释），应放在 article 内部，而非独立 aside

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！