このページはコミュニティーの尽力で英語から翻訳されました。MDN Web Docs コミュニティーについてもっと知り、仲間になるにはこちらから。

View in English Always switch to English

確認テスト: 高度な HTML テキスト

この確認テストの目的は、あなたが高度な意味的特徴をマークアップする有名ではない HTML 要素を使用する方法を理解しているかどうかを評価することです。

メモ: 手助けが必要な場合は、確認テスト使用ガイドをお読みください。また、コミュニケーションチャネルのいずれかを使用して、私たちに連絡することもできます。

高度なテキスト 1

この課題では、与えられた HTML に以下のような意味づけを追加していただきます。

この課題を完成させるには、次のようにしてください。

  • 2 つ目の段落をブロックレベルの引用にし、その引用がアクセシビリティから引用されたものであることを意味づけしましょう。
  • "HTML" と "CSS" を頭字語として意味づけし、その展開形をツールチップとして提供しましょう。
  • 化学式や日付に正しい意味づけを行い、正しく表示させるように、添字や上付き文字を使用しましょう。
  • 機械読み取り可能な日付とテキストの日付を意味づけしましょう。

この課題の出発点は次のようなものです。

この出発点の基盤となるコードは次の通りです。

html
<h1>高度なテキストの意味付け</h1>

<p>引用から始めましょう。</p>

<p>
  HTML、ハイパーテキストマークアップ言語は、正しく使用すればデフォルトでアクセシブルです。
</p>

<p>CSSは、ウェブページのアクセシビリティを向上させたり、低下させたりするためにも使用できます。</p>

<p>化学式: H2O(水)、C2H6O(エタノール)</p>

<p>
  日付: December 25th 2019(クリスマス)、November 2nd 2019(死者の日)。
</p>

更新されたコンテンツは次のようになります。

ここをクリックすると、模範解答を表示します。

完了した HTML は、次のようになるはずです。

html
<h1>高度なテキストの意味付け</h1>

<p>引用から始めましょう。</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Learn/Accessibility">
  <p>
    <abbr title="HyperText Markup Language">HTML</abbr>、ハイパーテキストマークアップ言語は、正しく使用すればデフォルトでアクセシブルです。
  </p>
</blockquote>

<p>
  <abbr title="Cascading Style Sheets">CSS</abbr>、カスケーディングスタイルシートは、ウェブページのアクセシビリティを向上させたり、低下させたりするためにも使用できます。
</p>

<p>
  化学式: H<sub>2</sub>O(水)、C<sub>2</sub>H<sub>6</sub>O(エタノール)
</p>

<p>
  日付:
  <time datetime="2019-12-25">December 25<sup>th</sup> 2019</time>
  (クリスマス)、
  <time datetime="2019-11-02">November 2<sup>nd</sup> 2019</time>(死者の日)。
</p>