What is the difference between <main> and <section>?
The difference between <main> and <section> lies in the level and purpose of their semantic role in the page structure.
Both tags help define semantics, but they are used in different contexts.
<main> - the main content of the page
This is the primary meaningful part of the site, the reason the user opened the page in the first place. It should contain what is unique and central: an article, news, products, a blog and so on.
Example:
<main>
<h1>Technology news</h1>
<article>
<h2>A new programming language</h2>
<p>Developers have presented a new standard...</p>
</article>
</main>Features:
- A page can have only one
<main>. - It should not contain a header, menu, footer, or sidebars.
- Its meaning: "the main content the page exists for".
<section> - a thematic division within a page
<section> is used to split content into meaningful blocks, each with its own heading or topic.
It is usually a part inside <main> or <article>.
Example:
<main>
<section>
<h2>Company news</h2>
<p>We launched a new project...</p>
</section>
<section>
<h2>Customer reviews</h2>
<p>"Great work!"</p>
</section>
</main>Features:
- A page can have many
<section>elements. - Each section should be logically self-contained and have its own heading.
- It helps structure the main content.
The main difference:
| Characteristic | <main> | <section> |
|---|---|---|
| Purpose | The main content of the page | A separate division within the content |
| Quantity | Only one per page | Can be several |
| Heading required | Not required | Desirable (<h2> and below) |
| Placement | Contains the main information | Located inside <main> or <article> |
| Analogy | The main stage | Individual episodes |
In short:
<main> is everything primary,
while <section> is the parts within that primary content, logical divisions with their own meaning.
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.