two-column-grid.html

<!--
  @description Two-column article layout with sidebar using semantic HTML5 elements.
  @tags layout, grid, semantic, article
-->
<div class="page-container">
  <main id="main-content" tabIndex="-1">
    <article>
      <header>
        <h1>Article Heading</h1>
        <time datetime="2026-08-27">August 27, 2026</time>
      </header>
      <section>
        <p>Main content area.</p>
      </section>
    </article>
  </main>
  
  <aside aria-label="Sidebar navigation">
    <section>
      <h2>Related Topics</h2>
      <ul>
        <li><a href="#">Topic 1</a></li>
      </ul>
    </section>
  </aside>
</div>