How to use the main tag in html5? ~ MyBlogHelp– A Blog for SEO, Blogging, Web Design, Web Development

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.