HTML - <main> Tag

Quiz

Introduction to <main> Tag

The HTML <main> tag is a semantic element that is used to identify the central content of a webpage that is unique and relevant to the primary purpose of the document. It is designed to include the main section of the webpage, excluding recurring elements like headers, footers and sidebars.

The <main> tag improves the accessibility and SEO as it allows screen readers and search engines to identify and to focus the important content. This tag is not nested within elements like <header>, <footer> or <article>.

Syntax

Following is the syntax of HTML <main> tag −

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

Attributes

HTML main tag supports Global and Event attributes of HTML.

Example : Basic Usage

Let's look at the following example, where we are going to consider the basic usage of the <main> tag.

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

Example : Excluding Nav and Footer

Consider the following example, where we are going to exclude the <nav> and <footer> tags.

<!DOCTYPE html>
<html>
    <style>
        body{
            color:green;
            font-family:verdana;
        }
    </style>
<body>
    <nav>
        <ul>
            <li>HTML</li>
            <li>JAVA</li>
            <li>PYTHON</li>
        </ul>
    </nav>
    <main>
        <h2>Our Courses</h2>
        <p>Welcome to TutorialsPoint</p>
    </main>
    <footer>
        <p>Contact us: info@Tutorialspoint.com</p>
    </footer>
</body>
</html>

Example : Using <article> Element

In the following example, we are going to use the <article> element along with the <main> tag.

<!DOCTYPE html>
<html>
    <style>
        body{
            text-align:center;
            color:#8e44ad ;
            font-family:verdana;
        }
    </style>
<main>
    <h1>TutorialsPoint</h1>
    <article>
        <h2>Courses</h2>
        <p>Search for the courses.</p>
    </article>
    <article>
        <h2>Coding Ground</h2>
        <p>Visit for different compilers.</p>
    </article>
</main>
</html>

Supported Browsers

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

html_tags_reference.htm

Print Page