The <main> tag creates a container for content.
This semantic tag marks its content as the page's primary content.
A page should have only one <main> element.
This <main> tag contains the primary topic of the page.
<main style="max-width:550px;">
<b>Impressionism</b> is a 19th-century art movement
characterized by relatively small brush strokes,
emphasis on accurate depiction of light, ordinary
subject matter, and unusual visual angles.
Impressionism originated with a group of
Paris-based artists whose independent exhibitions
brought them to prominence in the 1870s and 1880s.
</main>
The <main> tag serves as the container for the primary page content.
Its content must be unique and present the core topic of the page.
The <main> tag should not be inside another semantic element, such as, <article> or <header>.
A <main> element with a story about the artist Paul Cézanne.
Paul Cézanne was a French artist and Post-Impressionist painter whose work laid the foundations of the transition from the 19th-century conception of artistic endeavor to a new and radically different world of art in the 20th century.
Cézanne is said to have formed the bridge between late 19th-century Impressionism and the early 20th century's new line of artistic enquiry, Cubism. Cézanne's often repetitive, exploratory brushstrokes are highly characteristic and clearly recognizable. He used planes of colour and small brushstrokes that build up to form complex fields. The paintings convey Cézanne's intense study of his subjects.
<main>
<h2>Paul Cézanne</h2>
<p>
Paul Cézanne was a French artist and Post-Impressionist
painter whose work laid the foundations of the transition
from the 19th-century conception of artistic endeavor
to a new and radically different world of art in the
20th century.
</p>
<h3>Painting Style</h3>
<p>
Cézanne is said to have formed the bridge between
late 19th-century Impressionism and the early 20th
century's new line of artistic enquiry, Cubism.
Cézanne's often repetitive, exploratory brushstrokes
are highly characteristic and clearly recognizable.
He used planes of colour and small brushstrokes that
build up to form complex fields. The paintings convey
Cézanne's intense study of his subjects.
</p>
</main>
The <main> element has no attributes, but it does accept global attributes.
The following are commonly used.
| Attribute | Value | Description |
|---|---|---|
| id | value | Provides the main element with a unique identifier. |
| class | classnames | Assigns one or more classnames to the main element. |
| style | CSS-values | Assigns CSS style values to the main element. |
| data-* | value | Defines additional data that can be used by JavaScript. |
| hidden | hidden | Specifies whether the main element is hidden. |
For additional global attributes see our global attributes list.
The <main> tag is part of a group of semantic tags
that help with creating the layout of web pages.
This group is referred to as the Layout tag group.
Together, they allow you to create comprehensive page layouts.
An example layout and a list of layout tags below.
| Element | Description |
|---|---|
| <header> | Defines a header section on a page or a section of a page |
| <main> | Creates a container for the main content of the page |
| <footer> | Defines a footer section on a page or a section of a page |
| <nav> | Creates a container for navigation links |
| <aside> | Creates a content area that is related to the primary content on a page |
| <article> | Defines a container for independent and self contained text |
| <section> | Defines a piece of content that can stand on its own |
| <div> | Creates a division or section on a page |
Note: Layout tags define areas on a page that contain content. By default they have no visual appearance, but are often styled -- for example with a border or background color.
Here is when <main> support started for each browser:
 Chrome
|
6.0 | Sep 2010 |
 Firefox
|
4.0 | Mar 2011 |
 IE/Edge
|
12.0 | Jul 2015 |
 Opera
|
11.1 | Mar 2011 |
 Safari
|
5.0 | Jun 2010 |
