2.9 KiB

Raw Blame History

id	title	challengeType	videoUrl	forumTopicId	dashedName
587d774e367417b2b2512a9f	main 要素を使用してコンテンツに直接ジャンプする	0	https://scrimba.com/c/cPp7zuE	301018	jump-straight-to-the-content-using-the-main-element

--description--

HTML5 では、より多くの選択肢を開発者に提供すると同時にアクセシビリティ機能も組み込んだ新しい要素が導入されました。それらのタグとして特に main、header、footer、nav、article、section があります。

デフォルトでは、ブラウザはこれらの要素を特に装飾のない div と同じように表示します。しかし、これらを適切に使用することでマークアップに追加の意味を与えることができます。タグ名だけでそこに含まれる情報の種類を示すことができるので、そのコンテンツにセマンティックな意味を追加することができます。アシスティブ・テクノロジー (支援技術) はこの情報にアクセスして、より良いページ要約やナビゲーションオプションをユーザーに提供することができます。

main 要素は (名前から推測できる通り) メインコンテンツを囲うために使用されます。この要素は各ページに1つだけであるべきです。これはページの中心的なトピックに関連する情報を囲むためのものです。ナビゲーションリンクやバナーなど、ページをまたいで繰り返す項目を含めるべきではありません。

main タグには、支援技術でメインコンテンツに素早く移動できるようにするための目印となる機能も埋め込まれています。ページの上部に「メインコンテンツへ移動」といったリンクがあるのを見たことがあるでしょうか。main タグを使用すれば、自動的に支援機器にその機能を提供することができます。

--instructions--

Camper Cat は忍者の武器に関するページのアイデアを持っています。 (他のチャレンジで説明する) header と footer の間に、main の開始タグと終了タグを追加して、彼のマークアップ作業を手伝ってあげてください。今のところ main タグは空のままにしておいてください。

--hints--

コードには main タグが1つ必要です。

assert($('main').length == 1);

main タグは、header の終了タグと footer の開始タグの間でなければなりません。

assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));

--seed--

--seed-contents--

<header>
  <h1>Weapons of the Ninja</h1>
</header>



<footer></footer>

--solutions--

<header>
  <h1>Weapons of the Ninja</h1>
</header>
<main>

</main>
<footer></footer>

2.9 KiB Raw Blame History