STINGER5で見るHTML5から新たに追加された要素

WordPressの人気テーマSTINGERシリーズもヴァージョン5となりHTML5へと変わりました。HTML5からは新たに加わった要素がいくつかあり、ざっくりとしか理解していない方もいると思います。（わたし、わたし！）おさらいの意味も兼ねてHTML5から加わった新要素をSTINGER5に照らし合わせて説明していきたいと思います。

STINGER3とSTINGER5のページを構成する要素の違い

HTML要素とはHTMLでマークアップした文書を構成するもので、titleタグやhead、strongやmetaタグなんかもそれに該当します。

STINGER3の場合

STINGER3ではページレイアウトを構成するすべての要素＜div＞タグで出来ており、それぞれにidやclassを設定しcssで見た目を制御しています。＜div＞タグは文書構造上特に意味を持たないタグなので、単純にレイアウトを構成するために使用されているのです。

したがって＜div id=”header”＞として、で見た目を整えブラウザ上はヘッダー部分を示したとしても、文書構造上では単なる『箱』という意味合いでしかないのです。

STINGER5（HTML5）の場合

変わってSTINGER5（HTML5）はSTINGER3と比べると非常にシンプルです。ヘッダー部分には＜header＞、フッターは＜footer＞と要素を使うことで文書構造上にもそれがヘッダーやフッターであると明確に理解できます。

このように＜div＞タグを使用し見た目だけの意味を付ける方法から、文書構造上にも意味を持たせた新しい要素を使うことで、サイトを見る人にも、検索エンジンにも意味が理解できるサイトを作ることができるようになるのです。

STINGER5にあるHTML5の新要素の説明

HTML5は従来のHTML4を改良し、文書構造をより明確にするための要素が追加されています。

＜header＞

＜header＞はヘッダー要素であることを表す要素です。通常はサイト名やロゴ、ナビゲーションなどを挿入して利用します。※＜head＞とは別物なので注意！

＜nav＞

＜nav＞はナビゲーションであることを表す要素です。

＜main＞

＜main＞タグで囲まれた部分はbody要素のメインコンテンツであると定義するタグという意味合いです。body内に1つしか存在しません。

＜article＞

＜article＞は文書内でひとつの記事であることを表します。articleはそれだけで一つのコンテンツとして成り立つものに使用します。例えばブログなどの記事がそれにあたります。STINGER5は1ページに1記事なのでarticleはひとつしか存在しないのはそのためだと思われます。

＜section＞

＜section＞は文書内でひとつのセクションであることを表します。セクションとは主にページ内の文書に対して、おおまかなグループ分けをすることです。HTML4でいうdivタグのようなタグですがdivタグのようなcssの受け皿のような使用方法は避けるべきだとされています。STINGER5では記事の内容部分で使用しています。

＜aside＞

＜aside＞は補足説明や、本文内容と直接関連しない余談などを表します。補足記事やサイドバー、広告などがそれにあたります。STINGER5ではサイドバー部分で使用しています。asideは以下のサイトの説明が参考になります。

『aside要素』 / HTML5新要素一覧　 | HTML5でサイトをつくろう

＜footer＞

＜footer＞はフッター要素であることを表す要素です。ページ下部に記述し、ナビゲーションやコピーライトなどを挿入して利用します。

参考

HTML 要素 – HTML5タグリファレンス – HTML5.JP

うやむやにしていたHTML5の文書論理構造をきちんと考えてみる | Mnemoniqs Web Designer Blog

ちょっと内容が違いますがこちらの記事はHTML5から変更された要素について詳しく書いてあるので大変参考になります！

見落としがちなHTML5で変更された要素いろいろ | Webクリエイターボックス

まとめ

普段ブログを書く中ではHTML5のことなどは気にすることはないかと思います。しかしサイトのカスタマイズをするなら最低限の要素は憶えておきたいところです。アウトラインが崩れてしまったりするので。
また間違ったマークアップしてしまった結果、SEO的にマイナスに作用してしまうことだって今後はあるかも。わからないですけど(~_~;)

自分でHTML5のサイトを一から作らないとなかなか憶えられなくていけません。改めて勉強しなおさないとダメっぽいです。それでは、ちゅんこ@shufulifeがお送りしましたー！！

よくわかるHTML5+CSS3の教科書【第2版】

posted with ヨメレバ

大藤 幹 マイナビ 2014-05-27

Amazon

Kindle

楽天ブックス