Stage 3: Nesting & Organizing Information

STEP 1

Review: Your Lists So Far

Your code editor starts with everything from Stage 2 — both <ul> lists plus your Quick Facts <ol>. Take a moment to look at the preview.

In this stage, we'll learn how to put HTML inside other HTML — a technique called nesting.

💡 Nesting in Real Life

Think of nesting like folders on your computer. A folder can contain other folders. HTML works the same way — elements can live inside other elements.

STEP 2

What Is Nesting?

Nesting means placing one HTML element inside another. You've already done this — your <li> tags live inside <ul> tags. That's nesting!

<ul> ← outer container

<li>Spirit Lake Nation</li>

<li>Standing Rock Sioux Tribe</li>

</ul>

We can go even deeper — put a <ul> inside a <li> to add sub-details under each nation.

<ul>

<li>Spirit Lake Nation

<ul> ← nested list!

<li>Ramsey & Benson Counties</li>

</ul>

</li>

</ul>

STEP 3

Nest Details Into the Sioux and Dakota Nations

Find your Sioux and Dakota <ul> in the editor. We'll update it to include the county location as a nested list under each nation.

👉 Replace your Sioux/Dakota <ul> with this: <ul>
  <li>Spirit Lake Nation
    <ul><li>Ramsey, Benson & Nelson Counties</li></ul>
  </li>
  <li>Standing Rock Sioux Tribe
    <ul><li>Sioux & Morton Counties</li></ul>
  </li>
</ul>

Notice how each county shows up as a sub-bullet, indented under the nation name.

STEP 4

Nest Details Into the MHA Nation and Anishinaabe

Now update the second list the same way.

👉 Replace your MHA/Anishinaabe <ul> with this: <ul>
  <li>Three Affiliated Tribes (MHA Nation)
    <ul><li>Fort Berthold Reservation, Western ND</li></ul>
  </li>
  <li>Turtle Mountain Band of Chippewa Indians
    <ul><li>Rolette County</li></ul>
  </li>
</ul>

STEP 5

Why Does Structure Matter?

You've just built a well-organized, hierarchical webpage. The nesting mirrors how information is actually connected:

North Dakota has four distinct Tribal nations
Each nation belongs to a broader cultural grouping
Each nation is located in specific counties or regions

Good HTML structure respects those real-world relationships.

🌐 Accessibility Matters

Well-structured HTML helps people who use screen readers — software that reads web pages aloud. When you nest properly, you're making the web more accessible for everyone.

STEP 6

Make It Your Own!

Try adding another detail to one of your nested lists. Ideas:

Add the Tribal nation's website URL as a second <li> in the sub-list
Add a short fact about the MHA Nation
Research one Tribal nation and add a detail you learned

🌟 Stage 3 Complete!

You now know how to nest HTML elements to create rich, organized pages. In Stage 4, we'll use more heading levels (h3, h4) to build a complete page hierarchy!