第2回 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"> と記述しなくても可能となります
<!--新しいタブもしくは別ウインドウで表示-->
<a href="http://www.html5-memo.com/" target="_blank">HTML5でサイトをつくろう</a>
別ウインドウでリンクを開く際のtarget="_blank"が非推奨ではなくなりました
<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のカテゴリーについて|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要素を選択するというのが良いと思います。
<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要素は必ず関連性があるようにする必要があります。
<dt><dfn>HTML5でサイトをつくろう</dfn></dt>
<dd>HTML5+CSS3を勉強しながら調べたサイト情報や・・・。</dd>
<dt><dfn>Webデザインクリップ</dfn></dt>
<dd>デザイン作成のヒントになるサイトや制作に便利な無料素材を・・・。</dd>
</dl>
定義リストにする場合はdt要素に定義語を表すdfn要素を用います
<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の新要素でのサンプルはこちらにアップしております。
URL:http://www.html5-memo.com/mdn/mdn02/
またW3Cの「HTML5 における HTML4 からの変更点」についての日本語訳はこちらになります。
URL:W3C Working Draft
●ハヤシユタカ 1999年よりデジタルハリウッドでWEBコースの講師を担当、2001年に有限会社ムーニーワークスを立ち上げ、WEBの企画・制作、セミナー講師やWEB運用の企業研修などを行う。また、WEB制作に役立つ情報を集めて制作のヒントになるブログを更新している。
●HTML5でサイトをつくろう:http://www.html5-memo.com/
●Webデザインクリップ:http://webdesignmatome.com/