main Tag in HTML - Scaler Topics

Overview

Before getting started with the main tag in HTML, let us get a short idea about what are tags in HTML.

Basically, HTML tags are the special keywords that are used to indicate the beginning and end of an HTML element in any HTML document.

This article will deal with the main tag in HTML. So before getting started let's get an overview of what is main tag in HTML.

The main tag in HTML is basically used to specify the main content of an HTML document. By “main content”, we mean the part of the page that is unique to that page (the part that is not shared with other pages).

html-main-tag

We have got a brief idea of what is the main tag in HTML. Now let us see the syntax of the main tag in HTML.

Syntax:

Below given is the syntax for the main tag in HTML.

Each HTML tag begins with a pair of opening angular brackets (<>). Between these brackets follows the name of the tag, here which is the "

" tag.

The end of the tag is denoted by a pair of closing angular brackets (</>), and here it is referred to by "

". The closing tag is mandatory in the main tag in HTML, unlike a few other tags.

Inside these sets of brackets follow the content of the tag.

Attributes

The main tag in HTML only supports the global attributes and event attributes. Let us get a short overview of the global attributes and event attributes.

Global attributes - There are some attributes that are used for any specific element and we can't use them in all other elements. like src attributes can only be mentioned in $<img>$ or $<link>$ tag and no other elements, but Global attributes are the public attributes that are common to all the HTML elements. Some of the examples of global attributes are autofocus, hidden, id, draggable, etc.
Event attributes - Whenever we perform any action on a web page, such as click, hover, drag, scroll, etc. it triggers an event. Such events are handled by javascript code written by us. Event handler attributes enable us to invoke a script (which is usually written in javascript) from within our HTML.The script is invoked whenever a certain event occurs. Each event handler content attribute deals with a different event.Some of the examples of event attributes are onclick, ondrag, onkeypress, etc.

How to Use the main Tag in HTML?

While using the main tag in HTML we can consider the below points --

The $<main>$ element can only be used once in each HTML file. It is followed by a closing tag, $</main>$ , which should be placed at the end of the content
Main tags must be used outside other structural elements such as $<head>$ and its closing tag, and $<footer>$ and its closing tag.

Example

The content of a main element should be unique (not shared with other pages) to the document. It means that the content of the main element must not be shared with any other pages (or webpages) of our HTML document(or website).
It is not recommended to use the main tag in HTML for the content that is repeated across multiple pages of a document or document sections such as sidebars, navigation links, copyright information, site logos, search forms, etc.
Unlike body, heading type elements, main tag in HTML doesn't affect the overall outline(structure) of the document.

Examples

After having a brief discussion on the main tag, let us look at some examples to clearly understand the usage of the main tag in HTML.

Basic Example of HTML Main Tag

Code:

Output:

html-main-tag-example-output

Explanation

In the above example, we are using the main tag in HTML. You can see that different tags like the paragraph tag, heading tags, and article tags are embedded inside one main tag. The main tag starts and ends with <main> and </main>. Within that, our main content is lying.

Style the Main Element with CSS

Let us now see how can add some style sheets in our main tag to make our output look different from the regular output.

Output

main-tag-output-example-card

Explanation

In the above example, we are using CSS to style the main tag elements. We can achieve this through either inline or external CSS in our code. For example, in the above code, we have created a card with CSS defined particular background color, margin, padding, box-shadow, hover effect, etc. for our main tag. Hence, the CSS will be applied to any content we place inside our main tag. This is how you can style your main tag elements in HTML.

Browser Support

Almost all the modern browsers support the main tag in HTML, since, it is a very widely used tag. Below given is the list of some popular browsers that support the main tag in HTML --

Desktop browsers

Chrome
Edge
Firefox
Opera
Safari

Android browsers

WebView Android
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet

main-tag-browser-support

Conclusion

In this article, we learned about the main tag in HTML. Let us recap the points we discussed throughout the article:

The main tag in HTML surrounds the main content of the page. It starts with $<main>$ tag and ends with $</main>$ tag.
Unique and important content are written inside the main tag in HTML.
We must exclude any content that is repeated across multiple pages (such as navigation bars, headers, footers, etc) inside our main tag in HTML.
An HTML document can have more than one main element, but only one can be visible, otherwise all other instances must be hidden.
The $<main>$ tag in HTML supports both the Global attributes and the Event attributes.
Global attributes are attributes common to all the HTML elements. And event handler attributes allow us to handle events.
We can add CSS styling to change the layout of the main content inside the $<main>$ tag.

Below given is a list of related tags

<main> Tag in HTML