header

構造・セクション

タグの概要タグは、HTML文書内のヘッダー部分を定義するためのタグです。このタグ内には、サイトのロゴやナビゲーションメニュー、検索フォームなど、ページの先頭に配置される重要な要素をまとめることができます。主にサイトのトップ部分で使用されま

2025.07.20

タグの概要

タグは、HTML文書内のヘッダー部分を定義するためのタグです。このタグ内には、サイトのロゴやナビゲーションメニュー、検索フォームなど、ページの先頭に配置される重要な要素をまとめることができます。主にサイトのトップ部分で使用されます。

<header>
  <h1>サイトのロゴ</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

特に使用される属性はありませんが、idやclass属性を付与することでCSSやJavaScriptでスタイリングや動的な操作が可能です。

<header>
  <h1>My Website</h1>
  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>
</header>

この例では、サイトのロゴとナビゲーションメニューを

タグ内に配置しています。

<header>
  <img src="logo.png" alt="サイトのロゴ">
  <h2>Welcome to our website!</h2>
</header>

この例では、画像とウェルカムメッセージを

タグ内に配置しています。

–

タグは1つのページに1つだけ使用するのが一般的です。複数の

タグを使うと、構造が複雑になり読みやすさやアクセシビリティに影響が出ることがあります。
–

タグ内には、ページのトップ部分に必要な要素だけを配置するようにしましょう。不適切な要素を入れてしまうと、意図しないデザインや機能の影響が出る可能性があります。