You might see <main> Element reference while reading someone else’s HTML, or need it while building a page of your own. Instead of memorizing a definition, look at a working example and see when the element makes sense.
The Idea in Plain English
Marks the primary content of the page. A page normally has one visible main landmark.
For a reference page, pay attention to where the element is allowed, whether it needs a closing tag, and what other elements it can contain.
A Working Example
Read the sample once before copying it. Notice the element names and attribute values, then compare them with the explanation below.
<header><p>Science Club</p></header>
<main id="content">
<h1>Today’s Experiment</h1>
<p>We will measure plant growth.</p>
</main>What Each Part Does
- The main landmark identifies the page’s primary content.
- The header introduces a page or nearby section.
- A paragraph keeps one idea together as readable text.
- id names an element for labels, fragments, CSS or JavaScript; IDs should be unique.
Assistive technology can navigate directly to the main content.
Try It Yourself
Try replacing the example content with your own while keeping the valid HTML structure.
Common Beginner Mistakes
- Placing site navigation inside main when it belongs outside the unique primary-content region.
- Changing several parts of the example at once, making it difficult to see which part caused a different result.
- Choosing a tag only because its default appearance looks right, without checking whether it describes the content correctly.
Key Takeaways
- Marks the primary content of the page. A page normally has one visible main landmark.
- Assistive technology can navigate directly to the main content.
- Test the markup in a browser, and check accessibility and real-world behavior where relevant.