【MdN Design Interactive連載連載 第2回目】xhtmlからHTML5で使い方が変更された要素（タグ）のまとめ
- カテゴリー ゼロからHTML5サイト制作
MdN Design Interactive連載記事連動ページ第2回が公開されました。
HTML5でサイトが作られる機会が少しづつでてきて、HTML5の新しいタグを覚えようということで新要素の紹介するブログや書籍はよく見ますが、いままでxhtml1.0で使われていたタグの中にも使い方の変更になったタグがいくつかあります。
いつも使っていたタグなので何気なくそのまま使ってしまうこともありますので、まずは今まで使っていたタグの中で元々使われないタグもありますが、昔から馴染みのあるタグで使い方の違ったものをまとめてみました。
ただし、HTML5は仕様がまだ確定しておりませんので随時仕様変更などがあります。しかしそれを待っている間にもどんどん業務で使われていっていますので、変更を常にチェックしながらできるところから始めていきましょう。
※連載の方ではまだ新要素の説明をしていないのでサンプルに新要素を使っておりませんが、こちらではサンプルに新要素を追加したパターンで作成しております。
MdN Design Interactive連載記事連動ページ第2回はこちら
HTML5で変更された要素
a要素：アンカーリンクとしての使い方が変わりました
旧来の方法でアンカーを表す場合は移動したい場所にa要素のname属性とid属性をセットし、別のa要素のhref属性でそれを参照していました。
<h1><a id="top" name="top">HTML5でサイトをつくろう</a></h1> ・ ・ ・ <a href="#top">トップへ戻る</a>
xhtml1.0でアンカーリンクを設定する場合は移動したい場所にa要素のname属性とid属性をセットし、別のa要素のhref属性でそれを参照していました。
HTML5ではページのアンカーを表すためだけにa要素を使うことはできなくなり、name属性も廃止になりました。HTML5でアンカーを表す場合は、要素に関わらすid属性を指定することでアンカーを機能させることができるようになります。
[2011.12.01追記]
name属性ですが正式にはxhtml1.0でも廃止になりましたが、製作の中ではHTML4→ｘｈｔｍｌ1.0の際に無難にid、nameを併記する形が多かったので今回はこのように書きましたが正しくはhtml4ではname属性、htxmlではid属性で設定するというのが仕様になります。誤解の与えるような記述になりましてすみません。
<h1 id="top">HTML5でサイトをつくろう</h1> ・ ・ ・ <a href="#top">トップへ戻る</a>
a要素：target属性が非推奨ではなくなりました
以前から使う場面も多かったtarget属性が非推奨ではなくなりました。
リンクを別ウインドウで表示させる際によく使用していたtarget=_blankですが、実際は今でも使われておりましたが、strictでは非推奨となっており、非推奨タグを使いたくないという場合には別ウインドウで表示させたいときはJavascriptで別ウインドウでリンクを開く対応などをしておりましたが、HTML5ではtarget属性が非推奨ではなくなりました。
<--新しいタブもしくは別ウィンドウで表示--> <a href="http://www.html5-memo.com/" target="_blank">HTML5でサイトをつくろう</a>
a要素についてはかなり変更内容が多くなっているのでいつかa要素のみのエントリーをまとめるようにしますが、まずは皆さんよく使われているtarget=”_blank”についてを書きました。
a要素：div要素や複数のタグをまとめてa要素で囲むことができます
これがHTML5で便利になったというか、使い方の幅が広くなった変更です。
HTML5からはブロック要素・インライン要素の分類はなくなりますので、a要素でsection要素やdiv要素やp要素、複数の要素を囲むことが出来ます。
ただし、a要素はトランスペアレントとして規定されているので、その親要素が許すコンテンツ・モデルを囲むことができるという点に注意する必要があります。また、親要素に関わらずa要素にはbutton要素やiframe要素などのインタラクティブ・コンテンツを入れることが出来ないので注意してください。ただしこれはいままでもあまり使っていなかったのであまり気にする必要はないとおもいます。
<article> <h1>HTML5で意味が変更された要素</h1> <a href="http://example.jp"> <section> <h2>HTML5でのa要素</h2> <p>インライン要素・ブロック要素の分類はなくなりますので・・・</p> </section> </a> ・ ・ </article>
尚、コンテンツ・モデルやトランスペアレントについては下記の記事を参照ください。
address要素
以前と同様に連絡先情報をマークアップする場合に使用しますが、HTML5では記事の著者・ウェブ管理者への連絡先情報に限られるようになります。このことで旧来のようにクレジットや公開年月日などの情報を含めることはできなくなりました。
address要素は記述位置によって意味が変わるようになったようですが、こちらはあまり気にしなくてよいとおもいます。記事を表すarticle要素内で使用すれば記事著者への連絡先になり、直近の祖先がbody要素の場合ならウェブサイト管理者への連絡先を意味することになります。
いままでコピーライトなどもaddressタグを使用していた場合にはそちらはできなくなりましたので注意が必要です。
<body>
<h1>HTML5でサイトをつくろう</h1>
・
・
<article>
<h1>HTML5について考える</h1>
・
・
<footer>
<address>
Write by : <a href="mailto:html5memo@example.com">html5memo</a>
</address>
</footer>
<article>
<footer>
<address>
当ブログに関するご意見・ご感想は<a href="mailto:html5memo@example.com">html5memo@example.com</a>まで。
</address>
<p><small>COPYRIGHT © HTML5でサイトを作ろう AllRIGHTS RESERVED.</small></p>
</footer>
</body>
b要素
もともとb要素は太文字を表示する見た目だけに特化した要素でしたが、HTML5からは文書内のキーワードや記事リードなどの強調や重要性を持たないが他と区別したいテキストを表す場合に使用するようになります。
以前は<b>タグは太字でしたが<strong>タグに切り替わって使われなくなり、重要性の持たない部分を太字にするには< span>タグにclassを設定して太字などにしていましたがHTML5では<b>タグを使ってもよいとおもいます。
b要素を実際に使う場合は『strong要素・em要素・mark要素・cite要素』などの使用用途が定義されている要素に適さない場合に使用することになります。つまり、他の文章と区別したい場合はまずふさわしい要素を探し、どの要素にも当てはまらない場合の最終的な手段としてb要素を選択するというのが良いと思います。
<p>新しくはじめたブログでは<b>Webデザインまとめ</b>の記事を中心に投稿していきます。</p>
cite要素
cite要素はもともとあまり使われることが少なかったタグですが、情報の引用元タイトルやテーマ・作品を表す要素となります。これまでcite要素は情報元の書籍や論文などの著者名を制作者の解釈によって使用することがありましたが、HTML5から人名などをマークアップすることはできなくなりましたので注意が必要です。
<p>友人に薦められた漫画の<cite>ドリフタ－ズ</cite>は、設定や表現が斬新でとても面白かった。</p>
dl要素
旧来のような定義リストという意味が無くなり、記述リストとして利用するようになります。定義リストにする場合はdt要素に定義語を表すdfn要素を用いる必要があります。
<dl> <dt><dfn>HTML5でサイトをつくろう</dfn></dt> <dd>HTML5＋CC3 を勉強しながら調べたサイト情報や・・・。</dd> <dt><dfn>Webデザインクリップ</dfn></dt> <dd>デザイン作成のヒントになるサイトや制作に便利な無料素材を・・・。</dd> </dl>
dt要素とdd要素は必ずしも1対1である必要はありません。1対複数もしくはその逆、複数対複数でも構いません。ただしdt要素とdd要素は必ず関連性があるようにします。下記の記述の場合は補足情報と著者が『html5memo』になってしまいます。
間違った例
<dl> <dt>記事タイトル</dt> <dd>HTML5での変更要素</dd> <dt>補足情報</dt> <dt>著者</dt> <dd>山田 太郎</dd> </dl>
この場合は補足情報の下にdd要素で『補足情報はありません』などの記述をします。
ただしここまでする必要があるのかどうかは現状はまだわかりません。
正しい例
<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>
i要素
i要素はイタリック体を現すだけの見た目だけに特化した要素でしたが、HTML5からは技術用語などの専門用語・他言語の慣用句、または思考・船舶の名前など、他の文章と区別しているテキスト範囲に使います。
<p>HTML5でのコーディング案件でFlashに近いような表現を求められ、 <i>jQuery</i>でできるかなと考えた。</p>
s要素
旧来は文章テキストの打ち消し線を引く要素でしたが、HTML5ではもう正確ではなくなった内容・関連性がなくなった内容を表す要素になります。
<article>
<h1>オススメ本特集</h1>
<section>
<h2>3日間でマスターHTML5学習ブック</h2>
<p>要点をまとめた・・・・。</p>
<p><s>送料は全国一律500円</s></p>
<p>今なら送料無料でお届け！！</p>
</section>
</article>
small要素
small要素は小さい文字を表す要素でしたが、HTML5では『免責条項・著作権表記・警告』などの細目テキストを表すようになります。また、文章での注釈や補足としても使用することもできます。最もメジャーな使用例はページフッターの著作権表記のマークアップです。
<p><small>COPYRIGHT © HTML5でサイトを作ろう AllRIGHTS RESERVED.</small></p>
strong要素
strong要素は重要性を伝えるテキストの範囲を表します。strong要素は以前のような強調の意味が無くなり重要性という意味が加われました。強調を表したいテキストにはem要素を使うようにします。また、入れ子にすることで重要度を高めることができます。
<p> <strong>strong要素は以前のような強調の意味が無くなり<strong>重要性を表すテキスト</strong>になります。</strong> </p>
u要素
下線を表していたu要素ですが、HTML5から中国語での固有名詞を明示するためのラベル付けや、単語のスペルミスに対してラベル付けする場合に利用されるようになりました。また、ハイパーリンクのテキスト(下線付きのテキスト)と見間違えることがあるので紛らわしい箇所での使用には注意する必要があります。
<p>プロフィール欄に誤記がありました。『<u>1970年</u>』ではなく『1977年』になります。</p>
今回、変更された要素を調べていきましたが、気づくことも多くこういった作業が勧告されるまでは重要だなと実感しました。今後も変更された要素や属性については記事にしていきたいと思いますのでどうぞよろしくお願いいたします。
W3Cの「HTML5 における HTML4 からの変更点」についての日本語訳はこちらになりますのでこちらもチェックしておくと良いと思います。
http://standards.mitsue.co.jp/resources/w3c/TR/html5-diff/
MdN Design Interactive連載記事連動ページ第2回はこちら
あとONETOPIで『iphoneサイト制作』のキュレーターもさせていただいておりますのでこちらもよかったらみてください。
https://twitter.com/#!/iphonesite1topi
この記事を書いた人
著者 : ハヤシユタカ
2001年、有限会社ムーニーワークスを設立。WEB制作の他、書籍執筆、セミナー講演、企業研修などを行う。また、クリエイター育成機関デジタルハリウッドでは1999年より講師として本科WEBデザイナーコースやデジタルデザインコースを担当。 詳しいプロフィールはこちら
HTML5の「コンテンツ・モデル」についてまとめました【MdN連載第7回目】
HTML5の勉強を始めた際に使い方に迷う新要素「article要素」の基本と使い方をまとめてみました【MdN連載第5回目】