Semantic Page Sections

Introduction

A webpage is easier to read, use, and maintain when its content is organized into meaningful parts. HTML gives us special elements called semantic elements. These elements describe what a part of the page means, rather than only how it looks.

In this lesson, you will build the structure for a simple community garden webpage. You will use header, nav, main, section, article, and footer. These elements do not automatically add colors or layouts. Instead, they give your page a clear structure that browsers, search engines, and assistive technologies can understand.

Think of a webpage like a magazine. The header introduces the publication, navigation helps readers find sections, the main area contains the central content, articles hold individual pieces of information, and the footer provides closing details.

What Each Element Means

• header: Introductory content for a page or section, such as a title, logo text, or short introduction.
• nav: A group of important navigation links. It helps visitors move around the website.
• main: The primary content of the page. A page should normally have one main element.
• section: A related group of content, usually with its own heading.
• article: A self-contained piece of content that could stand on its own, such as a news item, blog post, or event description.
• footer: Closing information for a page or section, such as contact details, copyright information, or additional navigation.

Semantic elements make the structure clearer than using many generic containers. A good rule is to choose an element based on the purpose of the content.

Worked Example

The following example organizes a community garden page. Notice that the page has one header, one navigation area, one main area, two sections, several articles, and one footer.

<header>
  <h1>Green Street Community Garden</h1>
  <p>Growing food and friendship in our neighborhood.</p>
</header>

<nav>
  <h2>Site Navigation</h2>
  <ul>
    <li>About the Garden</li>
    <li>Upcoming Events</li>
    <li>Get Involved</li>
  </ul>
</nav>

<main>
  <section>
    <h2>About Our Garden</h2>
    <p>Our volunteers grow vegetables, herbs, and flowers for local families.</p>
  </section>

  <section>
    <h2>Upcoming Events</h2>
    <article>
      <h3>Saturday Planting Day</h3>
      <p>Join us Saturday morning to prepare beds and plant seedlings.</p>
    </article>
    <article>
      <h3>Composting Workshop</h3>
      <p>Learn how kitchen scraps can become healthy garden compost.</p>
    </article>
  </section>
</main>

<footer>
  <p>Contact the garden team at the neighborhood center.</p>
</footer>

The section elements group related topics. The event descriptions are article elements because each event is a separate, understandable item. Headings also help readers scan the page and help screen-reader users navigate its structure.

Guided Activity: Build a Club Page

Create the structure for a webpage about a club, group, or activity you know. You might choose a coding club, sports team, book group, music group, or volunteer organization.

1. Start with a header. Add an h1 containing the name of your group and a short introductory paragraph.
2. Add a nav. Include a heading and an unordered list with three navigation items, such as About, Schedule, and Contact.
3. Create one main element. Put all of the page's primary information inside it.
4. Inside main, add an About section with an h2 and a paragraph.
5. Add an Events or Activities section. Give it an h2 and at least two article elements.
6. Give each article an h3 and a paragraph describing the event or activity.
7. Finish with a footer containing a contact method or a short closing message.

Test your work by reading only the headings. Do the headings describe the page clearly? Then read the content inside each section. Does every piece of information belong where you placed it?

Common Mistake

Do not use a semantic element just because its name sounds appropriate. Use it because the content has that purpose.

For example, do not put every small group of text inside an article. An article should be independent enough to make sense by itself. A group of related information with a heading is often better represented by a section. Also, do not place multiple separate main elements on one page. The main element should contain the page's central content.

Another common mistake is forgetting headings. Sections and articles should usually have headings so people can understand their purpose. Semantic structure and heading structure work together.

Independent Challenge

Create a semantic page structure for a local event called “Neighborhood Skills Day.” Include a header with a title and introduction, a navigation area with three items, a main area, and at least two sections. In one section, include three articles describing different workshops. Finish with a footer containing a contact message.

Before you finish, check your structure: Is there one main? Does each section have a heading? Are the workshops separate articles? Does the footer appear outside the main content? If yes, you have created a meaningful foundation for a real webpage.