HTML <main> Tag Definition, Usage and Examples

The <main> HTML Tag indicates the document’s primary content within the document’s <body>. The primary content area contains content that is directly related to or expands upon the document’s or application’s central topic or feature. To make use of the <header> HTML Tag, the developer should provide the primary content of the document. The <main> HTML Tag is part of the style and semantic tags category in HTML Element Reference. The attributes of the <main> HTML tag are global attributes and event attributes. 

<main> code block example to learn how it works is given below. 

<main>
>Main content<
</main>

The second example usage of the “<main>” code block example is given below. 

<main>
  <h1>Photosynthesis</h1>
  <p>Photosynthesis is a process that plants and other organisms use to turn sunlight into food..</p>
  <article>
    <h2>Light Energy</h2>
    <p>light energy is used to..</p>
    <p>... </p>
    <p>... </p>
  </article>
  <article>
    <h2>Green Plants</h2>
    <p>During photosynthesis in green plants,..</p>
    <p>... </p>
    <p>... </p>
</main>

What is <main> HTML Tag?

The <main> HTML Tag is used to convey the document’s primary information. The content inside the <main> element should be unique for the document. Which includes the sidebars, navigation links, copyright information, site logos, and search forms. 

How to Use <main> HTML Tag?

To use <main> HTML Tag, the developer should provide the content between the <main> and </main> HTML Tags. A document may not have more than one <main> HTML Tag. The <main> HTML Tag cannot be a descendant of the <article>, <aside>, <footer>, <header>, or <navigation> HTML Tags.

Example Usage of <main> HTML Tag?

Listed below is the following example of usage of <main> HTML Tag. 

<header>The Sun</header>
<main>
    <p>By far the biggest object in the solar system is the Sun.</p>
    <p>The magnetic field of the Sun is extremely strong (by terrestrial standards) and extremely complicated.</p>
</main>

What are the Attributes of <main> HTML Tag?

There are multiple attributes for the <main> HTML Tag. The following attributes are listed below.

  • Global Attributes: The <main> HTML tag supports Global Attributes. All HTML elements, even those not specified in the standard, can have global attributes. This means that any non-standard elements must nevertheless allow certain characteristics, even if using such elements makes the content non-HTML5 compliant.
  • Event Attributes: The <main> HTML tag supports Event Attributes. The Event Attributes always have a name that begins with “on” and is followed by the name of the event for which it is intended. They specify a script to run when an event of the defined type is dispatched to the element with the specified attributes.

What are the Default CSS Settings for <main> HTML Tag?

The following are the Default CSS Settings for the <main> HTML Tag.

<html>
<head>
<style>
main {
  margin: 0;
  padding: 4px;
  background-color: white;
}

main > h1, p, .browser {
  margin: 11px;
  padding: 4px;
}

.browser {
  background: black;
}

.browser > h2, p {
  margin: 5px;
  font-size: 95%;
}
</style>
</head>
<body>

What are the Related other HTML Tags to <main>?

The other related HTML Tags to <main> HTML Tag are listed below.

  • <div> HTML Tag: The <div> HTML Tag is related to <main> HTML Tag because they are both style and semantic tags. The <div> HTML Tag acts as a container for flow content. It has no influence on the text or layout unless and until it is styled with CSS.
  • <summary> HTML Tag: The <summary> HTML Tag is related to <main> HTML Tag because they are both style and semantic tags. The <summary> HTML Tag specifies a summary, caption, or legend for the disclosure box of a <details> HTML Tag.
  • <style> HTML Tag: The <style> HTML Tag is related to <main> HTML Tag because they are both style and semantic tags. The <style> HTML Tag  specifies the style of a document or section of a document. It contains CSS that is applied to the contents of the <style> HTML Tag containing document.
  • <header> HTML Tag: The <header> HTML Tag is related to <main> HTML Tag because they are both style and semantic tags. The <header> HTML Tag represents introductory material, which is often a series of introductory or navigational aids.
Holistic SEO
Follow SEO

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.