ホームページでよく使われるHTMLタグ
div要素
複数の要素をまとめる時によく使われます。
まとめたい要素の親要素となるように、<div>と</div>で囲んで使います。
div要素でまとめた前後で改行が入り、ブラウザ上には変化がみられませんのでCSSを使ったデザインをする時に便利なタグです。
特別な意味を持たない要素ですので、ホームページのコンテンツ配置を考えるときによく使われる要素です。
div要素は汎用的で便利なタグですが、他に適切な要素がない場合に使うよう推奨されています。
もしも見出しとなる部分に、div要素を使った場合
参考に本来hタグを使うべき見出しとなる部分にdiv要素を使った場合を例にあげましょう。
見出しの場合はh1（2,3,4,5,6）を使う事でブラウザや検索ロボットに「この部分は見出しだな」と認識させることができますが、div要素を使ってしまうと「特に意味を持たない部分なんだな」と認識されてしまいます。
作り手側は「見出し」と思っているのに、です。
適切なHTMLタグを使う事でこうした間違いを減らすことができます。
便利だからといって、何でもdiv要素を使う事のないように注意しましょう。
span要素
div要素と似た要素でこちらも特別な意味を持ちません。
ただし「span要素で囲んだ前後には改行が入らない」という点は異なりますので、注意してください。
span要素もCSSを使ったデザインをする時に重宝する便利なタグです。
<span>と</span>で囲んで使います。
header要素
HTML5というHTMLのフォーマットで使われるようになった要素で、ホームページのヘッダーを示す箇所に使われます。
<header>と</header>で囲んで使い、囲んだ箇所に「ホームページのヘッダーである」という意味を持たせることができます。
header要素でまとめた前後には改行が入り、ブラウザ上での見た目の変化はありません。
1ページの中に1回程度使われる要素です。
ヘッダーとは
ホームページのロゴや電話番号、ページリンクなど、ホームページの上部に共通して登場する箇所のことです。
footer要素
HTML5というHTMLのフォーマットで使われるようになった要素で、ホームページのフッターを示す箇所に使われます。
<footer>と</footer>で囲んで使い、囲んだ箇所に「ホームページのフッターである」という意味を持たせることができます。
footer要素でまとめた前後には改行が入り、ブラウザ上での見た目の変化はありません。
1ページの中に1回程度使われる要素です。
フッターとは
ホームページの下部に共通して登場する箇所で、主にコピーライトやリンクが配置されます。
nav要素
HTML5というHTMLのフォーマットで使われるようになった要素で、ホームページのナビゲーションを示す箇所に使われます。
<nav>と</nav>で囲んで使い、囲んだ箇所に「ホームページのナビゲーションである」という意味を持たせることができます。
nav要素はそのホームページの主要なナビゲーションに使います。
他ページへのリンクだからといって、全てに付けないように注意してください。
ナビゲーションとは
他のページへのリンクをまとめた箇所の事をそう呼びます。
ページメニューと言い換えた方がわかりやすいかもしれません。
section要素
HTML5というHTMLのフォーマットで使われるようになった要素です。
<section>と</section>で囲んで使い、囲んだ範囲が意味的な1つのまとまりであることを表します。
section要素は章や節といった単位として扱うので、内容を表すh1～h6の見出しが必要になります。
まとめ
・div要素は複数の要素をまとめてグループ化することができる
・div要素とspan要素は特別な意味を持たないのでCSSを使ったデザインに重宝される
・ホームページのヘッダーにはheader要素を使う
・ホームページのフッターにはfooter要素を使う
・ナビゲーション（ページメニュー）にはnav要素を使う
・section要素は節といった単位で使う
