第2回 HTML5で使い方が変更されたタグをまとめよう
| HTML5でサイトが作られる機会が少しづつ増え、HTML5の新しいタグを覚えようというブログや書籍はよく見ますが、今までxhtml1.0で使われていたタグの中にも使い方の変更になったタグがいくつかあります。いつも使っていたタグなので何気なく使ってしまうこともありますが、まずは今まで使っていたタグの中で元々使われないタグや、昔から馴染みのあるタグで使い方の違ったものをまとめてみました。もちろん、HTML5は仕様がまだ確定していないので仕様変更などは随時あります。しかし、それを待っている間にも業務で利用できますので、常に変更をチェックしながらできるところから始めていきましょう。 解説：（有）ムーニーワークス 林 豊／田崎一成 |
●a要素
| リンク設定をするaタグですがアンカーリンクの使い方と別ウインドウにリンクを設定するtarget属性の使い方が一部変更になっています。またリンクの設定する範囲がいままではdivタグやpタグなどのブロックレベル要素や複数のタグを囲ったりすることができませんでしたが、HTML5からはできるようになりました。 |
【アンカーリンクとしての使い方が変わりました】
 |
| xhtml1.0でアンカーリンクを設定する場合は移動したい場所にa要素のname属性とid属性をセットし、別のa要素のhref属性でそれを参照していました。HTML5ではページのアンカーを表すためだけにa要素を使うことはできなくなり、name属性も廃止になりました。HTML5でアンカーを表す場合は、要素に関わらすid属性を指定することでアンカーを機能させることができるようになります。 |
【target属性が非推奨ではなくなりました】
 |
別ウインドウでリンクを開く際のtarget="_blank"が非推奨ではなくなりました
| リンクを別ウインドウで表示させる際によく使用していたtarget=_blankですが、実際は今でも使われておりましたが、strictでは非推奨となっており、非推奨タグを使いたくないという場合には別ウインドウで表示させたいときはJavascriptで別ウインドウでリンクを開く対応などをしておりましたが、HTML5ではtarget属性が非推奨ではなくなりました。 |
【div要素や複数のタグをまとめてa要素で囲むことができます】
 |
これがHTML5で便利になり、使い方の幅が広くなった変更です。HTML5からはブロック要素・インライン要素の分類はなくなりますので、a要素でdiv要素やp要素、複数の要素を囲むことが出来ます。ただし、a要素はトランスペアレントとして規定されているので、その親要素が許すコンテンツ・モデルを囲むことができるという点に注意する必要があります。また、親要素に関わらずa要素にはbutton要素やiframe要素などのインタラクティブ・コンテンツを入れることが出来ないので注意してください。ただし、これは今までもあまり使われていなかったのであまり気にする必要はないでしょう。
なお、コンテンツ・モデルやトランスペアレントについては下記の記事を参照ください。
●address要素
address要素は記述位置によって意味が変わるようになったようですが、こちらはあまり気にしなくていいでしょう。記事を表すarticle要素内で使用すれば記事著者への連絡先になり、直近の祖先がbody要素の場合ならWebサイト管理者への連絡先を意味することになります。これまでコピーライトなどもaddressタグを使用していた場合には、そちらは使用できなくなりましたので注意が必要です。
【コピーライト表記などには使われなくなりましたので注意しましょう】
 |
以前と同様に連絡先情報をマークアップする場合に使用しますが、HTML5では記事の著者・ウェブ管理者への連絡先情報に限られるようになります。 ※このことでクレジットや公開年月日などの情報を含めることはできなくなりました
●b要素
b要素はもともと太文字を表示する見た目だけに特化した要素でしたが、HTML5からは文書内のキーワードや記事リードなどの強調や重要性を持たないが他と区別したいテキストを表す場合に使用するようになります。以前は＜b＞タグは太字でしたが＜strong＞タグに切り替わって使われなくなり、重要性の持たない部分を太字にするには＜span＞タグにclassを設定して太字などにしていましたが、HTML5では＜b＞タグを使っても良いでしょう。b要素を実際に使う場合は『strong要素・em要素・mark要素・cite要素』などの使用用途が定義されている要素に適さない場合に使用することになります。つまり、他の文章と区別したい場合はまずふさわしい要素を探し、どの要素にも当てはまらない場合の最終的な手段としてb要素を選択するというのが良いと思います。
【b要素は他と区別したいテキスト部分に使います】
 |
重要性はあまり高くないですが、他と区別したいテキスト部分に使います
●cite要素
cite要素はもともとあまり使われることが少なかったタグですが、情報の引用元タイトルやテーマ・作品を表す要素となります。これまでcite要素は情報元の書籍や論文などの著者名を制作者の解釈によって使用することがありましたが、HTML5から人名などをマークアップすることはできなくなりましたので注意が必要です。
【情報の引用元タイトルやテーマ・作品を表す要素】
 |
情報の引用元タイトルやテーマ・作品を表しますが人名はマークアックできません
●dl要素
dl要素は旧来のような定義リストという意味が無くなり、記述リストとして利用するようになります。定義リストにする場合はdt要素に定義語を表すdfn要素を用いる必要があります。dt要素とdd要素は必ずしも1対1である必要はありません。1対複数もしくはその逆、複数対複数でも構いません。ただしdt要素とdd要素は必ず関連性があるようにする必要があります。
【用語の定義と用語の解説の組み合わせのリスト】
 |
定義リストにする場合はdt要素に定義語を表すdfn要素を用います
下記の記述の場合では補足情報と著者が『html5memo』になってしまう例です。
 |
情報がない場合に省略してはいけません。ただし、ここまでする必要性があるのかどうかは現状では定かではありません
●hr要素
hr要素は旧来では罫線を表す要素でしたが、HTML5からは意味的な段落を表すようになります。ただし、セクションの区切りに使用することはできませんので注意が必要です。見た目の線をCSSでdisplay:noneとして隠すのなら使わない方がよいのかもしれません。
【途中で話題を変える時の目印となる区切り線】
 |
HTML5からは意味的な段落を表すようになります
※サンプル内の誤植がありましたので修正いたしました（2011.11.30更新）
●i要素
i要素はイタリック体を表すだけの見た目だけに特化した要素でしたが、HTML5からは技術用語などの専門用語・他言語の慣用句、または思考・船舶の名前など、他の文章と区別しているテキスト範囲に使います。
【斜体で表示される文字列】
 |
イタリック体を表すだけではなくなりました
●s要素
旧来は文章テキストの打ち消し線を引く要素でしたが、HTML5ではもう正確ではなくなった内容や関連性がなくなった内容を表す要素になります。
【テキストに引く打ち消し線（取り消し線）】
 |
正確ではなくなった内容・関連性がなくなった内容を表します
●small要素
small要素は小さい文字を表す要素でしたが、HTML5では『免責条項・著作権表記・警告』などの細目テキストを表すようになります。また、文章での注釈や補足としても使用することもできます。最もメジャーな使用例はページフッターの著作権表記のマークアップです。
【免責条項や警告といった "細目" を表す要素に変更】
 |
免責条項・著作権表記・警告などの内容を表します
●strong要素
strong要素は以前のような強調の意味が無くなり重要性という意味が加われました。強調を表したいテキストにはem要素を使うようにします。また、入れ子にすることで重要度を高めることができます。
【重要性を伝えるテキストの範囲を表す要素】
 |
strong要素は重要性を伝えるテキストの範囲を表します
●u要素
下線を表していたu要素ですが、HTML5から中国語での固有名詞を明示するためのラベル付けや、単語のスペルミスに対してラベル付けする場合に利用されるようになりました。また、ハイパーリンクのテキスト(下線付きのテキスト)と見間違えることがあるので紛らわしい箇所での使用には注意する必要があります。
【重要性を伝えるテキストの範囲を表す要素】
 |
単語のスペルミスに対してラベル付けできますがあまり使うことはないでしょう
今回、変更された要素を調べていきましたが、気づくことも多く、こういった作業が勧告されるまでは重要だと思いました。今後も変更された要素や属性については『ブログHTML5でサイトをつくろう』の方で随時更新していきたいと思いますので、そちらもご覧ください。
なお今回のサンプルはHTML5の新要素を使用しない形で行いましたが、HTML5の新要素でのサンプルはこちらにアップしております。
URL：http://www.html5-memo.com/mdn/mdn02/
またW3Cの「HTML5 における HTML4 からの変更点」についての日本語訳はこちらになります。
URL：W3C Working Draft
次回につづく
 |
【林 豊】●1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークス（http://www.moonyworks.com/）を立ち上げWEBの企画・制作、セミナー講師やWEB運用の企業研修なども行っている。 またWEB制作に役立つ情報を集めて制作のヒントになるブログを更新している HTML5でサイトをつくろう：http://www.html5-memo.com/ Webデザインクリップ：http://webdesignmatome.com/ デジハリ・オンラインスクールにて自宅や会社のPCからいつでも「HTML5」を学べる講座を担当。ただいま全体の1/3の内容を無料で視聴できます。 HTML5入門講座：http://online.dhw.co.jp/course/html5/ |
