UNIT 1 • STAGE 4 OF 7

Building a Page Hierarchy

Use heading levels h3–h6 to organize information by importance

UNIT
STEP 1

The Heading Ladder

HTML has six heading levels. You've used <h1> and <h2> already. Each level gets progressively smaller and represents a lower level of importance on the page.

<h1> Page Title - used ONCE per page
<h2> Major Section
<h3> Sub-section
<h4> Detail Heading
<h5> Fine detail
<h6> Smallest heading

🎯 The Golden Rule

Never skip heading levels. Always go h1 → h2 → h3 → h4 in order. Skipping - like jumping from h1 straight to h3 - confuses screen readers (which announce headings to users who can't see the page) and search engines (which use heading levels to understand what your page is about).

STEP 2

Add h3 Sub-headings for Each Group

Let's add a new section to your page that uses h3 to break each cultural group into sub-topics - History and Today.

👉 Add this AFTER your Quick Facts </ol>: <h2>About the Dakota People</h2>

<h3>Their History</h3>
<p>The Dakota people have lived in Minnesota for thousands of years, long before European contact.</p>

<h3>Today</h3>
<p>The 4 Dakota communities continue to govern their own lands and maintain their language, culture, and traditions.</p>

Look at the preview → "Their History" and "Today" appear as sub-headings under "About the Dakota People." Notice they're smaller than the <h2> above them - that visual size difference is the browser telling visitors "these topics belong under that section."

STEP 3

Add h3 Sub-headings for Anishinaabe

Now do the same for the Anishinaabe people.

👉 Add this AFTER your Dakota section: <h2>About the Anishinaabe People</h2>

<h3>Their History</h3>
<p>The Anishinaabe (also called Ojibwe or Chippewa) have lived in the Great Lakes region for thousands of years.</p>

<h3>Their Language</h3>
<p>Ojibwemowin - the Ojibwe language - is actively being revitalized in Minnesota communities today.</p>

<h3>Today</h3>
<p>The 7 Anishinaabe bands govern their own lands, operate schools, health services, and cultural programs.</p>
STEP 4

Go Deeper with h4

An <h4> goes inside an <h3> section. Let's add a specific nation's detail using h4.

👉 Add this inside your "About the Dakota People" section, after the Today <p>: <h4>Spotlight: Shakopee Mdewakanton</h4>
<p>Located in Scott County, the Shakopee Mdewakanton Sioux Community is one of the most prosperous Tribal nations in the U.S. and a leader in environmental sustainability.</p>

🌿 Tribal Sovereignty in Action

The Shakopee Mdewakanton Sioux Community has used its sovereignty to invest in renewable energy, organic farming, and water conservation - a model for Native-led environmental stewardship.

STEP 5

Your Page Hierarchy

Look at your page now. You have a complete hierarchy:

  • h1 - "Minnesota's 11 Tribal Nations" - the main title, used once. Tells the whole story of what the page is about.
  • h2 - "Dakota Nations," "Anishinaabe Nations," "Quick Facts," "About..." - the major chapters of your page.
  • h3 - "Their History," "Today," "Their Language" - sub-topics within each chapter.
  • h4 - "Spotlight: Shakopee Mdewakanton" - a specific detail within a sub-topic.

This hierarchy is exactly how a real encyclopedia or textbook is organized. When your code reflects clear real-world structure, both people and machines can navigate it easily.

STEP 6

Challenge: Add Your Own h4

Research one Anishinaabe nation and add an h4 spotlight under the "About the Anishinaabe People" section. Try:

  • Red Lake Nation - one of the few closed reservations in the U.S., meaning only Tribal members live on the land
  • White Earth Nation - the largest Ojibwe community in Minnesota

🌟 Stage 4 Complete!

You now understand HTML heading hierarchy from h1 to h6. In Stage 5, we'll add links so your page can connect to the real websites of these Tribal nations!

Code Editor
Live Preview