1. HOME
  2. フロントエンド
  3. おさらいHTML5【Webクリエイター能力認定試験対策】

おさらいHTML5【Webクリエイター能力認定試験対策】

フロントエンド

後期からクリエイター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クイックリファレンス


HTML
備忘録
Webクリエイター能力認定試験

この記事を読んだ方におすすめ