UNIT 1 • STAGE 3 OF 7
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 Dakota and Anishinaabe 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. This is a habit good coders always keep because it makes nested code much easier to read and fix later.
Nest Details Into the Dakota Nations
Find your Dakota <ul> in the editor. We'll update it to include the county location as a nested list under each nation.
<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>
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. The deeper you nest, the further it indents.
Nest Details Into the Anishinaabe Nations
Now update the Anishinaabe list the same way.
<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>
Why Does Structure Matter?
You've just built a well-organized, hierarchical webpage. The nesting mirrors how information is actually connected:
- Minnesota has two cultural groups (Dakota + Anishinaabe)
- Each group 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>Sovereign nation since 1934</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.