Computer >> Computer tutorials >  >> Programming >> HTML

How to use the HTML <main> Element

Learn how to use the HTML <main> element.

The HTML <main> element is used as a container to represent the main/dominant part of your page content inside the <body element.

Example:

<body>
  <header><!-- Header content --></header>
  <main>
    <article>
      <h3>Google Chrome</h3>
      <p>Paragraph</p>
    </article>

    <article>
      <h3>Headline</h3>
      <p>Paragraph</p>
    </article>

    <article>
      <h3>Headline</h3>
      <p>Paragraph</p>
    </article>
  </main>
  <footer><!-- Footer content --></footer>
</body>

The <main> element contains the content that is central to the topic of your document.

While the <header> and <footer> elements also contain content (usually links and logos), they can’t considered the main part of your website, which is why you position them outside of he <main> element.

Unlike the <article> element, which also a content container, the <main> element should only be used once within the same HTML document.

For example

<main>
  <article>
    <h1>Title of your post</h1>
    <p>Paragraph</p>
    <p>Paragraph</p>
    <img href="your-image.jpg" alt="description of image" />
    <p>Paragraph</p>
    <p>Paragraph</p>
  </article>
</main>

The website you’re reading on right follows a similar HTML markup structure. You can see it for yourself if you right-click on this website and click Inspect.

The <main> tag is one of many HTML tags used to define container elements. Some of the most commonly used HTML container elements are:

<section>, <article> , <header>, <footer>,<form>, and <div> (which is a generic tag that we use if none of the other tags apply).