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).
