スキルテスト: 高度な HTML テキスト
このスキルテストの目的は、あなたが高度な意味的特徴をマークアップする有名ではない HTML 要素を使用する方法を理解しているかどうかを評価することです。
メモ: 手助けが必要な場合は、スキルテスト使用ガイドをお読みください。また、コミュニケーションチャネルのいずれかを使用して、私たちに連絡することもできます。
課題 1
この課題では、与えられた HTML に以下のような意味づけを追加していただきます。
この課題を完成させるには、次のようにしてください。
- 2 つ目の段落をブロックレベルの引用にし、その引用がアクセシビリティから引用されたものであることを意味づけしましょう。
- "HTML" と "CSS" を頭字語として意味づけし、その展開形をツールチップとして提供しましょう。
- 化学式や日付に正しい意味づけを行い、正しく表示させるように、添字や上付き文字を使用しましょう。
- 機械読み取り可能な日付とテキストの日付を意味づけしましょう。
完成例はこのようになります。
html
<h1>Advanced text semantics</h1>
<p>Let's start with a quote:</p>
<p>
HTML, Hypertext Markup Language is by default accessible, if used correctly.
</p>
<p>CSS can also be used to make web pages more, or less, accessible.</p>
<p>Chemical Formulae: H2O (Water), C2H6O (Ethanol).</p>
<p>
Dates: December 25th 2019 (Christmas Day), November 2nd 2019 (Día de los
Muertos).
</p>
ここをクリックすると、模範解答を表示します。
完了した HTML は、次のようになるはずです。
html
<h1>Advanced text semantics</h1>
<p>Let's start with a quote:</p>
<blockquote cite="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">
<p>
<abbr title="HyperText Markup Language">HTML</abbr>, Hypertext Markup
Language is by default accessible, if used correctly.
</p>
</blockquote>
<p>
<abbr title="Cascading Style Sheets">CSS</abbr>, Cascading Style Sheets, can
also be used to make web pages more, or less, accessible.
</p>
<p>
Chemical Formulae: H<sub>2</sub>O (Water), C<sub>2</sub>H<sub>6</sub>O
(Ethanol).
</p>
<p>
Dates:
<time datetime="2019-12-25">December 25<sup>th</sup> 2019</time>
(Christmas Day),
<time datetime="2019-11-02">November 2<sup>nd</sup> 2019</time> (Día de los
Muertos).
</p>