If you use <nav> / <header> / <footer> etc. to structure your document, you can also use <main> to identify the main content of the document. Doing so provides a navigable document structure for assistive technology users as well as styling hooks for devs.
We have seen the different sectioning elements of HTML5, so why didn't we talk about the <main> element earlier in this part of the course? Shouldn't <main>...</main> be used in place of <div class="main">...</div>?
The <main> element is supported by major modern browsers (see the corresponding support table).
This element is subject to some constraints:
There must not be more than one <main> element in a document,
It must not be a descendant of an <article>,<aside>, <footer>, <header>, or <nav> element.
And finally, here are some examples (from the HTML5 specification) that mix the <main> element with other sectioning elements already seen in the course:
<!-- other content -->
<main>
<h1>Skateboards</h1>
<p>The skateboard helps kids to get around.</p>
<article>
<h2>Longboards</h2>
<p>Longboards are a type of skateboard with a longer
wheelbase and larger, softer wheels.</p>
<p>... </p>
<p>... </p>
</article>
<article>
<h2>Electric Skateboards</h2>
<p>These no longer require the propelling of the skateboard by means of the feet; rather an electric motor propels the board, fed by an electric battery.</p>
<p>... </p>
<p>... </p>
</article>
</main>
<!-- other content -->
In this other example, the <main> element contains a <nav> element consisting of links to subsections of the main content:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Graduation Ceremony Summer 2022</title>
</head>
<body>
<header>The Lawson Academy:
<nav>
<h2>Click these links to navigate...</h2>
<ul>
<li><a href="courses.html">Courses</a></li>
<li><a href="fees.html">Fees</a></li>
<li><a>Graduation</a></li>
</ul>
</nav>
</header>
<main>
<h1>Graduation</h1>
<nav>
<h2>Please choose:</h2>
<ul>
<li><a href="#ceremony">Ceremony</a></li>
<li><a href="#graduates">Graduates</a></li>
<li><a href="#awards">Awards</a></li>
</ul>
</nav>
<h2 id="ceremony">Ceremony</h2>
<p>Opening Procession</p>
<p>Speech by Valedictorian</p>
<p>Speech by Class President</p>
<p>Presentation of Diplomas</p>
<p>Closing Speech by Headmaster</p>
<h2 id="graduates">Graduates</h2>
<ul>
<li>Eileen Williams</li>
<li>Andy Maseyk</li>
<li>Blanca Sainz Garcia</li>
<li>Clara Faulkner</li>
<li>Gez Lemon</li>
<li>Eloisa Faulkner</li>
</ul>
<h2 id="awards">Awards</h2>
<ul>
<li>Clara Faulkner</li>
<li>Eloisa Faulkner</li>
<li>Blanca Sainz Garcia</li>
</ul>
</main>
<footer>Copyright 2022 B.lawson</footer>
</body>
</html>
Best practice: for accessibility matters, a best practice is to split your page content into "regions" defined by the five 5 elements (aside, footer, header, main and nav) learned during Module 1.
The main element in the W3C specification
On MDN's Web Docs: the main element