Unit 1 · Stage 3

Nesting & Organizing Information

Your page already lists the Lakota nations and the Dakota and Nakota nations. Now you will put a small list inside each nation so it can show its county 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 six Lakota nations, a bullet list for the three Dakota and Nakota 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 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 Lakota nation

Find your Lakota <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>.

Cheyenne River Sioux TribeDewey and Ziebach Counties

Crow Creek Sioux TribeBuffalo County

Lower Brule Sioux TribeLyman County

Oglala Sioux TribeOglala Lakota County

Rosebud Sioux TribeTodd County

Standing Rock Sioux TribeCorson and Sioux Counties

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

<ul>
  <li>Cheyenne River Sioux Tribe
    <ul><li>Dewey and Ziebach Counties</li></ul>
  </li>
  <li>Crow Creek Sioux Tribe
    <ul><li>Buffalo County</li></ul>
  </li>
  <li>Lower Brule Sioux Tribe
    <ul><li>Lyman County</li></ul>
  </li>
  <li>Oglala Sioux Tribe
    <ul><li>Oglala Lakota County</li></ul>
  </li>
  <li>Rosebud Sioux Tribe
    <ul><li>Todd County</li></ul>
  </li>
  <li>Standing Rock Sioux Tribe
    <ul><li>Corson and Sioux Counties</li></ul>
  </li>
</ul>

4 Nest a county into each Dakota and Nakota nation

Do the same for the Dakota and Nakota list. Each nation gets a nested list holding its county.

Flandreau Santee Sioux TribeMoody County

Sisseton-Wahpeton OyateRoberts County

Yankton Sioux TribeCharles Mix County

✍️ Give each of the three Dakota and Nakota <li> items a nested county list. Use the example below if you need it, then press ▶ Run.

<ul>
  <li>Flandreau Santee Sioux Tribe
    <ul><li>Moody County</li></ul>
  </li>
  <li>Sisseton-Wahpeton Oyate
    <ul><li>Roberts County</li></ul>
  </li>
  <li>Yankton Sioux Tribe
    <ul><li>Charles Mix County</li></ul>
  </li>
</ul>

5 Why structure matters

You have just built a page whose shape mirrors how the information really fits together. South Dakota has two cultural groups, each group holds several nations, and each nation sits in a county. 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>Oglala Sioux Tribe
  <ul>
    <li>Oglala Lakota County</li>
    <li>Part of the Oceti Sakowin</li>
  </ul>
</li>

✓ Finish this stage

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

YOUR CODE

PREVIEW