main 标签

来源：互联网发布：2016中国软件城市排名编辑：程序博客网时间：2024/04/27 17:13

HTML5 has added the new structural element <main> added to its specification last year. The purpose of this element is to indicate the important or primary portion of the document where main content is displayed. This <main> element will be added inside the <body> tag. Note that, befor <main> tag, body tag is used for denoting the content portion in the document. With this addition, body tag becomes the general content for the entire document and main tag represents the key part of the content. As the W3C specification clearly states that:

The main content of the body of a document or application. The main content area consists of content that is directly related to or expands upon the central topic of a document or central functionality of an application. ( W3C )

Where as, the definition of body tag takes the generic meaning of the content.

The body element represents the content of the document. ( W3C )

Some of the key points about using the <main> tag is:

You can use only once in the document.
If you use multiple times in a document, HTML validator would throw an error.
Also, the main element can not be used for decedent of an <article> , <aside> , <footer> , <header> , or <nav> elements. The reason behind this is that it is not an section element.
The challenging part on implementing the main element is that not all the browsers support this element. The easiest way to use this element is to add role as “main” for the existing div tags.
Note that this tag is primarily helpful to the screen readers to read the main part of the content.

<body>  <header role="website">  </header>  <div id="content" class="primary" role="main">  </div>  <footer role="footerinfo">  </footer></body>

If the browsers are supporting these element nowadays, then this same above markup could be like this:

<body>  <header role="website">  </header>  <main id="content" class="primary" role="main">  </main>  <footer role="footerinfo">  </footer></body>

Since this is only structural element, there is not need for displaying the example. Still there are lot of controversies around using this element. We have to wait and watch the future role of this element in the HTML5 world.

0 0