Unit 1 · Stage 6

Making Your Content Stand Out

Your page is full of great information. Now you will add small touches that make it clearer and more meaningful: bold for important words, italics for emphasis, and lines that divide your page into sections. Play in the editor, or press 👀 Type it with me for a guide. (pause on a highlighted word to see what it does)

1 Four elements that add polish

This stage uses four small elements. Two of them wrap around text to give it meaning, and two of them stand alone to shape the layout.

What this code means

 ... : Marks text as important. The browser shows it in bold, and a screen reader announces it with extra stress, like raising your voice on a key word.
 ... : Adds emphasis. The browser shows it in italics. Use it for a word you would stress when reading aloud, such as the name of a nation or people.
<hr>: A horizontal rule: a divider line across the page. It is self-closing, so there is no </hr>. Use it to break your page into sections.
 : A line break inside a paragraph. It is also self-closing, with no . Use it when you want a new line without starting a new paragraph.

💡 A self-closing tag does not wrap around any text, so it has no closing tag. You write just <hr> or   and the browser does the rest.

🎮 Try it: in the editor, wrap any word in  and another in , then press ▶ Run to see bold and italics appear.

🤔 Quick check before you go on

Which tag makes text bold and important? Type it, then press Submit to unlock the next steps.

2 Bold the important numbers

Wrap the count in each nations paragraph in  so the number stands out. This does more than make it bold: it tells a screen reader that the words are important, and the reader announces them with extra stress.

Why strong, not just bold

 vs bold styling: Making text bold with CSS only changes how it looks. also adds meaning, so screen readers announce it as important. Meaning plus appearance beats appearance alone.

🎮 Try it: update the two count paragraphs.
There are 3 Sioux and Dakota Nations in North Dakota.
There are 2 MHA Nation and Anishinaabe communities in North Dakota.
Press Run.

3 Emphasize the nation and people names

Use  to italicize Dakota and Lakota in the history paragraph, and Mandan, Hidatsa, and Arikara in the MHA Nation paragraph. These nation and people names deserve emphasis: they carry meaning that a general label can miss.

🎮 Try it: update these two paragraphs.
... are Dakota and Lakota peoples ...
The Three Affiliated Tribes, the Mandan, Hidatsa, and Arikara, ...
Press Run.

4 Add dividers between sections

An <hr> draws a line across the page to separate one section from the next. Remember it is self-closing: just <hr>, with no closing tag. Add one after the Sioux and Dakota nations list, one before each About section, and one before Quick Facts.

🎮 Try it: put an <hr> on its own line in each spot, for example between the Sioux and Dakota list and the MHA heading.
</ul>
<hr>
<h2>MHA Nation and Anishinaabe</h2>
Press Run.

5 A multi-line paragraph with br

A   starts a new line inside a paragraph without beginning a whole new block. It is self-closing too. Add a short summary just before your Quick Facts list.

Use br sparingly

When to reach for  : Good for short lines that belong together, like an address or a two line label. If you need many tags in a row for spacing, CSS is the better tool.

🎮 Try it: add this just before the Quick Facts <ol>.
North Dakota is home to: 
3 Sioux and Dakota Nations 
2 MHA Nation and Anishinaabe communities
Press Run.

6 Make it your own

Sign your work. At the very bottom of the body, add a divider and a small author credit in italics with your name.

<hr>
<p><em>Page created by: Your Name Here</em></p>

✓ Finish this stage

To complete Stage 6, your page needs a  around an important number, an  for emphasis, and at least one <hr> divider. Press Check my work when you are ready. This opens Stage 7 and lets your teacher see that you finished.

YOUR CODE

PREVIEW