HTML <main> Tag

The <main> tag is a container that holds the page‘s primary content. A web page should have no more than one <main> element.

HTML Tag

Example

#

A <main> tag with an essay that is the primary topic of the page.

Impressionism 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 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>

Using <main>

The <main> tag serves as the container for the primary content inside the <body> element.

A web page should only have one <main> element.

This element should not be inside another semantic element, such as, <article> or <header>.

The content inside the <main> element must be unique and present the core topic of the page.

More Examples

A <main> element with a story about the artist Paul Cézanne.

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.

Painting Style

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>

Attributes for <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.


Layout Tags

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, these tags allow you to create comprehensive page layouts.

An example layout and a list of layout tags below.

HTML Layout
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.


Browser support

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

You may also like

Guides