 |
| USE OF HTML5 MAIN TAG |
Introduction of <main> Tag in HTML5
Different tags are provided in HTML5 to specify headers, articles, and footers. Through these HTML tags, we know what the header content is and what the footer content is. Similarly, HTML5 gives you the <main> tag to specify the main content of the document.
The <main> tag is a new element in HTML5 which represents the main content area in the document. The content inside the tag should always be unique. For example in this element, you can specify an article by <article> element because the articles are unique in different webpages.
The <main> tag should not contain any content that is repeated. In this tag, you should not include the content below.
1. In this tag, you can not include sidebars.
2. You should not include navigational links inside the main tag.
3. Website header and logo can’t be inserted in the main tag.
4. You must not include search bar and copyright information in this tag.
<aside>, <header>, <footer> and <nav> tags should not be specified in the <main> tag. Also the <main> tag should also not be defined in these tags.
One thing to note is that you should not define more than one <main> element in a webpage. If you try to do this then the w3c throws validator error.
Syntax of HTML5 <main> Tag
The main syntax of the tag is given below.
<main>
// Content
</ main>
Like other HTML5 tags, the <main> tag is also introduced, so all browsers do not support it and they have no layout that how to display <main>. In such a situation, you should keep in mind that <main> always be displayed like block level elements. You can do this by CSS.
main
{
display: block;
}
Attributes of <main> Tag in HTML5
<main> tag supports all the global attributes (class, id etc.) and event attributes (onmouseover, onclick, etc) provided by HTML.
How to use the main tag in html5?
Example of HTML5 <main> Tag
The above example produces the below output.
 |
| MAIN TAG EXAMPLE |
Compatible Browsers
Fully supported browsers are given below for this <main> tag.1. Firefox 4.0
2. Google Chrome 6.0
3. Internet Explorer 12.0
4. Opera 11.1
5. Safari 5.0
Magnificent goods from you, man. I have understand your stuff previous to and you're just extremely magnificent.
ReplyDeleteI actually like what you've acquired here, really like what you are stating and the way in which you say it.
You make it entertaining and you still take care of to keep it wise.
I can not wait to read much more from you. This is really a great web site.
Pretty nice post. I just stumbled upon your weblog and wanted to say
ReplyDeletethat I've truly enjoyed browsing your blog posts. After all I'll
be subscribing to your feed and I hope you write again very soon!