HTMLでよく使うセクション構造パターン10選【WordPress実装にも活かせる】

HTMLのセクション構造は、ユーザー体験やSEO、WordPressテーマ開発において非常に重要です。この記事では、HTMLでよく使われる10の構造パターンを紹介し、WordPressテンプレート内での実装方法も無料でできる範囲で解説します。

① ヘッダー（<header>）

用途

サイトのロゴやナビゲーションなど、ページ上部に共通して表示される内容をまとめます。

WordPress実装例

<header>
  <h1><a href="<?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
  <nav>
    <?php wp_nav_menu(['theme_location' => 'global']); ?>
  </nav>
</header>

※グローバルメニューを表示するには、WordPressでナビゲーションメニューを作成・表示する方法をご覧ください。

② フッター（<footer>）

用途

コピーライトやフッターメニュー、サイト情報などを配置します。

WordPress実装例

<footer>
  <p>&copy; <?php echo date('Y'); ?> <?php bloginfo('name'); ?></p>
  <?php wp_footer(); ?>
</footer>

※wp_footer()を忘れると、プラグインやスクリプトが正常に動作しなくなることがあります。詳しくはwp_footer()とwp_head()の役割と使い方を参照してください。

③ メインコンテンツ（<main>）

用途

そのページの主たるコンテンツをまとめる領域です。

WordPress実装例

<main>
  <?php if (have_posts()): while (have_posts()): the_post(); ?>
    <article>
      <h2><?php the_title(); ?></h2>
      <div><?php the_content(); ?></div>
    </article>
  <?php endwhile; endif; ?>
</main>

④ サイドバー（<aside>）

用途

ウィジェットや補助的な情報、関連記事、広告などを表示する領域です。

WordPress実装例

<aside>
  <?php if (is_active_sidebar('sidebar-1')) : ?>
    <?php dynamic_sidebar('sidebar-1'); ?>
  <?php else : ?>
    <p>ウィジェットがまだ設定されていません。</p>
  <?php endif; ?>
</aside>

※このコードを使用するには、functions.phpでウィジェットエリア（sidebar-1）を登録し、管理画面からウィジェットを追加する必要があります。

👉 WordPressでウィジェットエリアを追加・表示する方法【初心者向け】

⑤ セクション（<section>）

用途

まとまった情報のブロックを示す汎用的な領域です。

WordPress実装例（最新記事の一覧）

<section>
  <h2>最新記事</h2>
  <ul>
    <?php
    $recent_posts = wp_get_recent_posts(['numberposts' => 5]);
    foreach($recent_posts as $post):
    ?>
      <li><a href="<?php echo get_permalink($post['ID']); ?>"><?php echo esc_html($post['post_title']); ?></a></li>
    <?php endforeach; ?>
  </ul>
</section>

⑥ 記事（<article>）

用途

1件1件の投稿やコンテンツを独立した単位として表現する際に使用します。

WordPress実装例

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
  <h2><?php the_title(); ?></h2>
  <div><?php the_content(); ?></div>
</article>

⑦ ナビゲーション（<nav>）

用途

ページ内やサイト全体のリンクを整理して配置します。

WordPress実装例（フッターメニューなど）

<nav>
  <?php wp_nav_menu(['theme_location' => 'footer']); ?>
</nav>

※theme_locationに指定するメニューは、事前にfunctions.phpで登録しておく必要があります。

👉 WordPressでナビゲーションメニューを追加・管理する方法

⑧ 画像＋キャプション（<figure>＋<figcaption>）

用途

画像にキャプション（説明）をつける際に使います。

WordPress実装例

<figure>
  <?php the_post_thumbnail('large'); ?>
  <figcaption><?php the_title(); ?></figcaption>
</figure>

※投稿にアイキャッチ画像を登録しておく必要があります。

⑨ グリッドレイアウト（<div>構成）

用途

カード形式やカラム分けなど、柔軟なレイアウトを組むときに使います。

WordPress実装例（2カラムカード風）

<div class="grid-container">
  <?php if (have_posts()): while (have_posts()): the_post(); ?>
    <div class="grid-item">
      <h3><?php the_title(); ?></h3>
      <?php the_excerpt(); ?>
    </div>
  <?php endwhile; endif; ?>
</div>

※CSSで.grid-containerや.grid-itemのスタイルを定義する必要があります。

👉 CSSグリッドやFlexboxを使った2カラムレイアウトの基本

⑩ 検索フォーム（<form>）

用途

ユーザーがサイト内検索を行うためのエリアです。

WordPress実装例

<form method="get" action="<?php echo esc_url(home_url('/')); ?>">
  <input type="text" name="s" value="<?php the_search_query(); ?>" placeholder="キーワードを入力">
  <button type="submit">検索</button>
</form>

※より簡単に実装したい場合は、get_search_form();を使うのもおすすめです。

まとめ

HTMLのセクション構造は、WordPressテーマ開発と非常に相性が良く、適切に使うことで保守性・拡張性・ユーザー体験のすべてが向上します。
特にWordPressのテンプレートタグをうまく活用することで、無料プランでも高機能なサイト構築が可能です。

🔗 関連記事

• WordPressでウィジェットエリアを追加・表示する方法【初心者向け】
• WordPressでナビゲーションメニューを追加・管理する方法
• wp_footer()とwp_head()の使い方と注意点
• CSSグリッドやFlexboxでのレイアウト構築ガイド