HTML5マークアップ！よくある勘違い
週末自分の完全趣味サイトを生まれて初めてゼロからHTML5 でマークアップをしてみました。
HTML5自体はずっと以前からちょこちょこ触っていたものの、実際実務レベルで使いこなしたことはなかったのでとてもいい勉強になりました。
今回はそのHTML5 マークアップについてまとめていきたいと思います。
なお、HTML5自体はまだ正確に勧告が出されていないので(２０１４年勧告予定)、これが絶対正しいというマークアップはまだありません。
今回は自分なりに色々調べたり、参考書を読んだり、大手国内サイトのHTML5 マークアップされているものを参考にまとめたもので、動作環境について保証はしませんのであしからず。
マークアップをHTML5ですることのメリット
HTML5 のAPIやCanvasについてはプログラマーが受ける恩恵であってマークアッパーには関係があまりないですね。
HTML5 マークアップのメリットは『シンプルになり、文章構造がより明確にあらわすこと』ではないでしょうか？
マークアップがシンプルに
マークアップがシンプルになればそれだけ貴重なバイト数を節約でき、セレクタもシンプルになるのでCSSの高速化も期待できます。
日々マシンは進化するものの、タブレットPCやスマートフォンの普及につれて、『サイトを軽く、早くする』ことが求められている昨今、HTML5 はよい選択だと思います。
文章構造が明確化
新しく追加されたプロパティでは、文章構造をより明確に出来るものが多くあり、SEOにも期待が高まります。一部見解ではYahooに有効とありますが、定かではありません・・・
HTML5を使う際の注意点
HTML5 での注意点はIEへのサポートが挙げられます。またCanvasには多くのブラウザがまだ対応していませんので、これらを回避するには次に紹介しているようなJavascriptを別途サーバーに設置してあげる必要があります。
HTML5実務レベルですぐ使えるタグ、Javascript
HTML5ではたくさん追加になったタグがありますが、すぐ実務レベルで使えるものはそう多くはありません。
viewport(meta)
viewportとはメタタグの一つ。表示領域のサイズを指定するプロパティ。
下記のようにすると、スマホでは320pxで表示され(スマホの種類にもよるかもしれないが)、
何も指定しなければ980pxにてレンダリング。
ちなみに日本語appleでは下記のようになっていました。
html5.js
HTML5でマークアップにチャレンジした人なら知らない人はいないかもしれなhtml5.js。HTML5非対応ブラウザではCSSのhtml5のセレクタがうまくいきませんが、html5.jsを読み込めば問題が解決できます。実装したところ、IE6 でも問題なくhtml5にCSSをあてることが出来ました。
canvas.js
HTML5の描画オブジェクト。完璧に再現することは不可能ですが、canvas.jsを読み込むことである程度描画を再現することが可能です。関連項目として
『HTML5のCanvas図形をクリッカブルにするjQueryプラグインClickableCanvas』もさらっと読んでおくといいかもしれません。
header,footer
これが使ってあるだけでhtml5感が出ますね。
注意点として、これらはinline要素のような動きをしますので、直接これらにスタイル当てたい場合はdisplay:blockしてあげる必要があります。
header{
display:block;
}
nav
ナビゲーションをあらわすタグです。下記のように、ナビゲーション全体を囲ってあげます。
何回使っても勧告には問題なさそうですが、中心となるようなナビゲーションに使うのが普通なようで、よくあるフッターのリンク群に使うのは間違いのようです。
sectionとarticleとaside
文章構造を明確化するのに使えそうなタグです。
なぜ見出しを別けたかと言うと、非常に間違えやすく、とても重要なタグだからです。
section
コンテンツをグループ化していくもの。sectionはsection同士で入れ子にすることが出来、sectionを使ったら、見出しタグを必ず使うことが必須です。
各secrionそれぞれにh1タグを使うことも可能です。
可能と言うより、１つのsectionがあれば、そのsectionに対する一番大きな見出しが必要になるわけなので、sectionの中の見出しがいきなりh2タグから始まるのはおかしいように思えます。
具体的な使用例としては
html5.jp 『section 要素』より
article
某参考書にはarticleとは特別なsectionであると解説があったのですが、そうと言えばそうだし、違うと言えば違うかなと。articleとsectionの一番の違いはarticleはh1タグなどの見出しが必須でないこと。必須でないだけで、じゃんじゃん使って大丈夫です。
文章の前後関係で、サイトに関係ないわけでは無いんだけれど、asideみたく完全に独立させるには気がひける・・・
例えばブログのコメント一覧や、引用語句とかはそれに該当するのではないかと。
(下記にまんまその通り書いてありますね・・・)
article 要素は、ドキュメント、ページ、アプリケーション、サイトの自己完結したものを表します。つまり、シンジケーションのように、単独で再配布でき再利用できるよう意図したものです。これはフォーラムの投稿、雑誌や新聞の記事、ブログのエントリ、ユーザーが投稿したコメント、インタラクティブなウィジットやガジェット、その他、コンテンツの独立した項目が考えられます。
article要素は、ブログなどの1記事など、それ単体で完結しているものを表します。
html5.jp 『article要素』より
aside
これはバナーや外部リンクを示すときに使えそうです。実際に記事とは無関係で独立しているものはasideで囲ってあげるのがベストです。
個人的にはこのasideはサイト内に表示されているバナー関連をメインに使っていこうと思います。
個人的にはrole属性がお気に入り
role属性が私は痛くお気に入り。ずっと誤解釈をしていたのですが、role属性はhtml4から存在し、html5から追加されたわけではないようです。
roleはあらかじめ属性値が決まっており、私はこれを『名前』と勘違いしていて、自分で好き勝手つけていいもんだと思ってました。
- application
- banner・・・バナー
- complementary・・・補足
- contentinfo
- main・・・メイン
- navigation・・・ナビゲーション
- search・・・ナビゲーション
(ちらっと調べても出てこなかったので、今度調べておきます)
roleの具体的な使用例
xhtmlコーディングのときなどよくメインコンテンツを下記のように表していました。
しかし、この形では、他のdiv要素と位置関係は同じで、コイツが『このページの一番メインコンテンツですよ！エライdiv要素なんですよ』と表すことが出来ませんでした。
そこでroleの登場です。
これだけです。たったこれだけでいつものdivがグッと文章構造が明確に出来ました。
HTML5マークアップについてまとめ
とにかく『文章構造についての明確化』が課題になってきて、正直自分でもsectionやarticleの使い方には自信がないです。すぐにでも使えるのがviewport。スマホに対応していないサイトでも、このメタタグを入れるだけでグっと見やすくすることが出来ますよ。
次回は具体的なマークアップ例を示して、HTML5 のコーディングについて触れたいと思います。