UNIT 1 • STAGE 6 OF 7

Making Your Content Stand Out

Use emphasis, dividers, and polish to complete your page

UNIT
STEP 1

Four Elements That Add Polish

Your page is looking great! In this stage we'll add four small but powerful HTML elements that make content clearer, more readable, and more meaningful.

<strong>
Bold, important text
<em>
Italic, emphasized text
<hr>

<br>
Adds a line break inside a paragraph
STEP 2

<strong> - Bold Important Text

The <strong> tag bolds text AND signals to screen readers that this content is especially important. There's a key difference between <strong> and just styling text bold with CSS: <strong> adds meaning, not just appearance. A screen reader (software that reads pages aloud) will actually emphasize the word when it reads it - just like you'd raise your voice on an important word when speaking.

👉 Find your Dakota Nations <p> and update it: <p>There are <strong>4 Dakota communities</strong> in southern Minnesota.</p>
👉 Find your Anishinaabe <p> and update it: <p>There are <strong>7 Anishinaabe communities</strong> in northern Minnesota.</p>

🌐 Accessibility Note

<strong> is better than just making text bold with CSS because screen readers will announce it as "important" - making your page more accessible.

STEP 3

<em> - Italic Emphasis

The <em> tag (emphasis) italicizes text. Use it for words you'd stress if speaking aloud - like terms in another language.

👉 Find your Anishinaabe language paragraph and update it: <p><em>Ojibwemowin</em> - the Ojibwe language - is actively being revitalized in Minnesota communities today.</p>
👉 Also try wrapping "Dakota" and "Anishinaabe" in <em> on their first use: <p>The <em>Dakota</em> people have lived in Minnesota for thousands of years...</p>

Native language words and terms deserve emphasis - they carry meaning that English translations can miss.

STEP 4

<hr> - Horizontal Rule (Divider)

The <hr> tag draws a horizontal line across the page. It's a self-closing tag - meaning it has no closing tag. You write just <hr> and the browser does the rest. Self-closing tags make sense for elements that don't wrap around content - a divider line doesn't hold any text, so there's nothing to open and close around.

👉 Add an <hr> between your Dakota and Anishinaabe sections: </ul>

<hr>

<h2>Anishinaabe Nations</h2>
👉 Also add one before your Quick Facts section: <hr>
<h2>Quick Facts</h2>

See how the dividers break up the page into clear sections?

STEP 5

<br> - Line Break

The <br> tag creates a line break inside a paragraph without starting a whole new paragraph block. It's also self-closing. Use it sparingly - it's best for situations where you need short lines separated (like an address, a poem, or a brief two-line label). If you find yourself using many <br> tags in a row to add spacing, that's a sign CSS would do the job better.

👉 Add this before your Quick Facts <ol>: <p>Minnesota is home to:
<br>
4 Dakota nations in the south<br>
7 Anishinaabe nations in the north</p>
STEP 6

Review & Challenge

Look at your full page in the preview. Make sure you have:

  • At least two uses of <strong> for key terms
  • At least one use of <em> for a Native language word
  • At least one <hr> divider between sections
  • At least two clickable <a> links to Tribal nation sites

Challenge: Add your name to the page with a small author credit:

👉 Add this at the very bottom inside <body>: <hr>
<p><em>Page created by: Your Name Here</em></p>

🌟 Stage 6 Complete!

Your page is almost done! In the final stage we'll add a meta description, write HTML comments, and celebrate what you've built.

Code Editor
Live Preview