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. Take a look at what you have so far.

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

🤔 Quick check before you go on

Putting a list inside a list item is called what? Type one word, 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

✍️ Change each Dakota <li> so it holds a nested county list. Not sure how? Use the example below, then press ▶ Run.

<ul>
  <li>Shakopee Mdewakanton Sioux Community
    <ul><li>Scott County</li></ul>
  </li>
  <li>Prairie Island Indian Community
    <ul><li>Goodhue County</li></ul>
  </li>
  <li>Lower Sioux Indian Community
    <ul><li>Redwood County</li></ul>
  </li>
  <li>Upper Sioux Community
    <ul><li>Yellow Medicine County</li></ul>
  </li>
</ul>

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

✍️ Give each of the seven Anishinaabe <li> items a nested region list. Use the example below if you need it, then press ▶ Run.

<ul>
  <li>White Earth Nation
    <ul><li>Northwestern MN</li></ul>
  </li>
  <li>Red Lake Nation
    <ul><li>Northern MN</li></ul>
  </li>
  <li>Leech Lake Band of Ojibwe
    <ul><li>North-central MN</li></ul>
  </li>
  <li>Fond du Lac Band of Lake Superior Chippewa
    <ul><li>Northeastern MN</li></ul>
  </li>
  <li>Bois Forte Band
    <ul><li>Northeastern MN</li></ul>
  </li>
  <li>Grand Portage Band of Lake Superior Chippewa
    <ul><li>Cook County</li></ul>
  </li>
  <li>Mille Lacs Band of Ojibwe
    <ul><li>Central MN</li></ul>
  </li>
</ul>

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.

👀 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