2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

header要素とは? 分かりやすく解説します!

header要素の評価
頻出度
(5.0)
重要度
(5.0)
総合評価
(5.0)




1.header要素とは?

header要素は文書やセクションのヘッダーを表します。

文書やセクションの冒頭となる見出しや概要、ナビゲーションのリンクなどを記述する場合によく利用されます。

トップページのヘッダーとする場合は、Webサイトのロゴや検索フォーム、メインのナビゲーションメニューなどが含まれます。

注意点

<head>と<header>は別物です。

head要素とheader要素の違いはサイトに表示されるかどうか、タグの中に含む内容かどうかです。

head要素の方はサイトに表示されることはなく、基本的にメタタグやリンクタグを書きます。




2.header要素の使い方

それではheader要素の使い方をみていきましょう。

・・・

<body>
 <header>
  <h1>タイトル</h1>
 <nav>
   <ul>
    <li><a href="#">HOME</a></li>
    <li><a href="#">COMPANY</a></li>
    <li><a href="#">PRODUCT</a></li>
    <li><a href="#">CONTACT</a></li>
   </ul>
  </nav>
 </header>
</body>

・・・

上記ではタイトルとナビゲーションを配置しました。

header要素内に配置する具体的な例を他にもみていきましょう。

  • ページの概要
  • ページ内リンクのメニュー
  • ロゴ
  • 記事タイトル
  • セクションの見出し
  • セクションの概要
  • 検索フォーム
  • 日時
  • 作者名

上記のものも適宜配置できるので自分の好きなようにheader要素を使いましょう!




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です