「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験対策の備忘録。
今回は、試験範囲でもある「テキスト関連要素」のまとめ。
ちなみに、2014年10月28日にW3Cによって「HTML5」が勧告され、2016年11月1日には「HTML5.1」へ、そして2017年12月14日には「HTML5.2」が勧告されました。2019年5月になって、W3CとWHATWGは“HTML Living standard”をHTML技術仕様の唯一の標準規格とすると合意しました。これにより現在は、WHATWGによって策定された「HTML Living standard」が「HTML5/5.1/5.2」に代わるHTML技術仕様の標準規格となっているが、2021年04月現在「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の試験範囲のHTMLのバージョンは「HTML5.1(※5.0については、5.1で非奨励になったものも一部出題される可能性がある)」だそうなので、「HTML5.1」をもとに書いています。
実際に受験してきた時の結果と感想はこちら↓をご覧ください。
先日、「HTML5プロフェッショナル認定試験レベル1(ver.2.0)」の認定試験を受験してきました。 これまで20年以上、Webサイト制作の仕事に携わってきた私ですが、今回受験してみた率直な感想は... 「[…]
- 1 p要素（フローコンテンツ）
- 2 a要素（フロー/フレージング/インタラクティブ/トランスペアレント）
- 3 em要素（フロー/フレージングコンテンツ）
- 4 strong要素（フロー/フレージングコンテンツ）
- 5 small要素（フロー/フレージングコンテンツ）
- 6 mark要素（フロー/フレージングコンテンツ）
- 7 b要素（フロー/フレージングコンテンツ）
- 8 data要素（フロー/フレージングコンテンツ）
- 9 time要素（フロー/フレージングコンテンツ）
- 10 abbr要素（フロー/フレージングコンテンツ）
- 11 dfn要素（フロー/フレージングコンテンツ）
- 12 i要素（フロー/フレージングコンテンツ）
- 13 s要素（フロー/フレージングコンテンツ）
- 14 u要素（フロー/フレージングコンテンツ）
- 15 bdo要素（フロー/フレージングコンテンツ）
- 16 bdi要素（フロー/フレージングコンテンツ）
- 17 pre要素（フローコンテンツ）
- 18 code要素（フロー/フレージングコンテンツ）
- 19 kbd要素（フロー/フレージングコンテンツ）
- 20 samp要素（フロー/フレージングコンテンツ）
- 21 var要素（フロー/フレージングコンテンツ）
- 22 sup要素（フロー/フレージングコンテンツ）
- 23 sub要素（フロー/フレージングコンテンツ）
- 24 br要素（フロー/フレージングコンテンツ）
- 25 wbr要素（フロー/フレージングコンテンツ）
- 26 ins要素（フロー/フレージングコンテンツ/トランスペアレント）
- 27 del要素（フロー/フレージングコンテンツ/トランスペアレント）
- 28 blockquote要素（フローコンテンツ）
- 29 q要素（フロー/フレージングコンテンツ）
- 30 cite要素（フロー/フレージングコンテンツ）
p要素（フローコンテンツ）
p要素は、１つの段落(paragraph)をあらわす要素。
p要素の終了タグは、次の条件に当てはまる場合には省略可能。
p要素の直後に次の要素（主に旧分類でのブロックレベル要素）があるとき
section / article / aside / nav /
header / main / footer / div / h1～h6 / p
ul / ol / dl / blockquote / address / pre / hr
form / fieldset / table / figure / figcaption / details / memu
p要素が親要素の最後の内容であり、親要素が次の要素(object要素とcanvas要素を除くトランスペアレントの要素）ではないとき
a / ins / del / audio / video / map / noscript
a要素（フロー/フレージング/インタラクティブ/トランスペアレント）
a要素にはhref属性を指定すると、そのa要素の要素内容がリンク（ハイパーリンク）になる。href属性は必須ではないが、href属性を指定していない状態ではそれ以外の属性も指定できない。（※グローバル属性は指定可能）
a要素は、トランスペアレント。従って、HTML5のa要素は旧分類でのブロックレベル要素も要素内に含むことができるが、インタラクティブコンテンツとa要素自身は含むことができない。
a要素に指定できる属性
| 属性名 | 値の示すもの | 指定可能な値 |
| href | リンク先のアドレス | URL |
| target | リンク先を表示させるブラウジングコンテキスト（ウィンドウやタブなど）を指定 | ブラウジングコンテキスト名またはキーワード |
| download | リンク先がダウンロード用のファイルであることを示す | テキスト（ダウンロードする際のデフォルトのファイル名） |
| hreflang | リンク先の言語の種類 | BCP47言語タグ（ja, enなど） |
| type | リンク先のMIMEタイプ | MIMEタイプ |
| rel | 元文書とリンク先との関係（リンク先の文書は何か） | キーワード（空白文字区切り） |
| rev | リンク先から見た元文書との関係（リンク先の文書から見て元文書は何か） | キーワード（空白文字区切り） |
インタラクティブコンテンツ
a / img / video / audio / embed / input / textarea / button / select / label / keygen / details / iframe
em要素（フロー/フレージングコンテンツ）
em要素は、強調されている部分を示すための要素。em要素を入れ子にすることで、強調の度合いを強くすることができる。
strong要素（フロー/フレージングコンテンツ）
strong要素は、「重要」「重大」「緊急」「深刻」のいずれかであることを示す要素。
例えば、見出しや文章中の重要な部分を示すために使用したり、緊急の連絡や警告の部分で使用することもできる。
em要素と同様にstrong要素も入れ子にすることが可能で、それによって意味の度合いを強めることができる。
small要素（フロー/フレージングコンテンツ）
small要素は、印刷物であれば小さな文字で欄外に（メインコンテンツとは別に）記載されている注記のような情報をあらわすための要素。Copyrightの表記や免責事項、警告、法的規制、帰属などをあらわす部分で使用される。
※この要素は、ある程度の短い範囲に使用することを想定しており、セクション全体や複数の段落のような広範囲のテキストに対して使用すべきものではない。
mark要素（フロー/フレージングコンテンツ）
mark要素は、元々はそうはなっていないテキストの一部を、参照してもらいやすいように目立たせた部分であることを示す。
用途としては、単に注目してもらいたい箇所や、検索結果の一覧で、検索ワードを目立つようにする場合などに使用。
※スペルの間違っている箇所を示す場合は、u要素を使用する。
b要素（フロー/フレージングコンテンツ）
b要素は、その範囲のテキストに特別な意味合いを持たせることなく、実用的な目的で目立つようにさせるための要素。具体的には、レビュー記事における製品名、概要説明におけるキーワード、記事のリード文などで使用される。
※ほかにもっと適切な要素がある場合には、b要素は使用しない。たとえば、見出しであればh1～h6、強調であればem要素、重要/重大/緊急/深刻であればstrong要素、オリジナルの状態に手を加えて目立たせたい場合にはmark要素を使用する。
data要素（フロー/フレージングコンテンツ）
data要素は、通常の要素内容に加えて、要素内容を機械可読形式にしたデータも同時に提供するための要素。機械可読形式のデータは、必須属性であるvalue属性の値として指定する。
value属性の値には、MicroformatsやMicrodataの他、スクリプトのリテラル値なども指定可能。
※データが日付や時間である場合は、time要素を使用する。
time要素（フロー/フレージングコンテンツ）
time要素は、data要素を日時での使用に特化させた要素。つまり、機械読み取りが可能な日時のデータを提供する要素。
data要素はvalue属性があったが、time要素はなく、代わりにdatetime属性を使用する。
また、datetime要素は必須ではなく、datetime属性を使用しない場合はtime要素の要素内容自体を機械読み取り可能な形式で記入する。
| 年月日 | 2020-06-27 |
| 年月 | 2020-06 |
| 月日 | 06-27 |
| 年 | 2020 |
| 年週 | 2020-W40 |
| 時分 | 02:50 |
| 時分秒 | 02:50:00 |
| 時分秒マイクロ秒 | 02:50:00.525 |
| 年月日時分 | 2020-06-27T02:50 2020-06-27 02:50 |
| 年月日時分秒 | 2020-06-27T02:50:00 2020-06-27 02:50:00 |
| 年月日時分秒μ秒 | 2020-06-27T02:50:00.525 2020-06-27 02:50:00.525 |
| タイムゾーン | Z +0900 +09:00 |
| グローバル | 2020-06-27T02:50:00.525Z 2020-06-27 02:50:00.525+0900 2020-06-27T02:50:00.525Z 2020-06-27 02:50:00.525+09:00 |
| 時間分秒 | 2h 18m03s
PT2H18M3S |
abbr要素（フロー/フレージングコンテンツ）
abbr要素は、その部分が略語であることを示す要素。省略していない状態の言葉を示すにはtitle属性を使用する。
※title属性は補足情報を提供するためのグローバル属性だが、abbr要素で使用する場合は「省略していない状態の言葉を示す」以外の用途には使用できない点に注意。
※すべての略語をabbr要素としてマークアップする必要はない。
dfn要素（フロー/フレージングコンテンツ）
dfn要素は、その部分が定義の対象となっている用語であることを示す要素。たとえば、「Aは〇〇〇である。」というような内容の文章のAの部分をマークアップする際に使用する。
※dfn要素内にabbr要素のtitle属性が指定されている場合は、title属性の内容が定義部分となる。
i要素（フロー/フレージングコンテンツ）
i要素は、声や心の中で思ったことなど、他と区別したいテキストを表す際に使用します。
分類学上の名称、専門用語、他言語の慣用句、思考の内容、船の名前、 その他一般的に印刷される際にイタリック体となるようなテキストです。 その箇所が重要であるという意味や強調する役割はありません。
i要素を使用する際には、より適切な要素がないか検討することが推奨されています。
例えば、強勢する箇所を示す場合にはem要素、 用語の使用であることを定義する場合にはdfn要素のほうが、i要素よりふさわしいでしょう。
強調を表すには <em> 要素を使用。
重要性を表すには <strong> 要素を使用。
関連性を表すには <mark> 要素を使用。
書籍、演劇、音楽などの作品名を表すには <cite> 要素を使用。
用語の定義のインスタンスを表すには <dfn> 要素を使用。
s要素（フロー/フレージングコンテンツ）
s要素は、すでに正しい情報ではなくなった部分、関係のない情報となってしまった部分をあらわすための要素。
※文書の編集によって削除された部分を示す場合は、s要素を使用せずにdel要素を使用する。
u要素（フロー/フレージングコンテンツ）
u要素は、読み上げられたものを音声で聞いた場合にはわからないけれども、表示上は明確に示される、テキスト以外による注釈の付けられた範囲をあらわすための要素。用途は、中国語でテキストが固有名詞であることを示す場合や、スペルミスの箇所を示す場合などと限定的で、一般的なページで利用されることはほとんどない。
※また、u要素はデフォルトの表示が下線付きでリンクと同じになることから、それらが混同されるような場所での使用は避けることが推奨されている。
bdo要素（フロー/フレージングコンテンツ）
bdo要素は、Unicodeの双方向アルゴリズム（bidirectional algorithm)の文字表記の方向(direction)を上書き(override)して指定する要素。つまり、要素内容のテキストを左から右へと表示するのか、右から左へと表示するのかを、グローバル属性(dir属性)使って指定する要素。
※bdo要素を使用する場合、dir属性は必ず指定する必要がある。値には「ltr(left-to-right)／左から右」または「rtl(right-to-left)／右から左」のいずれかを指定しなければならない。
bdi要素（フロー/フレージングコンテンツ）
文字表記の方向が「左から右」のテキストの中に、逆方向のテキスト（アラビア語やヘブライ語）が混入した場合、Unicodeの双方向アルゴリズムによってその前後の文字の位置も入れ替わってしまうなどの影響が出る場合がある。
bdi要素は、そのようなUnicodeの双方向アルゴリズムの影響を受けないようにするために、特定の範囲のテキストだけを意図的に分離・独立(isolate)させる要素。
pre要素（フローコンテンツ）
pre要素は、その要素内容であるテキストが整形済み(preformatted)であることを示す要素。ここでいう整形とは、半角スペースやタブ、改行を使って表示を整えてあるという意味で、pre要素の要素内容は入力されている通りにそのまま表示される。（CSSを使用することで表示方法の詳細な設定が可能。）例えば、ソースコードやアスキーアート、メールの内容を掲載する際などに使用される。
※ソースコードをマークアップする際は、その部分がソースコードであることを示すcode要素をpre要素の中に入れ子にして使用する。また、コンピュータのシステムやプログラムから出力されたもの、またはそのサンプルであることを示すsamp要素を入れ子にして使用したりもする。
※HTML構文の場合、pre要素の開始タグ直後にある改行は取り除かれる。
code要素（フロー/フレージングコンテンツ）
code要素は、その部分がコンピュータで使用されるソースコードであることを示す要素。プログラムはもちろん、HTMLの要素名やファイル名といったコンピュータが認識可能な文字列全般に対して使用される。
kbd要素（フロー/フレージングコンテンツ）
kbd要素は、その部分がユーザーが入力する内容であることを示す要素。通常はキーボードからの入力を想定しているが、それ以外からの入力に対しても使用可能。
samp要素（フロー/フレージングコンテンツ）
samp要素は、その部分がコンピュータのシステムやプログラムから出力されたもの、またはそのサンプルであることを示す要素。
var要素（フロー/フレージングコンテンツ）
var要素は、その部分が変数(variable)であることを示す要素。プログラミング言語や数式での変数のほか、定数をあらわす識別子、関数のパラメータ、各種プレースホルダーのような部分でも使用可能。
sup要素（フロー/フレージングコンテンツ）
sup要素は、その部分が上付き文字(superscript)であることを示す要素。
<p>
<var>E</var> = <var>m</var><var>c</var><sup>2</sup>
</p>
E = mc2
sub要素（フロー/フレージングコンテンツ）
sup要素は、その部分が下付き文字(subscript)であることを示す要素。
<p>
水は、H<sub>2</sub>Oです。
</p>
br要素（フロー/フレージングコンテンツ）
br要素は、その位置で改行させるための空要素。詩や住所の表記などのように、改行がそのコンテンツの一部であるような部分で使用する。従って、余白をとるために使用したり、段落のように見せるための改行として使用するものではない。
wbr要素（フロー/フレージングコンテンツ）
通常、英単語やURLなどはいくら長くてもその途中で行を折り返すことはない。（端に収まりきらなくても途中では改行されない。）空要素であるwbr要素は、文字列の途中にそのタグを挿入することで、英単語やURLの途中でも行を折り返すことができるようにする要素。
ins要素（フロー/フレージングコンテンツ/トランスペアレント）
ins要素は、文書に追加した部分(inserted text)を示すために使用する。
| 属性名 | 値の示すもの | 指定可能な値 |
| cite | 追加に関する説明のあるページへのリンク | URL |
| datetime | 追加した日時 | 日時をあらわす文字列 |
del要素（フロー/フレージングコンテンツ/トランスペアレント）
ins要素は、文書から削除した部分(deleted text)を示すために使用する。
| 属性名 | 値の示すもの | 指定可能な値 |
| cite | 追加に関する説明のあるページへのリンク | URL |
| datetime | 追加した日時 | 日時をあらわす文字列 |
blockquote要素（フローコンテンツ）
blockquote要素は、その要素内容が引用してきた文章であることを示す要素。
HTMLにはもともと引用文を示すためのブロックレベル要素の方がblockquote要素で、インライン要素の場合はq要素を使用する。
必要に応じて、要素内にfooter要素やcite要素を配置して引用文に関する情報（題名や作者名、参照先へのリンクなど）を加えることも可能。
引用した文章がWeb上のものであれば、cite属性の値として引用元のURLを指定することができる。ただし、この属性はユーザーに引用元へのリンクを提供することを意図したものでなく、スクリプトなどで内部的に使用することを想定している。
| 属性名 | 値の示すもの | 指定可能な値 |
| cite | 引用元や詳しい情報へのリンク | URL |
blockquote要素内に入れる引用文は、オリジナルの文章と完全に一致している必要はなく、内容の一部を省略したり、注釈を加えることも認められている。ただし、そのような部分は手を加えていることが明確にわかるようにしておく必要がある。
q要素（フロー/フレージングコンテンツ）
blockquote要素は、その要素内容が引用してきた文章であることを示す要素。
HTMLにはもともと引用文を示すためのブロックレベル要素の方がblockquote要素で、インライン要素の場合はq要素を使用する。
引用した文章がWeb上のものであれば、cite属性の値として引用元のURLを指定することができる。ただし、この属性はユーザーに引用元へのリンクを提供することを意図したものでなく、スクリプトなどで内部的に使用することを想定している。
| 属性名 | 値の示すもの | 指定可能な値 |
| cite | 引用元や詳しい情報へのリンク | URL |
q要素にはブラウザが引用符をつけて表示することになっているので、q要素を使用するのであれば引用文の前後に引用符はつけないようにする。表示させる引用符の種類はCSSで指定可能。
ただし、引用文だからといって、必ずしもq要素でマークアップする必要はなく、q要素にせずに、自分で文章の中に引用符（「」など）を埋め込んで引用文を示すことも認められている。
cite要素（フロー/フレージングコンテンツ）
cite要素は、創作物の出典・出所をあらわすための要素。要素内容には、作品の「タイトル」「作者の名前（団体や組織も可）」「参照先のURL」「参照先を示す略語」のいずれかを含めなければならない。
●ここでいう創作物の例
本／エッセイ／詩／絵／彫刻／論文／楽譜／脚本／映画／テレビ番組／歌／演劇／オペラ／ミュージカル／展覧会／Webサイト／Webページ／ブログの記事／コメント／フォーラムの投稿やコメント／ツイート／プログラム／ゲーム／意見書／声明／訴訟事件の報告書など
※cite要素は、人物の名前などには使用しない。