headerタグ

header tag(ヘッダータグ)はウェブーページの上の部分をです。ヘッダータグではサイトのロゴ、メーニュ、検索窓などが置いてあります。よく使われるYahooージャパンのサイトを見ると下のイメージの部分がヘッダータグのエリアです。

ヤフージャパン

ネイバーまとめ

coreasur

header タグには上のように会社の名、ロゴ、メーニュ、検索エリアなどがあります。

header タグの使い方

<header>いろいろ</header>

現在のサイトエバディベルのヘッダならこう書けますね。

下のソースを見ましょう。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>headerタグ</title>
</head>
<body>
    <header>
        <div id="serviceNameArea">
            <div>
                <img src="/material/images/main/happyCatHeader.png" alt="happy cat image">
            </div>
            <a href="/">
                <h1 id="serviceName">coreasur</h1>
                <h2>Web Technology, エバディベル</h2>
            </a>
        </div>
        <div id="searchArea">
            <div id="searchEngineKeywordLabel">
                <input type="text" id="searchEngineKeyword" placeholder="検索キーワード.">
            </div>
            <div id="searchBtnLabel">
                <img src="/material/images/service/searchIcon.png" id="searchBtn">
            </div>
        </div>
    </header>
</body>
</html>

実行したら今とは違いますね。CSSを勉強して適用したら今のように作れます。
では次はfooterタグについて勉強しましょう。