大まかにサイトのパーツを切り分けるタグ
headerタグ
headerタグはwebサイトを構成しているパーツのひとつである「header(ヘッダー)」の範囲を示すタグで、ページの一番上に表示されることが多いと思います。
役割は、サイト名やロゴ、メニューなどを置くことにあります。
基本的にWebページにはheader要素が置かれていることが望ましいとされているようです。
使い方はサイト名が記述されているタグやナビゲーションのタグをまとめて囲ってあげるだけでOKです。
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<header> <h1> <a href="#">weblasts</a> </h1> <nav> <ul> <li><a href="#">HTML</a></li> <li><a href="#">CSS</a></li> <li><a href="#">WordPress</a></li> <li><a href="#">その他</a></li> </ul> </nav> </header> |
footerタグはwebサイトを構成しているパーツのひとつである「footer(フッター)」の範囲を示すタグでページ最下部に設置されることが多いと思いますが絶対に最下部に置かなくてはいけないというルールは存在しません。
フッターには主に、サイトの制作者の情報、関連ページへのリンク、著作権などの情報が記述されることが多いと思います。
使い方は、サイトの制作者の情報、関連ページへのリンク、著作権が記述されているタグ群をまとめて囲むだけです。
このサイトだと下のコードのようになっています(変えちゃいました)。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
<footer> <div class="fbox"> <div class="fotnav"> <h4>オススメリンク</h4> <ul> <li><a href="#" target="_blank">リンク</a></li> <li><a href="#" target="_blank">リンク</a></li> <li><a href="#" target="_blank">リンク</a></li> <li><a href="#" target="_blank">リンク</a></li> <li><a href="#" target="_blank">リンク</a></li> </ul> </div> <div class="fotnav"> <h4>画像素材・Webデザイン</h4> <ul> <li><a href="#" target="_blank">リンク</a></li> <li><a href="#" target="_blank">リンク</a></li> <li><a href="#" target="_blank">リンク</a></li> <li><a href="#" target="_blank">リンク</a></li> <li><a href="#" target="_blank">リンク</a></li> </ul> </div> <div class="fotnav"> <h4>早見表など</h4> <ul> <li><a href="#" target="_blank">リンク</a></li> <li><a href="#" target="_blank">リンク</a></li> <li><a href="#" target="_blank">リンク</a></li> <li><a href="#" target="_blank">リンク</a></li> <li><a href="#" target="_blank">リンク</a></li> </ul> </div> <div class="fotnav"> <h4>その他ツール</h4> <ul> <li><a href="#" target="_blank">リンク</a></li> <li><a href="#" target="_blank">リンク</a></li> <li><a href="#" target="_blank">リンク</a></li> <li><a href="#" target="_blank">リンク</a></li> <li><a href="#" target="_blank">リンク</a></li> </ul> </div> </div> <p><small>© 2018 weblasts. </small></p> </footer> |
mainタグ
headerタグや、footerタグと同様に、ページの大きな枠組で切り分けるときに使うタグの1つです。
mainタグとは、 ページ全体のメインコンテンツをになる部分をmainタグで囲んで使います。
メインコンテンツとはページの主題となるコンテンツを指します。
ということは他のページにも繰り返し使いまわされる【ナビ】【コピーライト情報】【ウェブサイトのロゴ】等はmain要素の中には含めることはできません。 さらに、main要素は1ページの中に1回しか使うことができないルールになっているので注意しましょう。
※ main要素は省略可能で省略されることが多いタグです。