ヘッダーとフッターについて
ヘッダーとはサイト名をマークアップするための記述です。ヘッダーがないというサイトは基本的にはありません。フッターはページ最下部に表示させる情報で、コピーライトなどが記述されるのが一般的です。
今回のHTMLの記述内容
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>真夏のひまわり畑 - FOREST STUDIO</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>FOREST STUDIO</h1>
</header>
<article>
<h1>真夏のひまわり畑</h1>
<p>森の工房の隣にある畑は毎年夏になると満開のひまわりの花で黄色く染まります。ひまわりは「日輪草」とも呼ばれ、太陽に向かって花を咲かせます。大きなひまわりは背丈が2メートルを超え、見ごたえも十分です。畑の周囲約5キロの散策コースになっていますので、花を見ながら散歩をするのもおすすめです。</p>
<p>太陽の光をいっぱいに浴びたひまわりの種は、冬の間の野鳥たちの餌になります。また、ひまわり油も抽出し、料理やお菓子作りに活用しています。ひまわりの種を香ばしくローストしたクッキーも人気商品です。</p>
</article>
<footer>
<small>Copyraight ©FOREST STUDIO,all rights reserved</small>
</footer>
</body>
</html>
赤字の部分が今回追加した部分です。
<header>
<header>とは、コンテンツとサイト名を明確に区別するためにマークアップする指定です。よって、<header>の指定をしても、サイト上で変化はありません。
<フッター>
<footer>も<header>と同様に、コピーライトとコンテンツを明確に区別するためにマークアップします。
<small>
<small>はコピーライトであることを明確にするためにマークアップします。<small>タグで指定をすると、文字がひと回り小さく表示されます。
<h1>
今回もうひとつ<h1>を追加したことにより、同じページに<h1>がふたつある状態になりました。これって良いの？と思う方もいるかもしれませんが、HTML5になってからOKになりました。
ただし、これは記述しても問題がないというだけで、SEO的な観点から言うとNGです。同一ページ内にもっとも重要なマークアップが2つあると、クローラーが混乱する可能性が高くなります。
ここでは、テキストに沿って作成していくので、このまま作成を続けていきます。
セクションごとに<h1>を使用してもOKになったので、<body>で1つ<article>で1つとそれぞれセクションが異なるため、この<h1>はOKになっています。
セクションを指定する要素は以下のとおりです。
- <article>
- <nav>
- <aside>
- <section>
- <body>
それぞれ役割がありますが、それは追々紹介していこうと思います。
まとめ
今回は本当に少し記述を追加しただけなので、特に難しいなということはありませんでした。ただ、セクションを指定する要素がたくさんあるので、今後難しくなっていくのかなって思っています。
ヘッダーとフッターのタグを入れても、画面上では変化がないので、特に何かしたな！って実感はほとんどありませんでしたが、とても大切な記述らしいので、しっかり覚えていこうと思っています。
