HTML Semantic Elements

Topics Covered in This HTML & CSS Tutorial:

The Outline Algorithm, the Header, Nav, Aside, & Footer Elements, Understanding Articles & Sections, the Main Element, the Figure & Figcaption Elements

Exercise Preview

Exercise Overview

In previous exercises, we relied on span and div tags to group content. While functional, these are non-semantic tags—they provide no meaningful information about their content's purpose or structure. HTML5 revolutionized web development by introducing semantic elements like article, header, footer, and nav that explicitly describe their content's role and meaning.

These semantic elements deliver substantial benefits across the web ecosystem. For developers, they create self-documenting code that's easier to maintain and debug. For users with disabilities, screen readers can navigate content more intelligently. For search engines, semantic markup provides clearer signals about content hierarchy and relevance, potentially improving SEO performance. As we move deeper into an AI-driven web landscape in 2026, this structured data becomes even more valuable for machine learning algorithms and automated content processing.

Getting Started

Let's dive into practical semantic markup by working with a real webpage structure. This hands-on approach will help you understand how semantic elements transform basic HTML into meaningful, accessible content.

1. In your code editor, hit Cmd–O (Mac) or CTRL–O (Windows) to open a file.
2. Navigate to Desktop > Class Files > Web Dev Class > Structural Semantics.
3. Double–click on semantic-elements.html to open it.
4. Before we start tagging the content, let's get acquainted with it. Preview semantic-elements.html in a web browser.
5. Scroll down the page and scan the content. In particular, note the three headings: two about birds (Peacocks and Eagles) and one about fish (Sharks). These three articles are the primary content for the page.
6. Switch back to semantic-elements.html in your code editor.
7. Look over the headings in the code, which range from h1 through h3.

The Outline Algorithm

Every webpage possesses a document outline—think of it as an automatically generated table of contents that defines the page's information hierarchy. This outline serves multiple critical functions: it helps screen readers navigate content efficiently, enables search engines to understand content structure, and assists developers in maintaining logical information architecture.

Our current webpage uses basic heading levels (h1 through h6) to establish structure, but it lacks the rich semantic markup that HTML5 enables. While heading-based outlines worked adequately in the past, modern web development demands more sophisticated approaches. HTML5 semantic elements provide explicit content categorization that goes far beyond what heading levels alone can achieve.

To understand our document's current state and track our improvements, we'll use an online outline analyzer. This tool reveals how browsers and assistive technologies interpret our page structure.

1. Open a web browser and go to: gsnedders.HTML5.org/outliner
2. Under Input HTML, click the Choose File or Browse button (the button name differs between browsers).
3. Navigate to Class Files > Web Dev Class > Structural Semantics.
4. Double–click semantic-elements.html to choose it.

5. Click the Outline this! button just below the file.

   The resulting outline reflects our current heading tag hierarchy. Notice how the structure flows logically: the h1 establishes the main topic, h2 tags create subtopics, and h3 tags provide further subdivision. This creates a nested information architecture as illustrated below:

   

   In HTML4, heading-based outlines were our only structural option. HTML5 semantic elements offer a more sophisticated approach, creating explicit content sections that enhance both human readability and machine processing. This semantic richness becomes increasingly important as AI systems and accessibility tools evolve to better serve users.

The Header Element

The header element serves as a content container for introductory information, typically appearing at the top of a page or section. According to the HTML specification, "A header typically contains a group of introductory or navigational aids. A header element is intended to usually contain the section's heading (an h1–h6 element), but this is not required. The header element can also be used to wrap a section's table of contents, a search form, or any relevant logos."

Headers provide crucial orientation for users and assistive technologies, establishing context before users encounter the main content. This is particularly valuable for screen reader users who rely on structural landmarks to understand page layout.

1. Switch back to your code editor and find these two lines of code just after the start of the body tag:

   <h1>Fish and Fowl: The Amazing Animal Blog</h1>

2. As shown below, wrap these two lines of code in a header tag.

   TIP: If you're using Visual Studio Code (and set up the wrap keystroke using the instructions in the Before You Begin section near the start of this book), you can quickly wrap a tag around a selection using a keystroke. Select the code you want to wrap and hit Option–W (Mac) or ALT–W (Windows). Then type in the name of the wrapper (which in this case is header) and hit Return (Mac) or Enter (Windows).

   <header>
      <h1>Fish and Fowl: The Amazing Animal Blog</h1>
   </header>

   NOTE: Because semantic tags allow us to partition our content logically, each discrete section can have its own h1 (according to the HTML specification). However it is a best practice to have only one h1 per page until screen readers and search engines support multiple h1 tags.

Proper Semantics for Nav Elements

Navigation represents one of the most critical aspects of web usability, and the nav element provides explicit markup for navigation sections. This semantic clarity helps users understand site structure and enables assistive technologies to provide efficient navigation options.

Beyond the basic nav wrapper, we'll implement proper list semantics for our navigation links. This approach follows established web standards and provides better accessibility support, as screen readers can announce the number of navigation options and allow users to jump between them efficiently.

1. Just below the header are some links to navigate the site. Wrap a nav tag around them, as shown below:

   <nav>
      <a href="#">About Us</a>
      <a href="#">Our Mission</a>
      <a href="#">Contact Us</a>
   </nav>

   NOTE: These don't link to real pages, yet. Setting the href to # is a common way to create a placeholder link because it doesn't go anywhere. It allows us create and style the links before we build the rest of the site.

2. While we're here, let's mark up the links with some additional semantic tags. This is essentially a list of links, so we'll mark them up as an unordered list. Wrap a ul tag around the links, as follows:

   <nav>
      <ul>
         <a href="#">About Us</a>
         <a href="#">Our Mission</a>
         <a href="#">Contact Us</a>
      </ul>
   </nav>

3. Now wrap each link in an li (list item) tag, as follows:

   <nav>
      <ul>
         <li><a href="#">About Us</a></li>
         <li><a href="#">Our Mission</a></li>
         <li><a href="#">Contact Us</a></li>
      </ul>
   </nav>

4. Save the file.

The Article, Aside, & Footer Elements

Now we'll tackle three essential semantic elements that define different types of content relationships. The article element marks self-contained, distributable content—the kind of material that could be syndicated or shared independently. The aside element handles supplementary content that relates to but doesn't belong in the main flow. The footer element provides document or section metadata like authorship, copyright, or related links.

Understanding these distinctions helps create more meaningful document structures that benefit both human readers and automated systems processing your content.

1. Below the nav, find the first blog post (an h2 and two paragraphs). The article element is ideal for this type of content.

   According to the HTML spec, "The article element represents a complete, or self-contained, composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g., in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content."

2. As shown below, wrap the following lines of code in an article tag:

   <article>
      <h2>Have You Ever Met a Peacock?</h2>

   Code Omitted To Save Space

   <p>Source: <a href="https://en.wikipedia.org/wiki/peafowl">Wikipedia</a></p>
   </article>

3. Wrap the article tag around the two remaining articles. The code should look like this when you are finished:

   <article>
      <h2>The Majestic Eagles Have Landed</h2>

   Code Omitted To Save Space

   <p>Source: <a href="https://en.wikipedia.org/wiki/eagle">Wikipedia</a></p>
   </article>
   
   <article>
      <h2>Swimming with Sharks</h2>

   Code Omitted To Save Space

   <p>Source: <a href="https://en.wikipedia.org/wiki/whale_shark">Wikipedia</a></p>
   </article>

4. Now let's mark up the additional posts and links. The aside element is used to indicate tangential, additional content. The HTML specification chose "aside" over "sidebar" because it more accurately describes the semantic value of the content rather than its visual position. This semantic approach proves its worth in responsive design—sidebars might appear on the right in desktop layouts but move to the bottom on mobile devices. The aside element maintains its semantic meaning regardless of visual presentation.

   As shown below, wrap the following content in an aside tag:

   <aside>
      <h2>More Posts</h2>
      <h3>Archives</h3>

   Code Omitted To Save Space

   <h3>A Word From Our Sponsors</h3>   
      <ul>
         <li>PETA</li>
         <li>ASPCA</li>
      </ul>
   </aside>

5. The last paragraph contains a copyright notice. It's a perfect footer element, which according to the HTML spec, "typically contains information about its section such as who wrote it, links to related documents, copyright data, and the like".

   Wrap the footer tag around the last paragraph, as shown below:

   <footer>
         <p>© fish-and-fowl.org—all rights reserved—all wrongs reversed</p>
      </footer>
   </body>

The Section Element

The section element represents one of HTML5's most powerful organizational tools. According to the HTML specification, a section element is "a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A website's home page could be split into sections for an introduction, news items, and contact information."

In our case, we have natural thematic groupings—two articles about birds and one about fish. The section element provides the perfect semantic container for these related content groups, creating logical divisions that enhance both document structure and user comprehension.

1. Wrap the two articles about birds (peacocks and eagles) in a section tag, as shown below:

   <section>
      <article>
         <h2>Have You Ever Met a Peacock?</h2>

   Code Omitted To Save Space

   </article>
   
      <article>
         <h2>The Majestic Eagles Have Landed</h2>

   Code Omitted To Save Space

   </article>
   </section>

2. Wrap the last article (about sharks) in a section tag, as shown below:

   <section>
      <article>
         <h2>Swimming With Sharks</h2>

   Code Omitted To Save Space

   </article>
   </section>

3. Save the file.

Checking the Updated Document Outline

With our semantic elements in place, let's examine how they've transformed our document structure. This comparison will demonstrate the power of semantic markup and show how modern HTML creates more meaningful content organization.

1. In a browser, go back to gsnedders.HTML5.org/outliner

2. Under Input HTML, click the Browse or Choose File button.

3. Navigate to Class Files > Web Dev Class > Structural Semantics.

4. Double–click semantic-elements.html to choose it.

5. Click the Outline this! button just below the file.

6. Notice that there are now 3 Untitled Sections. The first is for the nav, and the second and third are for the bird and fish sections.

   

Adding Titles to Sections

According to the HTML specification for creating document outlines, "Each section can have one heading associated with it." This heading serves as the section's title in the document outline and provides crucial context for users navigating the content.

For our thematic sections about birds and fish, adding descriptive headings will improve both usability and semantic clarity. These headings help users understand content organization at a glance and provide screen readers with clear section boundaries.

The navigation section presents a more nuanced case. While sections can have headings, they're not required. Navigation functionality is often self-evident, and visible headings might create visual clutter. In production environments, developers sometimes include headings for accessibility purposes but hide them visually using CSS—a technique we'll explore in more advanced courses.

1. Return to semantic-elements.html in your code editor.

2. Let's give the birds section a logical heading. Directly after the opening section tag add the following bold code:

   <section>
      <h2>Birds</h2>
      <article>
         <h2>Have You Ever Met a Peacock?</h2>

3. Let's give the fish section a logical heading too. After the section opening tag type:

   <section>
      <h2>Fish</h2>
      <article>
         <h2>Swimming With Sharks</h2>

4. Now that we the section headings are h2 tags, the article headings should change from h2 to h3. Change the three article headings, as shown below in bold:

   <section>
      <h2>Birds</h2>
      <article>
         <h3>Have You Ever Met a Peacock?</h3>

   Code Omitted To Save Space

   </article>
   
      <article>
         <h3>The Majestic Eagles Have Landed</h3>

   Code Omitted To Save Space

   </article>
   </section>
   
   <section>
      <h2>Fish</h2>
      <article>
         <h3>Swimming with Sharks</h3>

5. Save the file.

Rechecking the Outline

Let's evaluate our improved document structure and see how proper section headings have enhanced our content hierarchy. This analysis will reveal the tangible benefits of thoughtful semantic markup.

1. In a browser, go back to gsnedders.HTML5.org/outliner

2. Under Input HTML, click the Browse or Choose File button.

3. Navigate to Class Files > Web Dev Class > Structural Semantics.

4. Double–click semantic-elements.html to choose it.

5. Click the Outline this! button just below the file. You'll notice that the logical structure of the page has improved with our title sections.

   

The Main Element

The main element serves a specialized accessibility function by identifying the primary content of a document. While it doesn't affect the document outline algorithm, it provides invaluable semantic information for assistive technologies and automated content processing systems.

The main element's primary purpose is to improve web accessibility. Screen readers use this landmark to help users quickly jump to the core content, bypassing navigation, sidebars, and other supplementary elements. This functionality becomes particularly valuable on complex pages with extensive secondary content.

Important constraints govern main element usage: it can only appear once per document and must not be nested inside article, aside, footer, header, or nav elements. This exclusivity ensures clear content hierarchy and prevents semantic ambiguity.

1. Return to semantic-elements.html in your code editor.

2. Wrap the two section elements in the main tag, as shown below.

   <main>
      <section>
         <h2>Birds</h2>
         <article>

   Code Omitted To Save Space

   </article>
   
         <article>

   Code Omitted To Save Space

   </article>      
      </section>
   
      <section>
         <h2>Fish</h2>
         <article>

   Code Omitted To Save Space

   </article>
      </section>
   </main>

3. Save the file.

Optional Bonus: Figure & Figcaption

The figure and figcaption elements provide semantic markup for images, diagrams, code examples, and other content that requires explanatory captions. This pairing creates a meaningful relationship between visual content and its description, improving both accessibility and content organization.

Let's enhance our page by adding a compelling image that demonstrates these elements in action.

1. Return to semantic-elements.html in your code editor.

2. Between the nav and the main tags, add the following img:

   </nav>
   
   <img src="img/tawny-frogmouth.jpg" height="346" width="700" ALT="Tawny Frogmouth">
   
   <main>

3. Save the file and preview semantic-elements.html in a web browser.

   What a remarkable bird! The Tawny Frogmouth deserves proper introduction and context. HTML5's figure element, combined with figcaption, provides the perfect semantic structure for images that require explanatory text. This approach creates meaningful associations between visual content and descriptions, enhancing both accessibility and user experience. Let's implement this semantic enhancement to give our featured creature the presentation it deserves.