HTML语义化核心是内容角色决定标签选择：<main>须全页唯一且为<body>直接子元素，专指不可替代的主体内容；<article>要求内容独立完整，<section>仅作逻辑分组；<nav>限于主要导航系统；<time>、<figure>等小标签提供机器可读性关键信息。

HTML文档结构不是“怎么好看怎么来”，而是“内容角色决定标签选择”。用错一个 <main> 或把 <nav> 套在页脚友情链接里，SEO 和屏幕阅读器就可能直接跳过你最想传达的部分。

为什么 <main> 必须全页唯一且不能嵌套

它不是“主视觉区域”或“主要内容区”的 CSS class 替代品，而是向浏览器和辅助技术声明：“这里才是用户真正该看的、不可替代的内容”。一旦嵌套在 <article> 或 <section> 里，语义层级就崩了——相当于告诉屏幕阅读器“这篇博客是整页的主内容”，而忽略掉页面其他所有文章。

• <main> 只能作为 <body> 的直接子元素出现，不能出现在 <header>、<footer>、<article> 或 <section> 内部
• 里面不该有导航栏、侧边栏、页脚链接、版权声明、广告位——哪怕它们视觉上在“主区域”内
• 可以包含多个 <article>（如文章列表），但不能反过来：一个 <article> 里再塞一个 <main>

<article> 和 <section> 的分界线在哪

关键不在“有没有标题”，而在“删掉周围还能不能独立存在”。RSS 订阅器、打印预览、搜索引擎摘要提取，都依赖这个判断。

• <article>：内容自带上下文和完整性。例如一条用户评论、一篇新闻稿、一个独立卡片式组件。即使脱离当前页面，也能被理解、被转发、被聚合
• <section>：只是逻辑分组，比如“产品特性”“客户评价”“技术参数”，单独拿出来没有意义，必须依赖父级上下文
• 常见误用：<section> 包裹单个 <h2> + 一段文字——没分组对象，纯属占位；该用 <div> 或直接用标题+段落

<nav> 不是“所有导航链接”的容器

它的语义是“主要导航系统”，不是“带链接的盒子”。滥用会稀释其信号，让辅助工具无法快速定位真正重要的跳转路径。

Article To Html

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

下载

立即学习“前端免费学习笔记（深入）”；

• 适合：<nav> 应包裹顶部主导航菜单、左侧栏目树、面包屑（如果构成核心路径）
• 不适合：页脚一堆友情链接、文章末尾的“上一篇/下一篇”、登录/注册按钮、搜索框（除非搜索是站点一级入口）
• 一个页面可有多个 <nav>，但每个都得是“主要”的——比如主站导航 + 文档内部目录导航，两者并存合理；但页脚十几个外链硬塞一个 <nav> 就破坏语义

<time>、<figure> 这些小标签为什么不能省

它们不是锦上添花，而是机器可读性的最小单位。省略 datetime 属性的 <time> 对 SEO 和日历聚合毫无价值；不用 <figure> 包裹图+说明，屏幕阅读器就无法确认图文关联性。

• <time datetime="2026-06-23">今天</time> —— 人类看到“今天”，机器拿到精确时间戳
• <figure><img src="..."><figcaption>示意图：DOM 渲染流程</figcaption></figure> —— <figcaption> 必须是 <figure> 的直接子元素，否则语义断裂
• <aside> 不等于“右边那块”，而是“与主内容相关但可分离的信息”，比如文章右侧的“作者简介”或“延伸阅读”，广告位或装饰图标不算

语义化最难的地方，不是记不住标签名，而是每次写标签前得停下来问一句：“这个内容，在脱离当前页面时，还成立吗？辅助工具需要把它当作什么角色来处理？”——答案决定了该用 <article> 还是 <section>，该包 <nav> 还是留白。