3.4 KiB
3.4 KiB
id | title | challengeType | videoUrl |
---|---|---|---|
587d774d367417b2b2512a9e | Use Headings to Show Hierarchical Relationships of Content | 0 | https://scrimba.com/c/cqVEktm |
Description
h1
through h6
elements) are workhorse tags that help provide structure and labeling to your content. Screen readers can be set to read only the headings on a page so the user gets a summary. This means it is important for the heading tags in your markup to have semantic meaning and relate to each other, not be picked merely for their size values.
Semantic meaning means that the tag you use around content indicates the type of information it contains.
If you were writing a paper with an introduction, a body, and a conclusion, it wouldn't make much sense to put the conclusion as a subsection of the body in your outline. It should be its own section. Similarly, the heading tags in a webpage need to go in order and indicate the hierarchical relationships of your content.
Headings with equal (or higher) rank start new implied sections, headings with lower rank start subsections of the previous one.
As an example, a page with an h2
element followed by several subsections labeled with h4
tags would confuse a screen reader user. With six choices, it's tempting to use a tag because it looks better in a browser, but you can use CSS to edit the relative sizing.
One final point, each page should always have one (and only one) h1
element, which is the main subject of your content. This and the other headings are used in part by search engines to understand the topic of the page.
Instructions
h5
tags to the proper heading level to indicate they are subsections of the h2
ones. Use h3
tags for the purpose.
Tests
tests:
- text: Your code should have 6 <code>h3</code> tags.
testString: assert($("h3").length === 6, 'Your code should have 6 <code>h3</code> tags.');
- text: Your code should have 6 <code>h3</code> closing tags.
testString: assert((code.match(/\/h3/g) || []).length===6,'Your code should have 6 <code>h3</code> closing tags.');
- text: Your code should not have any <code>h5</code> tags.
testString: assert($("h5").length === 0, "Your code should not have any <code>h5</code> tags.");
- text: Your code should not have any <code>h5</code> closing tags.
testString: assert(/\/h5/.test(code)===false, 'Your code should not have any <code>h5</code> closing tags');
Challenge Seed
<h1>How to Become a Ninja</h1>
<main>
<h2>Learn the Art of Moving Stealthily</h2>
<h5>How to Hide in Plain Sight</h5>
<h5>How to Climb a Wall</h5>
<h2>Learn the Art of Battle</h2>
<h5>How to Strengthen your Body</h5>
<h5>How to Fight like a Ninja</h5>
<h2>Learn the Art of Living with Honor</h2>
<h5>How to Breathe Properly</h5>
<h5>How to Simplify your Life</h5>
</main>
Solution
// solution required