main element

If you don't know what an element is or how you must use it, I recommend you read the "HTML tags and attributes" tutorial that you can find in the HTML tutorials section.

Description

The main element is a container for the central topics of a document or section. This central content may be interpreted as all that's left after you remove ads, headers (header), footers (footer), navigational sections (nav), related links and other such secondary elements.

The main element has greater importance for people with disabilities, usually accessing the web with special programs like voice browsers. In such cases, browsers can be instructed to go straight to the main content of the document or section, skipping all irrelevant information.

Examples

This example shows a typical document structure where the main element wraps the essential contents.

<html>
  <head>
    <title>Article: Free software</title>
  </head>
  <body>
    <header>
      <p>Welcome to CrazyArticles!</p>
      <nav>
        <a href="/">Home</a>
        <a href="/articles.html">Articles</a>
        <a href="/contactus.php">Contact us</a>
      </nav>
    </header>
    <main>
      <h1>Free software</h1>
      <p>Free software, software libre, or libre software is computer software that gives users the freedom to run the software for any purpose as well as to study, modify, and distribute the original software and the adapted versions.</p>
      <p>...</p>
    </main>
    <footer>
      <p>&copy; All rights reserved</p>
    </footer>
  </body>
</html>

Now, we have a document with a couple of articles. The main document, as well as both articles, has a central section delimited by the main element.

<html>
  <head>
    <title>Latest Articles</title>
  </head>
  <body>
    <main>
      <article>
        <header>
          <h1>Under the blue sky</h1>
          <p>Publshed: <time>2015-05-24</time></p>
        </header>
        <main>
          <p>Our dreams are the expression of what's in our souls...</p>
          <p>...</p>
        </main>
        <footer>
          <p>&copy; All rights reserved</p>
          <address>Jhon Doe (jhondoe@example.com)</address>
        </footer>
      </article>
      <article>
        <header>
          <h1>Welcome back</h1>
          <p>Publshed: <time>2015-05-10</time></p>
        </header>
        <main>
          <p>The sun was hiding again behind the grass taking away my hope of seeing her one more time...</p>
          <p>...</p>
        </main>
        <footer>
          <p>&copy; All rights reserved</p>
          <address>Jhon Doe (jhondoe@example.com)</address>
        </footer>
      </article>
    </main>
  </body>
</html>

Attributes

Global attributes

For information about global attributes refer to this list of global attributes in HTML5.

Events

Global events

For information about global events refer to this list of global events in HTML5.