スキルテスト: 高度な HTML テキスト

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

メモ: 以下の対話型エディターで解決に挑戦することができます。ただし、コードをダウンロードし、CodePen、jsFiddle、Glitchなどのオンラインツールを使用して作業することが便利な場合もあります。

行き詰まったら、助けを求めましょう。このページの最下部の評価またはさらなるヘルプの節をご覧ください。

課題 1

この課題では、指定された動物とその定義を、説明リストに変換していただきます。

完成例はこのようになるはずです。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

課題 2

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

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

完成例はこのようになります。

下記のライブコードを更新して、完成例を再現してみてください。

自分のエディターやオンラインエディターで作業する場合は、この課題の開始時点のものをダウンロードしましょう。

評価またはさらなるヘルプ

この例は、上記のインタラクティブエディターで練習することができます。

この作品を評価してほしい、行き詰っているので相談に乗ってほしいという方は次のようにしてください。

  1. 作品をオンラインの共有可能なエディター、例えば CodePen、jsFiddle、Glitch に置いてください。コードは自分で書いても、上の節でリンクされている開始時点のファイルを使用しても構いません。

  2. MDN Discourse forum 学習カテゴリーに評価や助けを依頼する記事を書いてください。投稿には以下を記載してください。

    • 「高度な HTML テキスト、スキルテスト 1 のための評価希望」のような説明的なタイトル。
    • すでに持っている内容や、私たちに望むことの詳細。例えば、行き詰まって助けが必要な場合や、評価を希望する場合などを指示してください。
    • 評価やヘルプが必要な例へのリンクを、オンライン共有エディターで示してください（上記のステップ 1 で述べたとおり）。コードを見ることができなければ、コーディングの問題で誰かを助けることはとても難しいのです。
    • 実際の課題または評価ページへのリンク。あなたが助けを求めている問題を探すことができます。