HTML - <main> Tag

HTML <main> tag is used to represent the dominant content of the HTML body element. It specifies the main or important content of the document.

It can be used only once per page and can’t use as a descendent of the article, aside, footer, header, and nav elements. The content of the <main> tag should be unique to the document. The <main> tag does not affect the DOM’s concept of the structure of the page.

Syntax

<main>
   .....
</main>

Attribute

HTML main tag supports Global and Event attributes of HTML.

Examples of HTML main Tag

Bellow examples will illustrate the usage of main tag. Where, when and how to use main tag to create main elements of the website.

Creating main Content of the Document

The following example code showing the usage the HTML <main> tag. When we run the above code, it will generate an output consisting of the text displayed on the webpage.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML main Tag</title>
</head>

<body>
   <!--create a main element-->
   <p>Example of the HTML 'main' element(tag).</p>
   <main>
      <article>
         <h1>HTML</h1>
         <p>Hyper Text Markup Language</p>
         <p>
            The HyperText Markup Language or HTML is the 
            standard markup language for documents designed
            to be displayed in a web browser.
         </p>
         <h1>CSS</h1>
         <p>Cascading Style Sheet</p>
      </article>
   </main>
</body>

</html>

Styling Main Content of the Page

Consider the following example, where we are going to use the <main> tag and applying the CSS properties to style the main element.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML main Tag</title>
   <style>
      header {
         font-size: 10px;
      }

      main {
         background-color: green;
         color: white;
         padding: 10px;
      }

      main p {
         margin: 10px 10px;
      }
   </style>
</head>

<body>
   <header>Frontend Development</header>
   <!--create a main element-->
   <main>
      <p>
         Front-end web development is the development
         of the graphical user interface of a website.
      </p>
      <p>
         Through the use of HTML, CSS, and JavaScript,
         so that users can view and interact with that 
         website.
      </p>
   </main>
</body>

</html>

Navigating to the Main Content

In this example, we are creating an anchor link that contains the source(destination) as the ‘id’ of the ‘main’ element. When the user clicks on the anchor link, it will skip the navigation links(i.e. between link and main element).

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML main Tag</title>
   <style>
      ul {
         list-style: none;
         height: 1600px;
      }

      ul li {
         width: 100px;
         background-color: lightgreen;
         padding: 10px;
         border-bottom: 1px solid black;
      }

      ul li a {
         text-decoration: none;
         margin: 10px;
      }

      main {
         padding: 10px;
      }
   </style>
</head>

<body>
   <p>Example of the HTML 'main' element</p>
   <a href="#maincontent">Skip to main content</a>
   <nav>
      <ul>
         <li>
            <a href="">Home</a>
         </li>
         <li>
            <a href="">About</a>
         </li>
         <li>
            <a href="">Blog</a>
         </li>
         <li>
            <a href="">ContantUs</a>
         </li>
      </ul>
   </nav>
   <main id="maincontent"> 
      <p>
         It can be used only once per page and can’t use 
         as a descendent of the article, aside, footer, header, 
         and nav elements.

         The content of the <main> tag should be unique to
         the document. The <main> tag does not affect the 
         DOM’s concept of the structure of the page.
      </p> 
   </main>
</body>

</html>

Supported Browsers

Tag
main	Yes 26.0	Yes 12.0	Yes 21.0	Yes 7.0	Yes 16.0

html_tags_reference.htm