webサイトを作るときの要素の使い方 1巻

webサイトを作るときの要素の使い方 1巻

webサイトのコーディングも時代が変わるたびに色々な手法が試されてきました。
table要素でレイアウト全体を構成したり、divでセクション区切りを作ったり。

今はhtml5が定着し、中身を明示してレイアウトできる要素が数多く誕生したので、サイト内の構成を昔より定義しやすくなったような印象があります。(header要素やfooter要素など)

そのぶん、この内容にどの要素を使ったらいいか。と要素を選択する必要が出てきたので、考えることは増えたかもしれませんね。
今回はその中でも、サイトの大枠を構成する要素を紐解いてみたいと思います。

サイトの大枠を構成する要素

ホントはsection、articleという要素も混ぜようかと思ったんですが、長くなりそうなので次回に回します 笑
今回書くのは以下5つの要素。

  • header
  • main
  • footer
  • nav
  • aside

header要素

headと違います。ちゃんと画面表示されるやつですよ。
主にサイトの一番上、ロゴなどが設置されてる部分に使用します。

イントロダクションやナビゲーションを含める。ということなので、nav要素もこの中に入れてしまって問題ないかと思います。

難しいのはメインビジュアルをheaderに入れるのかどうか。
ここはビジュアルを構成する内容がイントロダクションになるのかどうかで判断したらいい。と個人的には思ってます。
※例えばh1要素がメインビジュアルに入ってるなど

nav要素

これはもう単純ですね。
サイトのナビゲーションメニューを入れる要素です。

主要なナビゲーション対象なので、重要度が低いナビゲーションは囲わなくていいでしょう。
(ポリシーとかサイトマップとか)

main要素

そのページ固有の内容になる部分。
共通部分でない所の枠に使用します。

シンプルに考えるとheader、footer、sidebarに当たらない部分をくくる感じです。

aside要素

本筋と外れるが内容に関連してる部分を囲う要素。
使い所が結構難しい要素で悩む、、、

サイドバーをこれで囲むケースもよく見られますが、内容に関係ない外部リンクやアドセンス広告なんかが含まれる場合、divで囲む方が良さそう。

なるべく意味のあるセクショニングを心がけて

以上ざっと要素の使い所なんかを並べてみましたが、正直使い方は定義があってないようなものになっているので制作者によってバラバラです。
なので、疑いようのない部分は定義通り使用して、ここの部分はどう定義したらいいのか判断しかねる場合は、柔軟に要素を使っていいと思ってます。
(asideの部分とか)

なるべくGoogleさんに分かりやすいセクショニングが出来るよう、レイアウト組みたいものですね。
もし、自分はこんなセクショニングしてるよー。など、オススメ構成方法があれば是非教えてください^ ^

次回はsection、article要素について書きます。

htmlカテゴリの最新記事