The usage and limitations of the HTML "main" Element

How to use this new HTML structural element in your web design

Sketching a website design
Sketching a website design.

The introduction of HTML5 gave web developers a host of new structural HTML elements to use, including header, footer, nav, section and more. One new structural element that has been introduced since that time, but which has not received the same level of usage as those aforementioned elements, is the <main> tag.

What Is It Used For?

The W3C specification for the <main> element states that:

“The main element represents the main content section of the body of a document or application. The main content section consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application.”

In my own work, I often use a division or a section to contain the primary content of a page. I give this element a class attribute with a value of something like "main-content", like below

  <div class="main-content">
    <!-- content goes here -->
  </div>

The <main> element is a perfect replacement for these more generic elements in the same way that the <header> element is a logical replacement for <div class="header">, which was a fixture on webpages until the introduction of HTML5.

What Are The Limitations?

The <main> element can only be used once in an HTML document. The reasoning for this is that a page should only have one main area of content. Although some web designers have questioned this decision, this is one of the rules of using the <main> element currently.

Another rule is that the <main> element cannot be used as a descendant of the following HTML elements:

  • <article>
  • <aside>
  • <footer>
  • <header>
  • <nav>

This rule makes sense, since you would not find the primary content of a page contained with that page’s header, footer, or nav or within an article or an aside.

Browser Support

One of the first questions any web designer asks when considering something new feature or addition in HTML or CSS is “what does the browser support look like?”

Support for the <main> element is very good, with the only real concern being older versions of Internet Explorer. The <main> element is supported in all modern browsers.

For older versions of IE (if your user analytics dictate you should still support those legacy versions), you will need to set the <main> element to have a display value of “block” in your CSS file, like this:

main {
  display: block;
  }

The popular HTML5shiv, which many developers already use to bring support for HTML5 elements into older releases of IE, also has support for the <main> element included.

An Example

So how would you use the <main> element on a website? Here’s an example:

<main>
  <h2>Better Technology Solutions Start With Better People</h2>
  <p>Envision Technology  Advisors proudly offers best in class technology solutions delivered by the  best people in the industry. Our company-wide dedication to customer service  has made us one of the most comprehensive, business-oriented technology  companies in New England. It is the quality of our people, and the diverse  backgrounds, skills, and personalities that they bring to Envision, that has  helped make our company what it is today.</p>
  <p>Our specialties include:</p>	
  <ul>
    <li>Cloud and Managed Services</li>
    <li>Infrastructure and Network Consulting</li> 
    <li>Knowledge and Talent</li>	
  </ul>
  <p>Contact us and let us know how we can help you today.</p>
</main>

This is just some basic content that is found on one of the pages on my company's website. As you can see, you would simply add the necessary HTML elements for that page's primary content, including headings, paragraphs, lists, links, images, etc. inside of the <main> element. This would tell the browser that this content is the focus of the page.

Can I Use This Now?

Determining when you can use new HTML or CSS features and when you should wait is something that every web professional must determine for themselves on a project by project basis. Review the browser statistics for the site you are working on to determine if the level of support you need for that new feature is in place or if you will need to provide fallbacks for unsupported platforms.

Realize, however, that waiting for 100% support is rarely the right answer.

Using the latest advances in web design often means being willing to be ahead of the curve. If you are already using class attributes of “main” or “main-content” in your web design work, then turning to the <main> tag instead may be an appropriate change.

Edited by Jeremy Girard on 1/24/17