そろそろ「HTML5を勉強しよう」「HTML5やらなきゃな」という方が増えてきているんじゃないでしょうか？？というか、もう使えるようになってないと生き残れないですよね？？今さらではあるんですが、HTML5になって追加されたタグ、廃止されたタグ、用途が変わったタグの一覧を書いていこうかなと思います。
HTML5で追加になったタグは次の通りです。 全部で31タグです。
追加タグ一覧
| タグ名 | 読み方 | 概要 |
|---|---|---|
| <section> | セクション | 文書内のセクション |
| <nav> | ナビ | 文書内のナビゲーション部分 |
| <article> | アーティクル | 文書内の独立した記事 |
| <aside> | アサイド | 補足的な情報 |
| <hgroup> | エイチグループ/ヘディンググループ | 見出しのグループ化 |
| <header> | ヘッダー | ヘッダー部分 |
| <footer> | フッター | フッター部分 |
| <figure> | フィギュア | 図表などのフロー・コンテンツ |
| <figcaption> | フィグキャプション/フィギュア・キャプション | 図表などのキャプション |
| <time> | タイム | 日時 |
| <mark> | マーク | ハイライト |
| <ruby> | ルビー | ルビ |
| <rt> | アールティ/ルビー・テキスト | ルビとして振るテキスト |
| <rp> | アールピー/ルビー・パレンセシス | かっこで囲むルビ |
| <bdi> | ビーディーアイ | 双方向アルゴリズムからの分離 |
| <wbr> | ダブリュービーアール／ワード・ブレーク | 改行可能箇所 |
| <embed> | エンベッド | 外部コンテンツの埋め込み |
| <video> | ビデオ | 動画ファイルの埋め込み |
| <audio> | オーディオ | 音声ファイルの埋め込み |
| <source> | ソース | 動画、音声のリソースのアドレス |
| <track> | トラック | メディア要素のテキスト・トラック |
| <canvas> | キャンバス | グラフィック描画用のキャンバス |
| <datalist> | データリスト | 入力候補値のリスト |
| <keygen> | キージェン/キー・ジェネレーター | 暗号鍵の送信 |
| <output> | アウトプット | 計算結果の表示 |
| <progress> | プログレス | 作業の進捗度の表示 |
| <meter> | メーター | 割合 |
| <details> | ディテイルズ | 詳細部分の表示、非表示 |
| <summary> | サマリー | details要素の要約 |
| <command> | コマンド | コマンド |
<section>とか<article>なんかは雰囲気でどう使えばいいか判るけど、<command>やら<progress>とかは概要を見ても、
「だから、どーいうことだってばよ！？」
ってなっちゃいますね・・・。HTML5を使い続けて行けば其の内判るようになるのかな??
概要変更タグ+属性
<a>タグ変更点１.「アンカー設定（同一ページ内リンク）」
XHTMLでアンカーを設定するときは以下のようにしていましたが、
<h1><a id="top" name="top">アンカー着地点</a></h1> ～中略～ <a href="#top">このページの先頭へ</a>
HTML5でコーディングする時はname属性を指定しなくてもOKとなりました
<h1><a id="top">アンカー着地点</a></h1> ～中略～ <a href="#top">このページの先頭へ</a>
<a>タグ変更点2.「target属性が非推奨じゃなくなった」
これは嬉しいですね!!
<a href="http://study.guidebook.jp/web_create/" target="_blank">別窓で開く</a>
<a>タグ変更点3.「複数のコンテンツを囲める様になった」
<section>
<article>
<a href="http://study.guidebook.jp/web_create/">
<h1>記事のタイトル</h1>
<div class="ph"><img alt="画像" src="○○.jpg" width="100" height="100" /></div>
<div class="txt">ブロック要素の中に入れなくてもOK!!</div>
</a>
</article>
</section>
こいつは驚きの新機能ですね!!というか、そもそもHTML5には「ブロック」「インライン」というタグの振り分けじゃなく、もっと細分化されてXHTMLより遥かに文書構造がきちっとしたタグ分類の振り分けがされております。なので<div>やらを<a>で囲んでも文法エラーにならないのです。 とは言え、最初は違和感感じちゃいますね(笑)。
<address>タグ変更点.「コピーライトで使っちゃダメ」
僕はそんなにコピーライトを表記するのに<address>タグは使って無かったので個人的にはそんなに衝撃を受けないんですが、とりあえずXHTML以前の<address>タグのメジャーな使われ方として
<address>© 2013 WEBCreate PRACTICE!!<address>
という感じでコピーライトをマークアップしていたと思うんですが、<address>タグの概要が、記事を表すarticle要素内で使用すれば記事著者への連絡先になり、直近の祖先がbody要素の場合ならWebサイト管理者への連絡先を意味するというように変更されました。じゃあ、今後コピーライトをマークアップするタグはどうしたらいいんじゃい!!って話になると思うのですが、単純に<p>であったりでも良いし<h4>あたりでも良いし、要は文書の位置づけ的な間違いがなければ何でも良いんだろうと思います。僕はもっぱら<small>を使用しています。
<small>© 2013 WEBCreate PRACTICE!!</small>
<b>タグ変更点.「非推奨からの華麗なる復帰」
<b>タグはもともと太文字を表示する見た目だけに特化した要素でしたが、CSSとHTMLの役割上非推奨になっていたタグの一つです。ガラケーのサイトでは使われていましたがPCサイトの場合は単純に太くしたいならCSSのfont-weight、キーワードとしての重要性も持たせたいなら<strong>で、という感じで完璧に<b>という存在は消えかかってました。HTML5からは文書内のキーワードや記事リードなどの強調や重要性を持たないが他と区別したいテキストを表す場合に使用するようになります。実際に使う場合は
『strong要素・em要素・mark要素・cite要素』
などの使用用途が定義されている要素に適さない場合に使用することになります。
<dl>タグ変更点.「定義リスト→記述リストへ」
XHTMLの時は定義リストという概念で料金表などで使われていましたがHTML5から記述リストという概要に変更されました。従来の定義リストとしての使用も可能ですが、定義リストにする場合はdt要素に定義語を表すdfn要素を用いる必要があります。すこし面倒な感じになってしまいました。
<dl> <dt>ジョン・レノン</dt> <dd>１９４０年１０月９日リヴァプール生まれ。</dd> <dt>ポール・マッカートニー</dt> <dd>１９４２年６月１８日リヴァプール生まれ。</dd> </dl>
上記はHTML5では定義リストにならず記述リストになってしまいます。HTML5で定義リストにしたい場合は
<dl> <dt><dfn>ジョン・レノン</dfn></dt> <dd>１９４０年１０月９日リヴァプール生まれ。</dd> <dt><dfn>ポール・マッカートニー</dfn></dt> <dd>１９４２年６月１８日リヴァプール生まれ。</dd> </dl>
としなければいけません。
<hr>タグ変更点.「単なる水平線→話題の区切り線」
hr要素は水平線を表す要素でしたが、HTML5からは意味的な段落を表すようになります。ただし、セクションの区切りに使用することはできませんので注意が必要です。たとえば<section>のなかで話題の切り替えがある時などに使われるようです。
<i>タグ変更点.「非推奨からの華麗なる復帰その2」
<i>タグはもともと斜体文字を表示する見た目だけに特化した要素でしたが、CSSとHTMLの役割上非推奨になっていたタグの一つです。ガラケーのサイトでは使われていましたがPCサイトの場合は単純に太くしたいならCSSのfont-style、キーワードとしての重要性も持たせたいなら<em>で、という感じで完璧に<i>という存在は消えかかってました。HTML5からは技術用語などの専門用語・他言語の慣用句、または思考・船舶の名前など、他の文章と区別しているテキスト範囲に使用するみたいです。
<strong>タグ変更点.「強調→重要性という概要へ」
<strong>は強調の意味が無くなり重要性という意味合いに変更されました。強調を表したいテキストにはem要素を使うようにします。また、入れ子にすることで重要度を高めることができます。
<strong> おれはジャイ*ン、<strong>ガキ大将</strong> </strong>
まだ何個か仕様が変わったタグがあるんですがとりあえず今回はこれくらいで・・・。
また機会があったら続きを書こうと思います。
