93 lines
3.2 KiB
Markdown
93 lines
3.2 KiB
Markdown
---
|
|
id: 587d774d367417b2b2512a9e
|
|
title: Use Headings to Show Hierarchical Relationships of Content
|
|
challengeType: 0
|
|
videoUrl: 'https://scrimba.com/c/cqVEktm'
|
|
forumTopicId: 301026
|
|
dashedName: use-headings-to-show-hierarchical-relationships-of-content
|
|
---
|
|
|
|
# --description--
|
|
|
|
Headings (`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--
|
|
|
|
Camper Cat wants a page on his site dedicated to becoming a ninja. Help him fix the headings so his markup gives semantic meaning to the content, and shows the proper parent-child relationships of his sections. Change all the `h5` tags to the proper heading level to indicate they are subsections of the `h2` ones. Use `h3` tags for the purpose.
|
|
|
|
# --hints--
|
|
|
|
Your code should have 6 `h3` tags.
|
|
|
|
```js
|
|
assert($('h3').length === 6);
|
|
```
|
|
|
|
Your code should have 6 `h3` closing tags.
|
|
|
|
```js
|
|
assert((code.match(/\/h3/g) || []).length === 6);
|
|
```
|
|
|
|
Your code should not have any `h5` tags.
|
|
|
|
```js
|
|
assert($('h5').length === 0);
|
|
```
|
|
|
|
Your code should not have any `h5` closing tags.
|
|
|
|
```js
|
|
assert(/\/h5/.test(code) === false);
|
|
```
|
|
|
|
# --seed--
|
|
|
|
## --seed-contents--
|
|
|
|
```html
|
|
<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>
|
|
```
|
|
|
|
# --solutions--
|
|
|
|
```html
|
|
<h1>How to Become a Ninja</h1>
|
|
<main>
|
|
<h2>Learn the Art of Moving Stealthily</h2>
|
|
<h3>How to Hide in Plain Sight</h3>
|
|
<h3>How to Climb a Wall</h3>
|
|
|
|
<h2>Learn the Art of Battle</h2>
|
|
<h3>How to Strengthen your Body</h3>
|
|
<h3>How to Fight like a Ninja</h3>
|
|
|
|
<h2>Learn the Art of Living with Honor</h2>
|
|
<h3>How to Breathe Properly</h3>
|
|
<h3>How to Simplify your Life</h3>
|
|
</main>
|
|
```
|