Caution

お使いのブラウザはJavaScriptが実行できない状態になっております。
当サイトはWebプログラミングの情報サイトの為、
JavaScriptが実行できない環境では正しいコンテンツが提供出来ません。
JavaScriptが実行可能な状態でご閲覧頂くようお願い申し上げます。

HTMLタグ辞典

<header> / <footer>

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

構文

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

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

タグ一覧

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

サンプルコード

<!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>