デザインとグラフィックの総合情報サイト
[エムディエヌ・デザイン・インタラクティブ]

第2回 HTML5で使い方が変更されたタグをまとめよう

特集記事

title02




第2回 HTML5で使い方が変更されたタグをまとめよう


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

解説:(有)ムーニーワークス 林 豊/田崎一成


a要素

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


アンカーリンクとしての使い方が変わりました

02_01
HTML5ではアンカー設定の際に <a id="top"> と記述しなくても可能となります

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

【target属性が非推奨ではなくなりました】

02_02s

別ウインドウでリンクを開く際のtarget="_blank"が非推奨ではなくなりました



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

【div要素や複数のタグをまとめてa要素で囲むことができます】

02_03s
このように複数のタグをまとめてリンク設定することができます

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

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


address要素


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

【コピーライト表記などには使われなくなりましたので注意しましょう】

02_04s

以前と同様に連絡先情報をマークアップする場合に使用しますが、HTML5では記事の著者・ウェブ管理者への連絡先情報に限られるようになります。 ※このことでクレジットや公開年月日などの情報を含めることはできなくなりました



b要素


b要素はもともと太文字を表示する見た目だけに特化した要素でしたが、HTML5からは文書内のキーワードや記事リードなどの強調や重要性を持たないが他と区別したいテキストを表す場合に使用するようになります。以前は<b>タグは太字でしたが<strong>タグに切り替わって使われなくなり、重要性の持たない部分を太字にするには<span>タグにclassを設定して太字などにしていましたが、HTML5では<b>タグを使っても良いでしょう。b要素を実際に使う場合は『strong要素・em要素・mark要素・cite要素』などの使用用途が定義されている要素に適さない場合に使用することになります。つまり、他の文章と区別したい場合はまずふさわしい要素を探し、どの要素にも当てはまらない場合の最終的な手段としてb要素を選択するというのが良いと思います。

【b要素は他と区別したいテキスト部分に使います】

02_05s

重要性はあまり高くないですが、他と区別したいテキスト部分に使います



cite要素


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

【情報の引用元タイトルやテーマ・作品を表す要素】

02_06s

情報の引用元タイトルやテーマ・作品を表しますが人名はマークアックできません



dl要素


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

【用語の定義と用語の解説の組み合わせのリスト】

02_07s

定義リストにする場合はdt要素に定義語を表すdfn要素を用います


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

02_08

情報がない場合に省略してはいけません。ただし、ここまでする必要性があるのかどうかは現状では定かではありません



hr要素


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

【途中で話題を変える時の目印となる区切り線】

02_09

HTML5からは意味的な段落を表すようになります
※サンプル内の誤植がありましたので修正いたしました(2011.11.30更新)



i要素


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

【斜体で表示される文字列】

02_10s

イタリック体を表すだけではなくなりました



s要素


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

【テキストに引く打ち消し線(取り消し線)】

02_11s

正確ではなくなった内容・関連性がなくなった内容を表します



small要素


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

【免責条項や警告といった "細目" を表す要素に変更】

02_12s

免責条項・著作権表記・警告などの内容を表します



strong要素


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

【重要性を伝えるテキストの範囲を表す要素】

02_13

strong要素は重要性を伝えるテキストの範囲を表します



u要素


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

【重要性を伝えるテキストの範囲を表す要素】

02_14s

単語のスペルミスに対してラベル付けできますがあまり使うことはないでしょう




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

なお今回のサンプルはHTML5の新要素を使用しない形で行いましたが、HTML5の新要素でのサンプルはこちらにアップしております。
URL:http://www.html5-memo.com/mdn/mdn02/
またW3Cの「HTML5 における HTML4 からの変更点」についての日本語訳はこちらになります。
URL:W3C Working Draft

次回につづく




profile 【林 豊】●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/



twitter facebook google+ このエントリーをはてなブックマークに追加 RSS