标签用于语义分组而非视觉分栏，需配合css（如flex或grid）实现布局；其使用前提是内容能独立成块并配有语义化标题，否则应选用或其他更具体的语义标签。
section 标签不是“分栏”而是语义分组
很多人一看到 <section></section> 就默认它是用来做左右分栏或网格布局的，这是典型误解。<section></section> 的作用是标记文档中一个有主题的独立内容区块（比如“产品介绍”“用户评价”“常见问题”），它本身不带任何样式、不控制布局，也不等同于 <div> 的视觉容器。真要实现“分栏目”视觉效果，得靠 CSS 控制，比如 <code>display: flex 或 display: grid。
什么时候该用 section，什么时候不该用
判断标准很简单：这块内容能不能单独拎出来、配上标题（<h1>–<h6></h6>
</h1>）后仍语义完整？能，就用 <section></section>；不能，就换 <div> 或更具体的语义标签（如 <code><article></article>、<aside></aside>）。
- ✅ 适合：
<section><h2>关于我们</h2> <p>我们成立于2015年…</p></section> - ❌ 不适合：
<section><div class="card">…</div></section>（没标题、无独立主题，纯样式容器） - ⚠️ 注意：
<section></section>不能替代<main></main>或<header></header>等已有语义的专用标签
让多个 section 实现“分栏目”视觉效果的关键 CSS
浏览器默认把 <section></section> 渲染成块级元素、垂直堆叠——这和你想要的并排栏目完全相反。必须显式加 CSS 才能改变布局行为。
- 横向并排三栏（响应式友好）：
section { display: flex; gap: 1rem; }再配合flex: 1或min-width控制子项宽度 - 网格布局（推荐用于固定栏目数）：
.sections-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }然后把多个<section></section>包进一个容器里 - 别忘了移动端适配：在小屏下改用
grid-template-columns: 1fr或flex-direction: column - 避免直接给
<section></section>设float或inline-block—— 过时且易出盒模型问题
容易被忽略的可访问性与SEO影响
<section></section> 会被屏幕阅读器识别为逻辑区块，也会被搜索引擎当作内容结构信号。但前提是它必须有明确的主题层级。
- 每个
<section></section>最好以<h2></h2>~<h6></h6>开头，且标题文本要真实反映内容，别写“栏目一”“模块二”这种空洞命名 - 不要嵌套过深：
<section><section><section></section></section></section>三层以上会破坏大纲结构，建议用<article></article>或<div> 替代内层 <li>如果栏目只是视觉分隔、无独立语义（比如首页几个图标+短文案的推广位），用 <code><div role="region" aria-labelledby="xxx"> 比硬套 <code><section></section>更准确真正麻烦的从来不是怎么写
<section></section>，而是想清楚这一块内容到底是不是一个独立主题——这个判断错了，后面所有样式和辅助技术支持都会打折扣。
