さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【HTML5】文書構造化の為の要素

Pocket
LINEで送る

従来のhtmlでは、レイアウトを構築する際にdiv要素をして屈指して定義する必要がある為、どのような文章構造になっているかがわかりにくい場合がありました。
html5では文章構造をより明確にする為に、新たな要素が追加されました。

文章構造を明確にする為に追加された要素は以下になります。

[section] → HTMLドキュメント内の一般的なセクションを表す要素
[header] → セクションのヘッダを表す要素
[footer] → セクションのフッタを表す要素
[nav] → ナビゲーションに特化したセクションを表す要素
[article] → ニュース記事やブログの投稿等の独立したコンテンツのセクションを表す要素
[aside] → HTMLドキュメント内の主要なセクションと少し関連のあるセクションを表す要素

上記の追加要素を一般的なブログの構造に例として当てはめると以下のようになります。

HTML5のレイアウト構造

カテゴリー:HP制作, HTML5

コメント - 2件のコメントがあります。

  1. マスオさん より:

    図で見ると分かりやすいですね!
    html5構築記事は参考になります♪
    うーん…Webに関わる時間を増やしたいっ!!
    周囲のスマートフォン率が上がって来ました。
    iphone5を待てずに、iphone4(白)を
    買ってしまいそうです☆
    背中を押してやってください(笑)

  2. 管理人 より:

    マスオさん >
    上記の図は、簡単な例になりますが、もっと詳細な部分を表すとarticleの中にもheaderやfooterが入ったりとか、sectionごとにh1~h6を割り振れるので、1ページ内に何度もh1が出てきたりとか、結構複雑で、今までよりもコーディングに頭を使うので大変です(**)
    詳細はまた徐々にブログに掲載していきます。
    スマホ率が高くなってきていますね。
    iPhone買ってしまえばいいじゃないっすか!
    俺なんか仕事もないのにアンドロイド買っちゃいましたからね。仕事早く決まらないと死んでしまいます <(破産)/
    iPhone5がすぐに発売されそうなら、iPhone5を待ったほうが良いと思いますが、そんなに白がいいんですか?白はすぐ汚れますよ <(漂白)/

コメントを残す

コメント内容