2.6 KiB
2.6 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
587d774e367417b2b2512a9f | Jump Straight to the Content Using the main Element | 0 | https://scrimba.com/c/cPp7zuE |
Description
main
, header
, footer
, nav
, article
, and section
, among others.
By default, a browser renders these elements similarly to the humble div
. However, using them where appropriate gives additional meaning in your markup. The tag name alone can indicate the type of information it contains, which adds semantic meaning to that content. Assistive technologies can access this information to provide better page summary or navigation options to their users.
The main
element is used to wrap (you guessed it) the main content, and there should be only one per page. It's meant to surround the information that's related to the central topic of your page. It's not meant to include items that repeat across pages, like navigation links or banners.
The main
tag also has an embedded landmark feature that assistive technology can use to quickly navigate to the main content. If you've ever seen a "Jump to Main Content" link at the top of a page, using a main tag automatically gives assistive devices that functionality.
Instructions
main
tags between the header
and footer
(covered in other challenges). Keep the main
tags empty for now.
Tests
tests:
- text: Your code should have one <code>main</code> tag.
testString: assert($('main').length == 1, 'Your code should have one <code>main</code> tag.');
- text: The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.
testString: assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi), 'The <code>main</code> tags should be between the closing <code>header</code> tag and the opening <code>footer</code> tag.');
Challenge Seed
<header>
<h1>Weapons of the Ninja</h1>
</header>
<footer></footer>
Solution
// solution required