<main> tag in HTML

On freecodecamp responsive design course, <main> tag in html is mentioned as a tag that you put the main content of the page on and the content inside it has to be unique (no repeated pieces of code such as navigation bars header footer etc). But is it really useful? and how to know what is the content that is actually main to my page?

Thanks in advance!

Solution

Introduced in HTML5, the <main> tag is for information identification only and helps isolate the main content inside the tag so it can picked up by assistive technologies to skip reused content like navigation and footers so that the user can get quickly to the page's main content. Accommodating assistive technology is a huge part of successful web development.

Structuring HTML such that it can be properly indexed by search engines for things like SEO is also a part of learning how to optimize tags such as <main>. It is an important tool and I would utilize it.

You would use it as such:

    <!DOCTYPE html>
<html>
<head>
<title>Graduation Ceremony Summer 2022</title>
</head>
<body>

<header>The Lawson Academy:
<nav>
<ul>
<li><a href="courses.html">Courses</a></li>
<li><a href="fees.html">Fees</a></li>
<li><a>Graduation</a></li>
</nav> 
</header>

<!--you want to put all the core information about your page inside main. Just think of all the information that you would want to know if you were trying to understand and gather information quickly -->
<main>

<h1>Graduation</h1>

<nav>
<ul>
<li><a href="#ceremony">Ceremony</a></li>
<li><a href="#graduates">Graduates</a></li>
<li><a href="#awards">Awards</a></li>
</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>Clara Faulkner</li>
<li>Anastasia Luccio</li>
<li>Ebenezar McCoy</li>
<li>Karrin Murphy</li>
<li>Eloisa Faulkner</li>
<li>Susan Rodriguez</li>
</ul>

<h2 id="awards">Awards</h2>
<ul><li>Clara Faulkner</li>
<li>Eloisa Faulkner</li>
<li>Karrin Murphy</li>
<li>Susan Rodriguez</li>
</ul>

</main>


<footer> Copyright 2012 B.lawson</footer>

</body>
</html>