HTML5でサイトが作られる機会が少しづつ増え、HTML5の新しいタグを覚えようというブログや書籍はよく見ますが、今までxhtml1.0で使われていたタグの中にも使い方の変更になったタグがいくつかあります。いつも使っていたタグなので何気なく使ってしまうこともありますが、まずは今まで使っていたタグの中で元々使われないタグや、昔から馴染みのあるタグで使い方の違ったものをまとめてみました。もちろん、HTML5は仕様がまだ確定していないので仕様変更などは随時あります。しかし、それを待っている間にも業務で利用できますので、常に変更をチェックしながらできるところから始めていきましょう。

解説：（有）ムーニーワークス　林 豊／田崎一成

---

●a要素

リンク設定をするaタグですがアンカーリンクの使い方と別ウインドウにリンクを設定するtarget属性の使い方が一部変更になっています。またリンクの設定する範囲がいままではdivタグやpタグなどのブロックレベル要素や複数のタグを囲ったりすることができませんでしたが、HTML5からはできるようになりました。
※なお、a要素は変更した内容が多いので今回は今までなじみのあったtarget="_blank"のみを取り上げましたが、他にもたくさんありますので基本が終わりましたら取り上げたいと思います

xhtml1.0でアンカーリンクを設定する場合は移動したい場所にa要素のname属性とid属性をセットし、別のa要素のhref属性でそれを参照していました。HTML5ではページのアンカーを表すためだけにa要素を使うことはできなくなり、name属性も廃止になりました。HTML5でアンカーを表す場合は、要素に関わらすid属性を指定することでアンカーを機能させることができるようになります。

リンクを別ウインドウで表示させる際によく使用していたtarget=_blankですが、実際は今でも使われておりましたが、strictでは非推奨となっており、非推奨タグを使いたくないという場合には別ウインドウで表示させたいときはJavascriptで別ウインドウでリンクを開く対応などをしておりましたが、HTML5ではtarget属性が非推奨ではなくなりました。

これがHTML5で便利になり、使い方の幅が広くなった変更です。HTML5からはブロック要素・インライン要素の分類はなくなりますので、a要素でdiv要素やp要素、複数の要素を囲むことが出来ます。ただし、a要素はトランスペアレントとして規定されているので、その親要素が許すコンテンツ・モデルを囲むことができるという点に注意する必要があります。また、親要素に関わらずa要素にはbutton要素やiframe要素などのインタラクティブ・コンテンツを入れることが出来ないので注意してください。ただし、これは今までもあまり使われていなかったのであまり気にする必要はないでしょう。

なお、コンテンツ・モデルやトランスペアレントについては下記の記事を参照ください。


●『コンテンツ・モデル』について｜HTML5でサイトをつくろう
● HTML5のカテゴリーについて｜HTML5でサイトをつくろう

●address要素

address要素は記述位置によって意味が変わるようになったようですが、こちらはあまり気にしなくていいでしょう。記事を表すarticle要素内で使用すれば記事著者への連絡先になり、直近の祖先がbody要素の場合ならWebサイト管理者への連絡先を意味することになります。これまでコピーライトなどもaddressタグを使用していた場合には、そちらは使用できなくなりましたので注意が必要です。

●b要素

b要素はもともと太文字を表示する見た目だけに特化した要素でしたが、HTML5からは文書内のキーワードや記事リードなどの強調や重要性を持たないが他と区別したいテキストを表す場合に使用するようになります。
以前は＜b＞タグは太字でしたが＜strong＞タグに切り替わって使われなくなり、重要性の持たない部分を太字にするには＜span＞タグにclassを設定して太字などにしていましたが、HTML5では＜b＞タグを使っても良いでしょう。

b要素を実際に使う場合は『strong要素・em要素・mark要素・cite要素』などの使用用途が定義されている要素に適さない場合に使用することになります。つまり、他の文章と区別したい場合はまずふさわしい要素を探し、どの要素にも当てはまらない場合の最終的な手段としてb要素を選択するというのが良いと思います。

●cite要素

cite要素はもともとあまり使われることが少なかったタグですが、情報の引用元タイトルやテーマ・作品を表す要素となります。これまでcite要素は情報元の書籍や論文などの著者名を制作者の解釈によって使用することがありましたが、HTML5から人名などをマークアップすることはできなくなりましたので注意が必要です。

●dl要素

dl要素は旧来のような定義リストという意味が無くなり、記述リストとして利用するようになります。定義リストにする場合はdt要素に定義語を表すdfn要素を用いる必要があります。
dt要素とdd要素は必ずしも1対1である必要はありません。1対複数もしくはその逆、複数対複数でも構いません。ただしdt要素とdd要素は必ず関連性があるようにする必要があります。

下記の記述の場合では補足情報と著者が『html5memo』になってしまう例です。

●hr要素

hr要素は旧来では罫線を表す要素でしたが、HTML5からは意味的な段落を表すようになります。ただし、セクションの区切りに使用することはできませんので注意が必要です。見た目の線をCSSでdisplay:noneとして隠すのなら使わない方がよいのかもしれません。

●i要素

i要素はイタリック体を表すだけの見た目だけに特化した要素でしたが、HTML5からは技術用語などの専門用語・他言語の慣用句、または思考・船舶の名前など、他の文章と区別しているテキスト範囲に使います。

●s要素

旧来は文章テキストの打ち消し線を引く要素でしたが、HTML5ではもう正確ではなくなった内容や関連性がなくなった内容を表す要素になります。

●small要素

small要素は小さい文字を表す要素でしたが、HTML5では『免責条項・著作権表記・警告』などの細目テキストを表すようになります。また、文章での注釈や補足としても使用することもできます。最もメジャーな使用例はページフッターの著作権表記のマークアップです。

●strong要素

strong要素は以前のような強調の意味が無くなり重要性という意味が加わりました。強調を表したいテキストにはem要素を使うようにします。また、入れ子にすることで重要度を高めることができます。

●u要素

下線を表していたu要素ですが、HTML5から中国語での固有名詞を明示するためのラベル付けや、単語のスペルミスに対してラベル付けする場合に利用されるようになりました。また、ハイパーリンクのテキスト(下線付きのテキスト)と見間違えることがあるので紛らわしい箇所での使用には注意する必要があります。

今回、変更された要素を調べていきましたが、気づくことも多く、こういった作業が勧告されるまでは重要だと思いました。今後も変更された要素や属性については『ブログHTML5でサイトをつくろう』の方で随時更新していきたいと思いますので、そちらもご覧ください。

なお、今回のサンプルはHTML5の新要素を使用しない形で行いましたが、HTML5の新要素でのサンプルはこちらにアップしております。
URL：http://www.html5-memo.com/mdn/mdn02/

またW3Cの「HTML5 における HTML4 からの変更点」についての日本語訳はこちらになります。
URL：W3C Working Draft