<main> Tag in HTML
![JavaScript Course With Certification: Unlocking the Power of JavaScript](https://www.scaler.com/topics/images/mrinal_bhattacharya.webp)
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).
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 "
The end of the tag is denoted by a pair of closing angular brackets (</>), and here it is referred to by "
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 or 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 element can only be used once in each HTML file. It is followed by a closing tag, , which should be placed at the end of the content
- Main tags must be used outside other structural elements such as and its closing tag, and 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:
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
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
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 tag and ends with 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 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 tag.
Related tags
Below given is a list of related tags