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 a word in another language.
<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

How many Tribal nations call Minnesota home? Type your answer, 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 4 Dakota communities in southern Minnesota.
There are 7 Anishinaabe communities in northern Minnesota.
Press Run.

3 Emphasize the Native language words

Use  to italicize Ojibwemowin in the Anishinaabe language paragraph, and Dakota in the Dakota history paragraph. Native language words deserve emphasis: they carry meaning that an English translation can miss.

🎮 Try it: update these two paragraphs.
Ojibwemowin, the Ojibwe language, is actively being revitalized in Minnesota communities today.
The Dakota people have lived in Minnesota for thousands of years, long before European contact.
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 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 Dakota list and the Anishinaabe heading.
</ul>
<hr>
<h2>Anishinaabe Nations</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>.
Minnesota is home to: 
4 Dakota nations in the south 
7 Anishinaabe nations in the north
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  around a Native language word, 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