UNIT 1 • STAGE 3 OF 7 • SOUTH DAKOTA
Nesting & Organizing Information
Add detail to your nations by nesting HTML inside HTML
Review: Your Lists So Far
Your code editor starts with everything you built in Stage 2 — both <ul> lists for Lakota and Dakota/Nakota nations plus your Quick Facts <ol>. Take a moment to look at the preview and read what's there.
In this stage, we'll go deeper by learning 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.
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!
We can go even deeper — put a <ul> inside a <li> to add sub-details under each nation. The indentation in your code shows the nesting visually — each level in is one level deeper.
Nest Details Into the Lakota Nations
Find your Lakota <ul> in the editor. We'll update it to include the county location as a nested list under each nation.
<li>Cheyenne River Sioux Tribe
<ul><li>Dewey & 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 & Sioux Counties</li></ul>
</li>
</ul>
Notice how each county shows up as a sub-bullet, indented under the nation name. The browser automatically indents nested lists — you don't have to add any spacing yourself.
Nest Details Into the Dakota and Nakota Nations
Now update the Dakota and Nakota list the same way.
<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>
Why Does Structure Matter?
You've just built a well-organized, hierarchical webpage. The nesting mirrors how information is actually connected:
- South Dakota has two main cultural groupings (Lakota + Dakota/Nakota)
- Each grouping contains multiple nations
- Each nation is located in specific counties
Good HTML structure respects those real-world relationships. When your code mirrors how information is actually organized in the world, it's easier to read, easier to update, and easier for browsers and assistive technology to understand.
🌐 Accessibility Matters
Well-structured HTML helps people who use screen readers — software that reads web pages aloud for people with visual impairments. When you nest properly, you're making the web more accessible for everyone.
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:
<li>Part of the Oceti Sakowin</li> - 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!
© 2026 Relentless Feather. All rights reserved.