Unit 1 · Stage 3

Nesting & Organizing Information

Your page already lists the Dakota and Anishinaabe nations. Now you will put a small list inside each nation so it can show its county or region as a sub-bullet. Play in the editor, or press 👀 Type it with me for a guide. (pause on a highlighted word to see what it does)

1 What you built already

Your editor starts with everything from Stage 2: a bullet list for the four Dakota nations, a bullet list for the seven Anishinaabe nations, and a numbered Quick Facts list. Look at the preview and read what is there.

💡 In this stage you will go one level deeper by placing a list inside a list item, a technique called nesting.

2 What is nesting?

Nesting means placing one HTML element inside another. You have already done this: your <li> items live inside a <ul>. Now you will put a whole new <ul> inside a single <li> so each nation can hold its own detail.

What this code means

a <ul> inside an <li>: A list that lives inside one list item. The inner list becomes a sub-bullet under that item. Think of folders inside folders: a folder can hold more folders, and an <li> can hold another <ul>.
indentation: Adding spaces so each deeper level sits further to the right. The browser does not need it, but it makes your nested code much easier to read and fix.
closing tags: The inner list must close with </ul> before the outer </li> closes, so the detail stays tucked inside its nation.

Here is the shape you are aiming for. The nation name comes first, then a small nested list holds its place:

The nesting shape

<li>Nation Name <ul><li>Place</li></ul> </li>: One nation, with its county or region nested underneath as a sub-bullet.

🎮 Try it: in the editor, pick one Dakota <li> and, right before its </li>, add <ul><li>a county</li></ul>. Press ▶ Run and watch the sub-bullet 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.

3 Nest a county into each Dakota nation

Find your Dakota <ul> in the editor. Give each nation a nested <ul> with one <li> for its county. Remember to close the inner </ul> before the nation's </li>.

Shakopee Mdewakanton Sioux CommunityScott County

Prairie Island Indian CommunityGoodhue County

Lower Sioux Indian CommunityRedwood County

Upper Sioux CommunityYellow Medicine County

🎮 Try it: update each of the four Dakota <li> items so it holds a nested <ul><li>County</li></ul>. Press Run and check that each county appears indented under its nation.

4 Nest a region into each Anishinaabe nation

Do the same for the Anishinaabe list. Each nation gets a nested list holding its county or region.

White Earth NationNorthwestern MN

Red Lake NationNorthern MN

Leech Lake Band of OjibweNorth-central MN

Fond du Lac Band of Lake Superior ChippewaNortheastern MN

Bois Forte BandNortheastern MN

Grand Portage Band of Lake Superior ChippewaCook County

Mille Lacs Band of OjibweCentral MN

🎮 Try it: update each of the seven Anishinaabe <li> items so it holds a nested <ul><li>Region</li></ul>. Press Run.

5 Why structure matters

You have just built a page whose shape mirrors how the information really fits together. Minnesota has two cultural groups, each group holds several nations, and each nation sits in a county or region. Good HTML respects those real relationships.

Structure and accessibility

nested lists: When your code mirrors how information is organized, it is easier to read, easier to update, and easier for browsers to display correctly.
screen readers: Screen readers are software that reads a page aloud for people with visual impairments. Clear nesting lets them announce that a county belongs under a nation, so proper structure makes the web more welcoming for everyone.

🎮 Try it: in the preview, notice how each county sits indented under its nation. That indent is the browser showing the nesting you wrote.

6 Make it your own

Add one more detail to a nation as a second nested <li>: a website, a fun fact, or something you learned. Just add another <li> inside the same nested <ul>.

<li>Mille Lacs Band of Ojibwe
  <ul>
    <li>Central MN</li>
    <li>millelacsband.com</li>
  </ul>
</li>

✓ Finish this stage

To complete Stage 3, each nation should hold a nested list with its county or region. Press Check my work when you are ready. This opens Stage 4 and lets your teacher see that you finished.

YOUR CODE

PREVIEW