後期からクリエイターWebクリエイター能力認定試験」の勉強が始まり、
HTML5から定義が変わったタグについての問題が多々出てきます。
その勉強も兼ねて、HTML5で加わった新たなタグと定義が変わったものについてまとめます。
新しく追加されたタグ（抜粋版）
新しく追加されたタグをいくつかあげてみます（よく使いそうなもの）
もちろん追加されたものはこれだけじゃないです。まだあります。
| header | ページや各セクションのヘッダーを表す場合に使用する。 |
|---|---|
| nav | ナビゲーションであることを示す際に使用する。ナビゲーションとは、ウェブサイト内の他のページへのリンクや、ページ内リンクなどのこと。 |
| section | その部分が、一つのセクションであることを示す際に使用します。中には見出しh1~h6が入る。 |
| article | 内容が単体で完結するセクションに使用する。 例：ブログでの一つの記事 |
| aside | メインコンテンツとは関係性の低い、余談・補足情報のセクションであることを示す時に使用する。 |
| footer | セクションのフッターを表す場合に使用する。セクションの末尾に使われることが多いがそうじゃなくてもOK |
| figure | 図表（イラスト・図・写真）を表す場合に使用する。 |
| figcaption | 図表のキャプションを表す場合に使用する。 |
| time | 正確な日付や時刻を示す。 |
| mark | 文書内の該当テキストを目立たせる（ハイライトさせる） |
| ruby,rt,rp | テキストにルビをふる際に使用する。 rtはルビのテキストを指定。rpはルビのテキストを囲むカッコなどの記号を指定。 ruby対応ブラウザではrpは無視されて、テキストの上にルビが表示される。 未対応ブラウザではテキストごとの後ろにrpで囲まれたルビは表示される。例：文(も)字(じ) |
| video | 動画を再生する際に使用する。 |
| audio | 音声を再生する際に使用する。srcで音声ファイルを指定する。 |
| canvas | 図形を描く際に使用する。画像などではなくJavascriptで動的にイメージを生成することができる。 |
定義が変わったタグ色々
本題です。次は定義が変わったタグの前後の意味を比較しながら紹介します。
| 要素 | 以前までの定義 | HTML5からの定義 |
|---|---|---|
| strong | 強い強調 | 強い重要。strong内にstrongを入れることで重要性の強さも分けれる。 |
| em | 強調 | アクセントをつける箇所を示す。em内にemを入れることで強勢の強さも分けれる。 |
| b | 太字 | 文章内のキーワードなど他と区別したい語句、テキスト |
| i | 斜体 | 声や心の中で思ったことなど、他と区別したい語句、テキスト |
| small | 小さくテキストを表示する | 注釈や細めに使用する。 |
| hr | 水平線、区切り線 | 段落内での区切り。セッション内での区切り。 |
| s | 取り消し線 | 今現在正確ではない内容 |
| menu | メニューリスト | コマンドリスト |
| dl | 定義リスト | 記述リスト |
| dd | 用語の説明 | 記述グループの説明など |
| dt | 定義用語 | 記述グループの用語 |
| cite | 出典・参照先 | 作品のタイトル |
よく使われていそうな要素を抜粋して紹介しました。
上のものだけを見ても、すごく小さなことですが、定義が変わっています。
全体的にスタイル的な定義から、意味がしっかりと定義されたものに変わっている印象です。
上にはあげませんでしたが、＜adress＞はコピーライトとして使用されていましたが、現在は＜small＞などを使うなど、意味が廃止されたものもあります。
＜dl＞＜dt＞＜dd＞のように【定義】から【記述】といった小さな違いもあるので、気をつけなければいけない点でもあるかと思います。
追加要素も、変更要素も上記以外にもたくさんあります。
この記事を書くにあたって参考させていただいたサイトに詳しくたくさん載っていますのでそちらもどうぞ。
参考サイト
HTMLクイックリファレンス
この記事を読んだ方におすすめ
