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.

🤔 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.

✍️ Wrap the count in each of the two nation paragraphs in . Use the example below, then press ▶ Run.

<p>There are <strong>4 Dakota communities</strong> in southern Minnesota.</p>
<p>There are <strong>7 Anishinaabe communities</strong> in northern Minnesota.</p>

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.

✍️ Wrap each Native-language word in . Use the example below, then press ▶ Run.

<p><em>Ojibwemowin</em>, the Ojibwe language, is actively being revitalized in Minnesota communities today.</p>
<p>The <em>Dakota</em> people have lived in Minnesota for thousands of years, long before European contact.</p>

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.

✍️ Put an <hr> on its own line between sections. Use the example below, then press ▶ Run.

</ul>
<hr>
<h2>Anishinaabe Nations</h2>

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.

✍️ Add this short summary just above the Quick Facts <ol>. Use the example below, then press ▶ Run.

<p>Minnesota is home to:<br>
4 Dakota nations in the south<br>
7 Anishinaabe nations in the north</p>

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  around both counts,  around both Native-language words, at least one <hr> divider, and your   summary. Press Check my work when you are ready. This opens Stage 7 and lets your teacher see that you finished.

YOUR CODE

PREVIEW