インソースマーケティングデザイン
2019.05.17 コーディング
HTML5プロフェッショナル認定試験のお話（その1）
こんにちは！
いきなりですが、「HTML5プロフェッショナル認定試験 レベル1」を受験することになりました。（概要はこちらになります。）
普段はバックエンドとして業務を行っていますが、webのコンテンツを作成するには知っておいた方がいいかなと思う内容です。
今回はその中で、普段使用している要素は皆さんご存知だと思いますので、実業務ではあまり見かけないHTML5の要素（タグ）について紹介しようと思います。
※下記の要素は主に意味合いを持たせる為に使用する要素です。細かい属性については記述しておりません。
※ブラウザによっての使用可否はご確認下さい。
要素
説明
bdi
書字方向分離要素です。書式方向として、日本語や英語は左から右にテキストを読みますが、左から右へ読む言語（ヘブライ語など）の場合に使用します。
タグで囲まれた部分について、言語圏によって左右どちらから読むのか自動で補正してくれます。
タグで囲まれた部分について、言語圏によって左右どちらから読むのか自動で補正してくれます。
bdo
bdiと違い、強制的に右から左に読むテキストに変換します。
ruby
漢字などにルビを振るために使用します。
rtc要素を用いれば、複数のルビを振ることができます。
rtc要素を用いれば、複数のルビを振ることができます。
del
テキストの修正を行う場合使用します。
囲まれた部分は打ち消し線が付きます。
囲まれた部分は打ち消し線が付きます。
ins
後から挿入されたテキストの場合使用します。
囲まれた部分は下線が付きます。
囲まれた部分は下線が付きます。
hr
段落レベルのテーマのの変わり目を表す場合使用します。
水平（横方向）の罫線を引くことができます。
水平（横方向）の罫線を引くことができます。
cite
書名・作者名などを引用する場合に使用します。
囲まれた部分はイタリック体で表示されます。
囲まれた部分はイタリック体で表示されます。
blockquote
他の情報源からの引用・転載の文章の場合使用します。
引用元の情報にタイトルや著者名がある場合、cite要素でを使用するといいかもしれません。
引用元の情報にタイトルや著者名がある場合、cite要素でを使用するといいかもしれません。
q
改行を必要としない程度のテキストを引用・抜粋する場合に使用します。
長めの文章を引用・転載する場合は、blockquote要素を使用するといいかと思います。
長めの文章を引用・転載する場合は、blockquote要素を使用するといいかと思います。
pre
整形済みのテキストを表示する場合使用します。
ソースコードやアスキーアートなど、半角スペースや改行があるテキストをそのまま表示することができます。
ソースコードやアスキーアートなど、半角スペースや改行があるテキストをそのまま表示することができます。
mark
特定のテキストをハイライトして目立たせる場合に使用します。
strong要素などの強調の意味合いではなく、読者の注意を引くような場合に使用します。
strong要素などの強調の意味合いではなく、読者の注意を引くような場合に使用します。
s
打ち消し線を引く場合使用します。
ただし、特に意味合いを持たないのであればCSSで指定した方がいいようです。
ただし、特に意味合いを持たないのであればCSSで指定した方がいいようです。
dfn
定義の対象（何かの用語など）である場合に使用します。
abbr
囲まれた部分が、略語や頭文字を表す場合に使用します。
code
ソースコードを表したい場合に使用します。
インデントや改行をそのまま表示させる場合は、pre要素でで外側を囲みます。
インデントや改行をそのまま表示させる場合は、pre要素でで外側を囲みます。
samp
プログラムや何かシステムから出力された結果を表示する場合に使用します。
等幅フォントで表示されます。
等幅フォントで表示されます。
kbd
ユーザー入力を表す場合に使用します。
一般的にはキーボード入力ですが、音声入力やメニュー選択もユーザー入力として扱います。
samp要素を使えばシステムの出力に基づいた入力を表せます。
一般的にはキーボード入力ですが、音声入力やメニュー選択もユーザー入力として扱います。
samp要素を使えばシステムの出力に基づいた入力を表せます。
i
他の要素とは質が異なる（声や心の中で思ったことなど）を表す場合に使用します。
強調したい場合などは別の要素（em）などを使った方がいいかと思います。
強調したい場合などは別の要素（em）などを使った方がいいかと思います。
sub
下付き文字を表す場合に使用します。
化学式などの数値部分を表せます。
化学式などの数値部分を表せます。
sup
subとは逆に上付き文字を表す場合に使用します。
2乗などを表せます。
2乗などを表せます。
wbr
改行しても良い位置を示す場合に使用します。
wbrの前後は、同じテキストの内容とは見なされません。
wbrの前後は、同じテキストの内容とは見なされません。
他にも多々ありますが、このような要素があるんだなと、勉強して気が付けました。
（実際の記述したイメージを載せられればよかったのですが、時間がなくすみません。。）
HTML5はセマンティック・ウェブを意識したコーディングが必須となりますので、いい勉強になるなと感じております。
次回は資格取得したお話をする予定です！（できれば！）
