Subjects and lessons to explore.

Law

Web Development · Foundations

Semantic HTML

9 min read 5 practice questions
8 key termsSourcesReport an error
Want it in plain words first? Jump to Eli explains — the same idea, no jargon.
On this page 9 sections
  1. In 30 seconds
  2. Why this matters
  3. The college version
  4. Eli explains
  5. Worked example
  6. Key takeaway
  7. Quick check
  8. Study tools
  9. Sources & references

In 30 seconds

means choosing HTML elements for the job their defined meaning describes. A main element marks a page's dominant content, nav marks a major block, and article marks a self-contained item such as a post. section, aside, header, and footer add more specific structure. These names are useful information for browsers, tools, and people using the page; they are not just substitutes for div chosen because they look different.

Why this matters

Semantic markup turns a page from a pile of boxes into a document with roles. That makes code easier for a team to read and makes the structure available to browser features and assistive technologies. It also gives later work a better foundation: CSS can style a meaningful structure without changing what it means, and JavaScript can select elements whose purpose is clear. Semantics are not an accessibility guarantee by themselves—content, labels, interaction, and visual design still matter—but native elements are usually the first structural choice before adding ARIA.

The college version

Meaning is the design input

HTML has generic containers, especially div, but it also has elements whose names carry defined roles. Choosing nav says that a block is navigation; choosing main identifies the document's dominant content; choosing aside identifies content that is related but separate from the surrounding content. This is semantic HTML: deciding what a piece of content is before deciding how it should look. CSS can put a div and a nav in the same position and give them identical colors, yet the two choices communicate different structure. A semantic element is not a decorative CSS class. It is a statement about the purpose of content in the document. Use a when there is no more meaningful element for the grouping, such as a wrapper needed solely for layout. Do not turn every visible box into a merely because it has a border.

Landmarks organize a page-level view

Several native elements commonly provide page regions, often called landmarks. main represents the dominant content of the document body; a normal page should have one content region. nav is for a major block of navigation links, not every pair of links in a sentence or every small link list in a footer. aside represents content that is tangentially related to the nearby content, such as a pull quote, a related-resources panel, or a sidebar. header and footer provide introductory or concluding material for their nearest sectioning context. A site-wide header might contain a logo and primary navigation, while an header can contain that article's title and byline; similarly, an article footer can contain tags or author information. Landmark-aware tools can expose these regions as ways to move through a page. When two landmarks of the same type are not distinguishable by their contents, a clear accessible name can distinguish them. That is guidance for a specific need, not a reason to add redundant labels to every element.

Article, section, and the generic container

article and section both group content, but they answer different questions. An article is a complete, self-contained composition that could in principle be reused or distributed independently. A news story, forum post, product review, or individual comment can qualify. A section is a thematic grouping within a document or application, usually with a heading: the chapters of a guide or the parts of a profile page are familiar examples. The HTML standard explicitly warns that section is not a generic container for styling or scripting; use div if grouping has no document-level meaning. A useful test is: would the group make sense as an entry in an outline or table of contents? If yes, section may fit. If the item could stand alone in a feed, article may fit. Neither test substitutes for reading the actual content, and an article can contain sections when its own content has thematic subdivisions.

Build structure before adding extra roles

Native HTML elements already have standardized meanings, so they should be the starting point for ordinary page structure. Adding an ARIA role that merely repeats a native element's role does not make the markup more semantic and can create maintenance confusion; this lesson does not cover complex ARIA patterns. Instead, begin with the content: identify the page's dominant task, separate major navigation from the content users came to read, then identify material that is complementary rather than central. Add headers and footers at the scope they actually describe. Finally, inspect whether repeated regions can be told apart by their visible or accessible names. Semantic choices do not repair a missing form label, unclear link text, bad keyboard interaction, or insufficient contrast. They make the document's structure available so those other accessibility responsibilities can be addressed on a sound base.

Eli, the EliExplains learning guide

Eli explains

The same idea, in plain words

Explain it like I’m 10

Semantic HTML is like labeling rooms by what people do in them instead of calling every room “space.” A library can tell you which room is for reading, which is for help, and which is the entrance. On a web page, main says where the central material is, nav says where major directions are, and aside says “this is related, but not the main story.” The labels help a reader of the code and can help tools describe the page’s shape.

Picture it like this

Imagine a school map with a cafeteria, gym, library, and classrooms rather than a grid of identical rectangles. The rooms may all have walls and doors, but their labels tell visitors what they are for. Semantic elements provide those purpose labels in a web document. A section is a themed room within a larger area, while an article is more like a complete handout that could be passed to someone by itself.

Where the picture stops working

A web element is not a physical room, and a semantic name does not force content to be good or accessible. A nav full of vague links is still vague, and a correct landmark does not supply keyboard behavior, labels, or contrast. HTML meaning comes from the standard and the content's actual role, not from a visual map.

Worked example

A campus-news page has a site banner, a primary link list, one story, a related-events panel, and site information. A clear structure is: <header> for the site identity; <nav aria-label="Primary"> for the major links; <main> for the dominant page content; an <article> inside main for the self-contained story; an <aside> for the related-events panel; and a page <footer> for site information. Within the article, its own <header> can hold the headline and byline, and its own <footer> can hold the author credit. If the story has “Background” and “What happens next” divisions, each can be a headed <section>. A layout-only wrapper around a pair of cards should remain a div, because it does not add a document role. The example's nesting follows the definitions: article content is central, the events are complementary, and the two headers have different scopes.

Key takeaway

Choose HTML by the role its content actually serves. Use native landmarks and sectional elements where their meanings fit, and use a generic container when the grouping is only presentational or technical.

Quick check

3 questions here, of 5 in this lesson’s practice set. Answers stay hidden until you check.

Question 1 of 3foundational

What is the best description of semantic HTML?

Choose an answer, then check it.
Question 2 of 3intermediate

A page has a large list of site-wide destination links near its top. Which element best identifies that major block?

Choose an answer, then check it.
Question 3 of 3intermediate

Which situation most strongly supports using article?

Choose an answer, then check it.
Practice all 5

Keep learning

Ready to build on this? Continue to the next lesson.

Practice this lesson
Study tools & related lessonsYou’ll learn to · Common mistakes · Easily confused · Key vocabulary · Related

You’ll learn to

  • Define semantic HTML as markup chosen for its specified meaning.
  • Distinguish a page's main content from navigation and complementary content.
  • Choose between article and section for a short content scenario.
  • Explain why header and footer can belong to a nested article.
  • Apply landmark labels when repeated landmarks need distinction.

Common mistakes

  • Using section for every visual box.

    Use section for a thematic part of the document, usually with a heading; use div when grouping is only for layout or scripting.

  • Putting every group of links inside nav.

    Reserve nav for major navigation blocks; ordinary inline links or a short footer link list may not need it.

  • Treating article as a synonym for any large container.

    Use article for a complete item that could make sense independently, such as a post or comment.

  • Assuming semantic tags alone make a page accessible.

    Use meaningful native structure, then also address names, content, interaction, and visual accessibility requirements.

Easily confused

article vs. section

An article is self-contained and potentially reusable by itself; a section is a thematic subdivision of a document or application.

section vs. div

Section conveys a thematic document grouping; div is a generic container when no semantic grouping applies.

nav vs. a group of links

Nav identifies a major navigation block; not every collection of links is navigation.

Key vocabulary

semantic HTML
HTML chosen because its standardized meaning describes the role of the content.
landmark
A named structural region that can help users and tools identify major parts of a page.
main
The HTML element representing the dominant content of a document body.
navigation
A region containing links for moving to pages or locations, commonly marked with nav when it is a major block.
article
A self-contained composition that could in principle be independently distributed or reused.
section
A thematic grouping of content, typically with a heading.
aside
Content related to nearby content but separate from its main flow.
generic container
An element such as div used to group content when no more specific HTML meaning applies.

Sources & references

  1. HTML Living Standard — Sections — WHATWG
  2. Semantics — MDN Web Docs — MDN Web Docs
  3. Landmark Regions — W3C Web Accessibility Initiative

EliExplains lessons are original prose written from the open, credible references above. See Copyright & Licensing.

Researched 2026-08-20

Educational content only. It is not medical, legal or professional advice. Found an error? Tell us.