How to use the main semantic element – HTML5

The main semantic element is the tag where the main content of a web page is inserted, in this post we will better understand it and its use cases.

How to use the main semantic element?

The <main> tag is another self-explanatory element that came with HTML5 to increase the semantics of pages.

We use the main semantic element when we need an element to insert the main content of the page.

The main content is the texts, images, tables that are related to the proposed theme of the link we entered.

An important feature of the main element is that it cannot be a child, be inside, some elements that are:

• article;
• aside;
• footer;
• header;
• nav;

This is because they have isolated use cases and conflict with the <main> tag.

obs: There are other blog posts talking about these elements, feel free to understand a little more about them too! Just go in the HTML category.

Also, another thing we should pay attention to in main is that its content must be unique.

In other words, we must not repeat the content inside the tag throughout the page, it must be explicit and once inside <main>.

Using main in practice:

We can use the main semantic element on any page as long as its content is the main content.

So let’s look at a product page simulation.

HTML:

<!-- header -->
<main>
    <h1>Long sleeve shirt</h1>
    <p>The long sleeve shirt is available in various sizes and colors.</p>
    <button>Buy</button>
</main>
<!-- footer -->

Note that there are content boundaries such as <header> and <footer>, which are elements that would be outside the context of the main page.

So these two would be out of the <main> as well, but note that the semantic code flow also leaves implicit the readability of the code

The top of the page is defined by the header, the footer by the footer.

And our element of this post, the main, as the main content in the center explaining about a product that in this case is a long sleeve shirt.

So in practice, we see that header and footer don’t need to add anything to the content of the product page, just make their separate roles.

The main, on the other hand, needs to explain everything the author of the page wants to detail about the shirt.

We then conclude that the main focus of the code is on the content of the shirt that is inside the main semantic element.

To exemplify more, we could have an <aside> tag, for example,  to insert a blog article on this page about situations on how to use the long-sleeved shirt.

So in this case the content of the aside element would be directly linked to the content of the main, but it’s not the main purpose of our page which is to sell the long-sleeved shirt product, cool right? 😀

Conclusion

We learned today that the main semantic element serves to add the main content of our page inside it.

We must not repeat throughout the page the same content that is inserted in the tag.

And we must also be careful that the <main> is not inserted inside some tags.

They are: article, aside, footer, header, and nav.

This is because the semantics of these tags do not meet the semantics of main, breaking the flow and semantics of the HTML document that will be inserted.

And that’s it for today, until the next post!