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

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

特集記事

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

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

a要素

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

【XHTML】
<h1><a id="top" name="top">HTML5でサイトをつくろう</a></h1>
 ・
<a href="#top">トップへ戻る</a>

【HTML5】
<h1 id="top" name="top">HTML5でサイトをつくろう</h1>
 ・
<a href="#top">トップへ戻る</a>

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

<--新しいタブもしくは別ウインドウで表示-->
<a href="http://www.html5-memo.com/">target="_blank">HTML5でサイトをつくろう</a>

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

<div id="section">
<h1>HTML5で意味が変更された要素</h1>
<a href="http:/www.html5-meno.com">
<div class="topics">
<h2>HTML5でのa要素</h2>
<p>インライン要素・ブロック要素の分類はなくなります</p> </div>
</a>
</div>

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

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


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


address要素

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

<body>
<div id="footer">
<address>当ブログに関するご意見・ご感想は
<a href="mailto:bbb@xxx.com">bbb@xxx.com</a>まで。
</address>
<p><small>COPYRIGHT ©HTML5でサイトを作ろう ALLRIGHTS RESERVED.</small></p>
</div>
</body>

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

b要素

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

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

<p>新しくはじめたブログでは<b>Webデザインまとめ</b>の記事を中心に投稿していきます。</p>

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

cite要素

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

<p>この記事は<cite>徹底解説HTML5マークアップガイドブック</cite>を参考に勉強しております</p>

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

dl要素

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

<dl>
 <dt><dfn>HTML5でサイトをつくろう</dfn></dt>
 <dd>HTML5+CSS3を勉強しながら調べたサイト情報や・・・。</dd>
 <dt><dfn>Webデザインクリップ</dfn></dt>
 <dd>デザイン作成のヒントになるサイトや制作に便利な無料素材を・・・。</dd>
</dl>

定義リストにする場合はdt要素に定義語を表すdfn要素を用います
下記の記述の場合では補足情報と著者が『html5memo』になってしまう例です。
【間違った例】
<dl>
 <dt>記事タイトル</dt>
 <dd>HTML5での変更要素</dd>
 <dt>補足情報</dt>
 <dt>著者</dt>
 <dd>山田 太郎</dd>
</dl>

【正しい例】
<dl>
 <dt>記事タイトル</dt>
 <dd>HTML5での変更要素</dd>
 <dt>補足情報</dt>
 <dd>補足情報はありません。</dd>
 <dt>著者</dt>
 <dd>山田 太郎</dd>
</dl>

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

hr要素

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

<section>

<h3>目的</h3>
<p>当ブログではHTML5やCSS3の記事を中心に・・・</p>
<hr>
<p>新たなブログWebデザインクリップではWebに役立つ情報のまとめ記事を・・・</p>
</section>

HTML5からは意味的な段落を表すようになります

i要素

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

<p>flashのサイトと同じような動きの作成依頼があり、iPadなどでも閲覧できるように言われたので<i>jQuery</i>でもできるか調べてみる必要があります。</p>

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

s要素

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

<h1>オススメ本特集</h1>

<h2>3日間でマスターHTML5学習ブック</h2>
<p>要点をまとめた・・・・。</p>
<p><s>送料は全国一律500円</s></p>
<p>今なら送料無料でお届け!!</p>

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

small要素

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

<p><small>COPYRIGHT ©HTML5でサイトを作ろう ALLRIGHTS RESERVED.</small></p>

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

strong要素

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

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

u要素

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

<p>プロフィール欄に誤記がありました。『<u>2010年</u>』ではなく『2011年』になります。</p>

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

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

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


profile
●ハヤシユタカ 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークスを立ち上げ、WEBの企画・制作、セミナー講師やWEB運用の企業研修などを行う。また、WEB制作に役立つ情報を集めて制作のヒントになるブログを更新している。

●HTML5でサイトをつくろう:http://www.html5-memo.com/
●Webデザインクリップ:http://webdesignmatome.com/

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