HTML - <main> Tag

The 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

Following is the syntax of the <main> tag −

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

Example

The following program showing the usage the HTML <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>
         <p>...</p>
         <p>...</p>
      </article>
   </main>
</body>
</html>

When we run the above code, it will generate an output consisting of the text displayed on the webpage.

Example

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

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

On running the above code, the output window will pop up, consisting of the text along with a CSS applied to it is displayed on the webpage.

Example

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;
      }

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

      ul li a {
         text-decoration: none;
         margin: 10px;
         justify-content: space-between;
      }

      main {
         background-color: bisque;
         padding: 10px;
         letter-spacing: 1px;
         position: relative;
      }
   </style>
</head>
<body>
   <p>Example of the HTML 'main' element</p>
   <a href="#maincontent">Skip 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>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Harum quibusdam, veritatis quidem sit voluptates provident sunt enim. Enim, eum quisquam fugit reprehenderit fuga quibusdam voluptatem, perferendis impedit ducimus eligendi ea.</p> 
   </main>
</body>
</html>

When we run the above code, it will generate an output consisting of the navigation text along with an anchor link on the webpage. When the user clicks the link, it starts to skip and takes them to the main content.

html_tags_reference.htm
Advertisements