<section>用于按主题逻辑分块，必须含<h2>–<h6>标题且层级合理；仅一个<h1>在<header>中；适合可命名、入大纲的主题区块，禁止单层包裹<main>或滥用嵌套。

用 <section> 对页面内容做逻辑分块，核心是“按主题、可命名、有标题”。它不是视觉盒子，而是告诉浏览器和辅助技术：“这一块讲的是同一个事”。

必须带标题，且标题层级要合理

每个 <section> 至少得有一个 <h2> 到 <h6>（不能是 <h1>），否则语义失效——屏幕阅读器跳过、Lighthouse 报错、大纲里不显示。

• 整页只允许一个 <h1>，通常放在 <header> 里
• <section> 推荐从 <h2> 开始；若嵌套子节，用 <h3>，不能全用 <h2> 或跳成 <h4>
• 标题可以视觉隐藏，比如 <h3 class="visually-hidden">技术参数</h3>，语义依然成立

只用于能单独命名、入大纲的主题区块

判断一块内容该不该包 <section>，就问：它能不能被叫出名字？删掉它，剩下部分是否仍逻辑自洽？

Article To Html

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

下载

• 适合：客户评价、安装步骤、性能对比、FAQ 分类——每个都配 <h2>，彼此并列
• 不适合：轮播图控制按钮、页脚图标列表、纯为加间距的空 <p> ——这些用 <div> 更准确
• 整个 <main> 只套一个 <section>，等于没分区，不如拆成多个真实主题块

嵌套要克制，层级不宜超过两层

三层 <section> 嵌套不是语法错误，但会让信息结构模糊，尤其对屏幕阅读器用户来说，容易迷失层级关系。

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

• 同级 <section> 必须逻辑并列，比如「背景」「实现」「测试」，不是「导航 → 子菜单 → 按钮」这种操作流
• 若某块内容本身是独立可分发的（如一篇推荐文章），优先用 <article>，而不是在 <section> 里硬塞一个
• <aside>、<nav>、<footer> 各有语义边界，不要用 <section> 包裹它们来“统一风格”

配合其他语义标签一起用，别单打独斗

<section> 是内容分组工具，不是骨架主干。它得嵌在合理位置才有意义。

• 应出现在 <main> 内部，或 <article>、<aside> 中，不能作为 <body> 的直接子元素替代 <header>/<footer>
• 可在 <section> 内部加 <header> 放小标题或作者信息，加 <footer> 放编辑时间或相关链接
• 避免 <section id="content"> 这类写法——ID 名称重复语义，直接用 <main> 就行