コンテンツセクション

<article>
  <header>
    <h1>HTMLセマンティック要素の基本</h1>
    <p>公開日: 2025年1月8日</p>
    <p>カテゴリ: プログラミング</p>
  </header>
  
  <p>
    HTMLセマンティック要素は、Webページの意味を
    明確にするための重要な仕組みです...
  </p>
  
  <footer>
    <p>著者: AI先生</p>
    <p>タグ: HTML, セマンティック, 基礎</p>
  </footer>
</article>

<article>
  <section>
    <h2>基本概念</h2>
    <p>セマンティック要素の基礎について説明します。</p>
  </section>
  
  <section>
    <h2>実践的な使い方</h2>
    <p>実際のコード例とベストプラクティスを紹介します。</p>
  </section>
  
  <section>
    <h2>応用テクニック</h2>
    <p>より高度な活用方法を学習します。</p>
  </section>
</article>

<article>
  <h1>記事タイトル</h1>
  
  <figure>
    <img src="/img/html-structure.png" alt="HTML文書構造の図解">
    <figcaption>HTML文書の基本構造図</figcaption>
  </figure>
  
  <p>記事の本文内容...</p>
  
  <figure>
    <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;ページタイトル&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;main&gt;メインコンテンツ&lt;/main&gt;
  &lt;/body&gt;
&lt;/html&gt;</code></pre>
    <figcaption>HTML文書の基本構造</figcaption>
  </figure>
</article>

<article>
  <h1>HTMLの基本</h1>
  <p>HTMLについて学習しましょう。</p>
  
  <!-- 記事内の補足情報 -->
  <aside>
    <h3>関連用語</h3>
    <ul>
      <li>セマンティック要素</li>
      <li>マークアップ言語</li>
    </ul>
  </aside>
</article>

<main>
  <article>
    <header>
      <h1>記事のタイトル</h1>
      <p>投稿日: 2025年1月10日</p>
    </header>
    
    <section>
      <h2>はじめに</h2>
      <p>記事の導入部分...</p>
    </section>
    
    <section>
      <h2>主な内容</h2>
      <p>メインの内容...</p>
      
      <figure>
        <img src="graph.png" alt="データの推移を示すグラフ">
        <figcaption>過去5年間の売上推移</figcaption>
      </figure>
    </section>
    
    <aside>
      <h3>関連情報</h3>
      <p>この記事に関連する補足説明...</p>
    </aside>
    
    <footer>
      <p>著者: 田中太郎</p>
      <p>カテゴリ: Web開発</p>
    </footer>
  </article>
</main>

<main>
  <article>
    <header>
      <h1>新製品「SmartWatch Pro」</h1>
      <p>革新的なウェアラブルデバイス</p>
    </header>
    
    <section>
      <h2>主な特徴</h2>
      <p>高性能センサーを搭載し...</p>
    </section>
    
    <section>
      <h2>技術仕様</h2>
      
      <figure>
        <img src="smartwatch.jpg" alt="SmartWatch Proの外観">
        <figcaption>SmartWatch Pro（シルバーモデル）</figcaption>
      </figure>
      
      <ul>
        <li>バッテリー: 48時間</li>
        <li>防水レベル: IPX8</li>
      </ul>
    </section>
    
    <aside>
      <h3>購入前の注意</h3>
      <p>本製品を購入する際は、対応機種をご確認ください...</p>
    </aside>
  </article>
</main>

<main>
  <article>
    <header>
      <h1>株式会社テックソリューション</h1>
      <p>技術で未来を創造する</p>
    </header>
    
    <section>
      <h2>会社概要</h2>
      <p>当社は2010年に設立され...</p>
      <ul>
        <li>設立年: 2010年</li>
        ...
      </ul>
    </section>
    
    <section>
      <h2>事業内容</h2>
      <p>主に以下の3つの分野で事業を展開しています...</p>
      
      <section>
        <h3>Webシステム開発</h3>
        <p>企業向けWebアプリケーションの開発...</p>
        
        <figure>
          <img src="web-dev.jpg" alt="開発チームの様子">
          <figcaption>Webシステム開発部門</figcaption>
        </figure>
      </section>
    </section>
    
    <section>
      <h2>アクセス情報</h2>
      <p>〒100-0001 東京都千代田区...</p>
    </section>
    
    <aside>
      <h3>採用情報</h3>
      <p>現在、Webエンジニアを募集中です...</p>
    </aside>
  </article>
</main>