<header> / <footer>

対応:		HTML5（2014）

『<header>』はページやセクションの導入部・ナビゲーションを、『<footer>』はページやセクションの末尾情報（著作権・リンク等）を表すセマンティックな要素です。

構文

<!-- ページ全体のヘッダー -->
<header>
  <h1>サイトタイトル</h1>
  <nav>ナビゲーション</nav>
</header>

<!-- ページ全体のフッター -->
<footer>
  <p>© 2024 サイト名. All rights reserved.</p>
</footer>

タグ一覧

タグ	概要
<header>	ページまたはセクションの導入コンテンツ（見出し・ロゴ・ナビゲーションなど）を表します。
<footer>	ページまたはセクションのフッター情報（著作権・問い合わせリンク・関連リンクなど）を表します。

サンプルコード

sample_header_footer.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ヘッダー・フッターのサンプル</title>
</head>
<body>

  <!-- ページ全体のヘッダー -->
  <header>
    <h1>プログラミング学習サイト</h1>
    <nav>
      <a href="/">ホーム</a>
      <a href="/html/">HTML</a>
      <a href="/css/">CSS</a>
    </nav>
  </header>

  <!-- メインコンテンツ -->
  <main>
    <article>
      <!-- 記事のヘッダー（header は入れ子にできる） -->
      <header>
        <h2>HTMLの基礎</h2>
        <p>公開日: 2024年1月1日</p>
      </header>
      <p>HTMLはWebページの構造を定義する言語です。</p>
      <!-- 記事のフッター -->
      <footer>
        <p>カテゴリ: HTML入門</p>
      </footer>
    </article>
  </main>

  <!-- ページ全体のフッター -->
  <footer>
    <p>© 2024 プログラミング学習サイト</p>
    <nav>
      <a href="/privacy/">プライバシーポリシー</a>
      <a href="/contact/">お問い合わせ</a>
    </nav>
  </footer>

</body>
</html>

実行結果

ページ上部にサイトタイトルとナビゲーションが、ページ下部に著作権情報とリンクが表示されます。『<article>』内の『<header>』と『<footer>』は記事の見出し情報とカテゴリ情報を表します。

サンプルページはこちら

CSSでスタイリングする

実務でよく使われるヘッダー・フッターのCSSパターンです。

<style>
  /* サイトヘッダー: ロゴ左・ナビ右のレイアウト */
  .site-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 24px;
    height: 60px;
    background: #fff;
    border-bottom: 1px solid #e0e0e0;
    position: sticky; /* スクロールしてもヘッダーを上部固定 */
    top: 0;
    z-index: 100;
  }

  .site-header .logo {
    font-size: 1.25rem;
    font-weight: bold;
    text-decoration: none;
    color: #333;
  }

  .site-header nav a {
    margin-left: 24px;
    text-decoration: none;
    color: #555;
    font-size: 0.9rem;
  }
  .site-header nav a:hover { color: #4a90e2; }

  /* サイトフッター */
  .site-footer {
    background: #2c2c2c;
    color: #ccc;
    padding: 40px 24px 24px;
    margin-top: auto; /* フレックスコンテナ内でフッターを一番下に */
  }

  .site-footer a { color: #aaa; text-decoration: none; }
  .site-footer a:hover { color: #fff; }

  .footer-copyright {
    font-size: 0.8rem;
    color: #777;
    margin-top: 24px;
    text-align: center;
  }

  /* レスポンシブ: 600px以下でナビを非表示にする例 */
  @media (max-width: 600px) {
    .site-header nav { display: none; }
  }
</style>

<header class="site-header">
  <a href="/" class="logo">サイト名</a>
  <nav aria-label="グローバルナビゲーション">
    <a href="/tutorial.html">チュートリアル</a>
    <a href="/dictionary.html">辞典</a>
    <a href="/contact.html">お問い合わせ</a>
  </nav>
</header>

<footer class="site-footer">
  <nav aria-label="フッターナビゲーション">
    <a href="/privacy/">プライバシーポリシー</a>
    <a href="/contact/">お問い合わせ</a>
  </nav>
  <p class="footer-copyright">&copy; 2024 サイト名. All rights reserved.</p>
</footer>