必须且只能出现一次，代表页面唯一不可跳过的主体内容，供搜索引擎和屏幕阅读器快速定位；可多次使用，但须严格遵循各自语义边界与嵌套规则。
<header></header>、<nav></nav>、<main></main>、<aside></aside>、<footer></footer> 这五个标签组合起来，就是现代 HTML5 页面最常用、也最稳妥的基础框架结构。别用一堆 <div> 套娃，语义化不是加分项，是默认该这么写。
<h3>为什么必须用 <code><main></main> 而不是 <section></section> 或 <div>
<p>一个页面只能有一个 <code><main></main>，它代表对用户而言“唯一不可跳过”的主体内容区域。搜索引擎、屏幕阅读器都靠它快速定位核心信息。
-
<section></section>是带标题的逻辑分组（比如“产品介绍”“客户评价”），可多次出现，但不能替代<main></main> <div> 完全无语义，浏览器和辅助技术视其为“透明容器”，等于放弃结构表达 <li>如果误用多个 <code><main></main>，部分读屏软件会直接忽略后续的<main></main>，只读第一个- ✅ 应放入：顶部菜单栏、侧边全局导航、页脚的“关于我们/联系我们/服务条款”等结构性链接
- ❌ 不该放入：文章内跳转锚点（如“回到顶部”）、分页按钮（
<nav aria-label="pagination"></nav>是例外，需加aria-label明确作用）、面包屑（应使用<nav aria-label="breadcrumb"></nav>单独包裹） - ⚠️ 注意：
<nav></nav>内部仍要用<ul></ul>/<li>组织链接，否则失去列表语义，影响键盘导航顺序 - ✅
<article></article>：博客正文、新闻稿、论坛帖子、用户评论——它们有自己完整的标题、作者、时间，甚至能被 RSS 抓取 - ✅
<section></section>：“关于我们”板块下的“团队介绍”“发展历程”“企业文化”——彼此依存，拆开不完整 - ⚠️ 常见错误：把整篇博客页包在
<article></article>里，而忽略了它本身是容器页；正确做法是<main></main>包住页面结构，<article></article>只包那一篇具体文章 - ✅ 合理场景：博客文章里的术语解释框、法律条文旁的判例引用、产品页中的客户证言卡片
- ❌ 错误场景：全站通用的广告位、登录入口、语言切换器——这些属于全局功能，应放在
<header></header>或<footer></footer>，而非<aside></aside> - ? 提示：如果把
<aside></aside>拿掉，主内容逻辑依然自洽，那它大概率用对了；如果拿掉后读者看不懂上下文，那就该合并进<section></section>或<article></article>
<nav></nav> 的边界在哪？哪些链接不该放进去？
<nav></nav> 专指“主导航”，即全站级、跨页面复用的导航集合。不是所有链接都配得上这个标签。
什么时候该用 <article></article>，而不是 <section></section>？
判断标准就一条：这个内容是否能独立存在、被单独分发或重用？能，就用 <article></article>；否则用 <section></section>。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
<aside></aside> 不等于“右边栏”，它和上下文的关系才是关键
<aside></aside> 的本质是“与当前内容相关但非核心”的补充材料。位置（左/右/嵌入段落中）不决定它该不该用，语义关系才决定。
真正容易被忽略的是嵌套层级和可访问性配合。比如 <nav></nav> 必须有明确目的说明（aria-label 或 <h2></h2>），<main></main> 附近最好紧跟 <h1></h1>——这些细节不写进骨架，语义就断了一截。
