HTML5に移行する際に気をつけるべき点

今回のリニューアル時に思い切ってHTML5に移行しました。
HTML5に移行する動機は特に理由はなく、同業者の方がソースを見て「おっ!?」と思ってもらえたら程度でした。

実際にXHTMLからHTML5に移行した時に気をつけるべき点を書き留めておこうと思います。

見出しレベル(h1~h6)の使い方

今までh1を多様するとページの評価を下げられるため、h1は1ページ一回だけ使用していたと思います。
しかし、HTML5では新たに追加されたセクショニング・コンテンツ(section・article・aside・nav要素)のセクション内では見出しレベルをリセットして、再びh1から使用すること「も」可能となります。

当ブログでは記事ごとにarticle要素で囲っているため、記事のタイトルをh1要素でマークアップしています。

<!--header-->
<header>

<div>
<hgroup>
<h1><a href="/">ブログタイトル</a></h1>
</hgroup>

(中略)

<!--各記事-->
<div class="entry">
<article><!--ここでリセットされる-->

<div class="entryBody">
<header>
<h1><a href="#">記事のタイトル</a></h1>

つまり、今まで記事内で使っていた見出しレベルを一つ上げることができます。
今までは、記事のタイトル、もしくはブログ(ページ)のタイトルのどちらかをh1・h2にしておいて、記事の小見出しにh3要素を使っていたところを、小見出しにh2要素が使えるようになるということです。

「も」と強調したのは別にそうする必要もないからですが、せっかくh1が使えるなら使ったほうがいいでしょう。
きっとHTML5採用に積極的なGoogleならそこで評価を下げるようなことはないと思っています。

HTML5に移行しようと考えている方は記事が増える度にh3→h2に変更する作業が増えてしまうので、できるだけ早く移行したほうがいいと思います。
※余談ですが、HTML5の文章構造は新聞に似てると考えてもらえるとわかりやすいかなと思います。

section要素について

section要素はCSSでの装飾やスクリプトの起点として使用することはできません。
そのような場合はsection内にdiv要素を別途使用するなどしましょう。

ちなみにmarginやpaddingの様なプロパティの指定は可能です。基本的に色に関するものはNGと考えてもらうといいと思います。
section要素はdiv要素のように使えるのかと思って便利そうだと思ってましたが、始めはなかなか使いどころに悩みますよ。

セクショニング・コンテンツについては「HTML5でつまずきやすいasideとsectionの使い方」が参考になると思います。

CSS3を使うとコードが長ったらしくなる

HTML5はCSS3やJavaScriptなどの技術も含めて~とよく言われるので、一応CSS3のことも。

通常CSS3を使えばコードが短くなると言われますが、現在はそうもいきません。
border-radius、box-shadowなどのプロパティは各ブラウザごと独自拡張のため、-moz-プロパティ名・-webkit-プロパティ名と余分に記述する必要があります。
更に一つのホームページとなるとパーツごとにデザインも変わり、それぞれをCSS3で書くということになると大変なコード量になってしまいます。

デザイン段階で角丸・影など同じ値にするなどして、なるべく一括で設定できるようにするか、必要に応じて画像化するなどしましょう。
ただ、HTML側のソースはシンプルに書くことができ、CSSを書くのに頭を悩ませることもないので、仕事で使おうと思ったらCSS3が勧告されてからバリバリ使うのがMost betterだと思います。

最後に

感謝の気持ちを込めて、HTML5で組む際に仕様やソースを参考にさせてもらったサイト様をまとめておきます。
HTML5に移行される際は参考にしてみてはどうでしょうか。

この記事をブックマーク・シェアする

この記事に関連する記事

カテゴリ

コメント

コメントを残す

コメント*

コメントリンクを nofollow free に設定することも出来ます。

誤字・脱字やリンク切れなどお気づきの点がございましたら@loop0429までよろしくお願いします。

この記事の先頭へ