用于按主题逻辑分块，必须含–标题且层级合理；仅一个在中；适合可命名、入大纲的主题区块，禁止单层包裹或滥用嵌套。
用 <section></section> 对页面内容做逻辑分块，核心是“按主题、可命名、有标题”。它不是视觉盒子，而是告诉浏览器和辅助技术：“这一块讲的是同一个事”。
必须带标题，且标题层级要合理
每个 <section></section> 至少得有一个 <h2></h2> 到 <h6></h6>（不能是 <h1></h1>），否则语义失效——屏幕阅读器跳过、Lighthouse 报错、大纲里不显示。
- 整页只允许一个
<h1></h1>，通常放在<header></header>里 -
<section></section>推荐从<h2></h2>开始；若嵌套子节，用<h3></h3>，不能全用<h2></h2>或跳成<h4></h4> - 标题可以视觉隐藏，比如
<h3 class="visually-hidden">技术参数</h3>，语义依然成立
只用于能单独命名、入大纲的主题区块
判断一块内容该不该包 <section></section>，就问：它能不能被叫出名字？删掉它，剩下部分是否仍逻辑自洽？
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 适合：
客户评价、安装步骤、性能对比、FAQ 分类——每个都配<h2></h2>，彼此并列 - 不适合：轮播图控制按钮、页脚图标列表、纯为加间距的空
<p></p>——这些用<div> 更准确 <li>整个 <code><main></main>只套一个<section></section>，等于没分区，不如拆成多个真实主题块 - 同级
<section></section>必须逻辑并列，比如「背景」「实现」「测试」，不是「导航 → 子菜单 → 按钮」这种操作流 - 若某块内容本身是独立可分发的（如一篇推荐文章），优先用
<article></article>，而不是在<section></section>里硬塞一个 -
<aside></aside>、<nav></nav>、<footer></footer>各有语义边界，不要用<section></section>包裹它们来“统一风格” - 应出现在
<main></main>内部，或<article></article>、<aside></aside>中，不能作为的直接子元素替代<header></header>/<footer></footer> - 可在
<section></section>内部加<header></header>放小标题或作者信息，加<footer></footer>放编辑时间或相关链接 - 避免
<section id="content"></section>这类写法——ID 名称重复语义，直接用<main></main>就行
嵌套要克制，层级不宜超过两层
三层 <section></section> 嵌套不是语法错误，但会让信息结构模糊，尤其对屏幕阅读器用户来说，容易迷失层级关系。
配合其他语义标签一起用，别单打独斗
<section></section> 是内容分组工具，不是骨架主干。它得嵌在合理位置才有意义。
