标签用于语义分组而非视觉分栏，需配合CSS（如flex或grid）实现布局；其使用前提是内容能独立成块并配有语义化标题，否则应选用或其他更具体的语义标签。

section 标签不是“分栏”而是语义分组

很多人一看到

就默认它是用来做左右分栏或网格布局的，这是典型误解。

的作用是标记文档中一个有主题的独立内容区块（比如“产品介绍”“用户评价”“常见问题”），它本身不带任何样式、不控制布局，也不等同于

的视觉容器。真要实现“分栏目”视觉效果，得靠 CSS 控制，比如 display: flex 或 display: grid。

什么时候该用 section，什么时候不该用

判断标准很简单：这块内容能不能单独拎出来、配上标题（

–

）后仍语义完整？能，就用

；不能，就换

或更具体的语义标签（如

、

）。

• ✅ 适合：

  关于我们

  我们成立于2015年…

• ❌ 不适合：
  …
  （没标题、无独立主题，纯样式容器）
• ⚠️ 注意：
  不能替代
  或
  等已有语义的专用标签

让多个 section 实现“分栏目”视觉效果的关键 CSS

浏览器默认把

渲染成块级元素、垂直堆叠——这和你想要的并排栏目完全相反。必须显式加 CSS 才能改变布局行为。

• 横向并排三栏（响应式友好）：

  section { display: flex; gap: 1rem; }

  再配合 flex: 1 或 min-width 控制子项宽度
• 网格布局（推荐用于固定栏目数）：

  .sections-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }

  然后把多个
  包进一个容器里
• 别忘了移动端适配：在小屏下改用 grid-template-columns: 1fr 或 flex-direction: column
• 避免直接给
  设 float 或 inline-block —— 过时且易出盒模型问题

容易被忽略的可访问性与SEO影响

会被屏幕阅读器识别为逻辑区块，也会被搜索引擎当作内容结构信号。但前提是它必须有明确的主题层级。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

• 每个
  最好以
  ~
  开头，且标题文本要真实反映内容，别写“栏目一”“模块二”这种空洞命名
• 不要嵌套过深：
  三层以上会破坏大纲结构，建议用
  或
  替代内层
• 如果栏目只是视觉分隔、无独立语义（比如首页几个图标+短文案的推广位），用
  比硬套

  更准确

  真正麻烦的从来不是怎么写

  ，而是想清楚这一块内容到底是不是一个独立主题——这个判断错了，后面所有样式和辅助技术支持都会打折扣。