HTML5_要素
<!DOCTYPE html>
……突然何をしているんだといわれそうな唐突なタグ!
上のタグはHTML5ですよーっていう宣言です。
今回はHTML5のお話をしたいので宣言タグで宣言してみました。
ちなみにhtmlの部分は大文字でも小文字でも反応します。全部大文字の方が見栄えは良いかなって思うんですけど、つい小文字にしてしまうクセが。
さっそくbodyに使われるHTML5から追加された要素をちょっと見ています。
- header
headじゃなくてheaderです。
ページ1つに1度だけ使用できる要素です。頭の部分ですからね、ケルベロスじゃないんですから。
普通は見出しをいれたりします。サイトの名前だったり、目次だったり、検索フォームだったり、ロゴだったり。
はてなブログでも上に公式のロゴやメニューが表示されてますね、それですね。
- footer
headerが頭ならfooterは足です。たぶん。
最期に記すのでサイトの著者名や論文みたいなものだったら関連文書、リンクなどのそのページに関する情報をのせます。利用規約とか奥付ですね。卒論で参考書籍を書きましたけどそれみたいな感じなんですかね。
教科書には絶対最後に表示する必要はないよってあります。
つい、サイトの一番下にあるマップみたいなものを思い浮かべてたんですけど違うってことですよね……。
- nav
そのまんま、ナビゲーションです。なびげー所のシステムを起動しましょう!
サイト内のコンテンツ移動のための物を置きます。
昔のサイトだとABOUTとかLINKとかある奴ですかね、今もあるんですかね。
会社のホームページだと「企業理念」「業務概要」「コンタクト」なんかがあったりしますね。
- section
セクションです。終わり。
それくらいそのままです。テーマごとにグループ化したものです。
序論、本論、結論、とか序章、第1章、最終章とか春、夏、秋、冬、とかそういうテーマが変わった場合にそれぞれをまとめる感じですかね。第1章とかがテーマ変わってるのか怪しいですけど。
テーマとか関係なくグループ分けするならdivです。みんな大好きdivさんを使うのです。
- article
独立したコンテンツとして使用します。ユーザーコメントや雑誌や新聞などの、そのページの別の情報とは切り離されたものを表示する場合ですね。
理解が追い付いてないので使ってないんですが、ブログ記事を表示する場合って切り離されているってするんですかね、例文がブログだったんですが。
- aside
メインコンテンツ以外です。
漫画の柱に書いてある文字とか、雑誌の側面生地とか、サイドバーとか、そういうものです。
広告もそのサイトのメインとは関係ないのでここに入りますね。
とても簡単に言えば「その他」ってことです。
この中で私が使うのはnavとheaderかなあ。