新しい構造要素とCSSの書き方

ここはヘッダーです。
ここはセクションです。
ここはアーティクルです。
HTML5では、より構造的な記述をめざすため、新しい構造要素が用意されています。
ここではそれを紹介します。

今までページをいくつかのブロックに分ける場合は、divというタグを使っていました。
divはブロックを作るタグです。
divによって作ったブロックを装飾するには、ブロックに一つ一つ自分で名前をつけておく必要があります。
たとえば<div id=****>のような感じです。(IDは名前を指定する)
その名前のついたブロック一つ一つに対してCSSで装飾を指定するのです。

今回導入されたのはもともと固有の名前をもったブロック要素です。
  • <header></header>:ページ上部のヘッダー

  • <nav></nav>:ナビゲーション

  • <section></section>:メイン内容のためのブロック(articleの中に入れ子構造を作れる)

  • <article></article>:メイン内容のためのブロック(sectionの中に入れ子構造を作れる)

  • <aside></aside>:メインと関係の薄いブロック

  • <footer></footer>:ページ下部のフッター



  • これらを使うと名前をつける手間が少し減り、ソースが読みやすくなると思われます。
    ちなみにこのページはこれらの新しい構造要素を使って書かれています。
    ここは○○です。と書いてありますね。
    もちろんこれらの要素以外の意味でブロックを作りたい場合はdivを使うことが出来ます。
    次はCSSで装飾を指定しようです。