KumaROOT Logo
  • はじめに

高エネルギー物理学したい

  • ROOTの使い方
  • Geant4の使い方

データ解析・可視化したい

  • Pythonの使い方
  • NumPyの使い方
  • Pandasの使い方
  • Polarsの使い方
  • Matplotlibの使い方
  • Altairの使い方
  • Plotlyの使い方
  • hvPlotの使い方
  • streamlitの使い方

プログラミング言語したい

  • Rustの使い方
  • Google Apps Script の使い方
  • HTML / CSSの使い方
    • セマンティクスしたい
      • セマンティクスしたい(semantics)
      • アクセシビリティしたい(a11y)
      • ヘッダーしたい(header)
        • 記事のヘッダーにしたい
        • リファレンス
      • ナビゲーションしたい(nav)
      • メインコンテンツしたい(main)
      • 記事したい(article)
      • セクションしたい(section)
      • 補足したい(aside)
      • 検索したい(search)
      • 見出しと副題したい(hgroup)
      • フッターしたい(footer)
    • HTMLしたい
    • CSSしたい
    • ウェブフォントしたい
    • フレームワークしたい
    • SSGしたい
    • サーバーしたい
    • 未分類
  • Arduinoの使い方

コマンドライン・開発環境したい

  • コマンドの使い方
  • Gitの使い方
  • Docker の使い方

文書作成したい

  • LaTeXの使い方
  • Sphinxの使い方
  • Hugoの使い方
  • MySTの使い方
  • Typstの使い方
  • MkDocsしたい
  • Zensicalしたい
  • VS Codeの使い方
  • Emacsの使い方
  • Quartoの使い方

ハードウェアしたい

  • Raspberry Piの使い方
  • Red Pitayaの使い方
  • Windowsの使い方

配信・機材したい

  • ライブ配信
  • ガジェットの使い方
  • DaVinci Resolveの使い方

用語集

  • 用語集
KumaROOT
  • HTML / CSSの使い方
  • ヘッダーしたい(header)
  • View page source
Previous Next

ヘッダーしたい(header)

<body>
    <header>
        <a href="/" class="logo">サイト名</a>
        <nav>
            <ul>
                <li><a href="/about">このサイトについて</a></li>
                <li><a href="/blog">ブログ</a></li>
            </ul>
        </nav>
    </header>
    <main>...</main>
    <footer>...</footer>
</body>

headerタグは、ページや記事の冒頭に置く導入部分を表すタグです。 サイト名やロゴ、グローバルナビゲーション、検索フォームなどをまとめます。

body直下に置くとページ全体のヘッダーになり、 表示位置の都合でmainタグの前に配置します。

ウェブサイト全体で共通するパーツなので、 SSGやCMSを利用している場合は 部分テンプレートとして作成しておくとよいです。

記事のヘッダーにしたい

<article>
    <header>
        <h1>記事のタイトル</h1>
        <p>公開日: <time datetime="2026-08-30">2026年8月30日</time></p>
    </header>

    <p>記事の本文...</p>
</article>

headerタグはarticleやsectionの中にも置けます。 その場合は、その記事や節の見出し・公開日・著者など、冒頭にまとまる情報を囲みます。

1つのページにheaderタグは複数あってかまいません。 ページ全体のヘッダーと、各記事のヘッダーが同時に存在する形はよくあります。

注釈

headerタグの中に、別のheaderタグやfooterタグを入れることはできません。

リファレンス

  • header

Previous Next

© Copyright 2015 - 2026, Shota TAKAHASHI.

Built with Sphinx using a theme provided by Read the Docs.