带跨列标题的双栏布局实现及语义化结构疑问

语义化结构选择：侧边栏是否放入<article>？ #

核心看侧边栏的内容归属：

• 如果侧边栏是当前文章的专属附属内容（比如本文的参考链接、作者简介、相关阅读推荐），完全可以放进<article>，并用<aside>标签标记，符合HTML语义规范。
• 如果侧边栏是全站通用内容（比如站点导航、全站热门文章、广告），应该放在<article>外部，作为页面级的侧边栏。

实现代码示例 #

情况1：侧边栏属于文章附属内容

<article>
  <!-- 标题跨两栏，用header包裹语义更清晰 -->
  <header>
    <h1>Article Header</h1>
  </header>
  <div class="article-layout">
    <!-- 文章主内容 -->
    <main class="article-content">
      Article Content
    </main>
    <!-- 文章专属侧边栏 -->
    <aside class="article-sidebar">
      The Sidebar
    </aside>
  </div>
</article>

对应的CSS（用Grid实现跨栏和双栏布局）：

article {
  display: grid;
  grid-template-columns: 3fr 1fr; /* 内容栏与侧边栏宽度比例，可按需调整 */
  gap: 2rem; /* 栏之间的间距 */
}

/* 让标题跨所有列（即两栏） */
article header {
  grid-column: 1 / -1;
}

/* 可选：给内容和侧边栏加基础样式 */
.article-content {
  padding: 1rem;
}
.article-sidebar {
  padding: 1rem;
  background-color: #f5f5f5;
}

情况2：侧边栏为全站通用内容

<body>
  <!-- 页面级标题/头部 -->
  <header class="page-header">
    <h1>Article Header</h1>
  </header>
  <div class="page-layout">
    <!-- 文章主体 -->
    <article class="article-content">
      Article Content
    </article>
    <!-- 全站侧边栏 -->
    <aside class="site-sidebar">
      The Sidebar
    </aside>
  </div>
</body>

对应的CSS：

.page-layout {
  display: grid;
  grid-template-columns: 3fr 1fr;
  gap: 2rem;
  padding: 0 1rem;
}

/* 让页面标题跨两栏 */
.page-header {
  grid-column: 1 / -1;
  padding: 1rem;
  border-bottom: 1px solid #eee;
}

为什么推荐这种方案？ #

1. 语义化优先：用<article>、<header>、<main>、<aside>等标签明确内容层级，不仅利于搜索引擎抓取，也提升了屏幕阅读器等辅助设备的可用性。
2. 布局简洁可控：CSS Grid天生适合处理跨栏和多栏布局，grid-column: 1 / -1一行代码就能实现标题跨两栏的需求，比Flexbox更直观。
3. 可维护性强：内容结构和布局逻辑分离，后续调整栏宽、增减内容都更方便。

内容的提问来源于stack exchange，提问作者Agung Izzul Haq