3.0 KiB
3.0 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
587d7787367417b2b2512aa1 | Make Screen Reader Navigation Easier with the header Landmark | 0 | https://scrimba.com/c/czVwWSv |
Description
header
tag. It's used to wrap introductory information or navigation links for its parent tag, and works well around content that's repeated at the top on multiple pages.
header
shares the embedded landmark feature you saw with main
, allowing assistive technologies to quickly navigate to that content.
Noteheader
is meant for use in the body
tag of your HTML document. This is different than the head
element, which contains the page's title, meta information, etc.
Instructions
div
that currently contains the h1
to a header
tag instead.
Tests
tests:
- text: Your code should have one <code>header</code> tag.
testString: assert($('header').length == 1, 'Your code should have one <code>header</code> tag.');
- text: Your <code>header</code> tags should wrap around the <code>h1</code>.
testString: assert($('header').children('h1').length == 1, 'Your <code>header</code> tags should wrap around the <code>h1</code>.');
- text: Your code should not have any <code>div</code> tags.
testString: assert($('div').length == 0, 'Your code should not have any <code>div</code> tags.');
- text: Make sure your <code>header</code> element has a closing tag.
testString: assert(code.match(/<\/header>/g) && code.match(/<\/header>/g).length === code.match(/<header>/g).length, 'Make sure your <code>header</code> element has a closing tag.');
Challenge Seed
<body>
<div>
<h1>Training with Camper Cat</h1>
</div>
<main>
<section id="stealth">
<h2>Stealth & Agility Training</h2>
<article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
<article><h3>No training is NP-complete without parkour</h3></article>
</section>
<section id="combat">
<h2>Combat Training</h2>
<article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
<article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
</section>
<section id="weapons">
<h2>Weapons Training</h2>
<article><h3>Swords: the best tool to literally divide and conquer</h3></article>
<article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
</section>
</main>
</body>
Solution
// solution required