What does the html5 main tag mean? Detailed introduction to the role of html5 main tag

html5 What does the main tag mean? What are the functions of the html5 main tag? This article mainly talks about the definition and specific functions of the html5 main tag, as well as detailed instructions on the use of the html5 main tag.

First of all, let’s take a look at what html main means:

html5 The definition and function of the main tag:

tag regulations The main content of the document. The content in the

element should be unique to the document. It should not contain content that appears repeatedly throughout the document, such as sidebars, navigation bars, copyright information, site logos, or search forms.

Note: More than one

element cannot appear in a document. The

element cannot be a descendant of

,

,

,

, or

. The

tag is new in HTML 5.

The

element was officially added to the W3C HTML specification back in 2013. So far, the definition of this element is pretty good, so now it’s time to take a closer look at when it’s appropriate to use it.

element. So, let’s get started.

The main purpose of the W3C specification

is to map ARIA's landmark function main to elements in HTML. This helps screen readers and assistive devices know where the main content of the page begins.

The W3C specification describes

as:

The main content of a document or application. The main content area consists of content that directly relates to or extends to the central topic of the document or the core functionality of the app.

Since the

element was included in the HTML specification, the element has reverted to its HTML4 definition.

The body element represents the content of the document.

html5 The specific role of the main tag:

It is worth noting to use the

element The catch is that it can only be used once per page. Why is it stipulated that a page can only be used once? Although I'm not interested in the specific details, some of the points seem to make sense.

Per specification, the W3C validator will throw an error if you try to use multiple

tags in a document.

Another requirement for the

element is that it cannot be used as a child element node of

,

,

,

,

.

Specific use of html5 main tag:

Just like other new HTML5 elements, not all browsers can recognize

, and To give it a preset style, you may want to set it as a block-level element in your own CSS file.

main {display:block;}

Sometimes, in order to support some lower versions of IE browsers, you may also need to use JavaScript to create this element.

<script type="text/javascript">document.createElement(&#39;main&#39;);</script>

Of course, you can also use html5shiv.

The easiest way to use the

element is to replace those

So, what should it look like in practice? Below is the structure of the document before using the

element.

<header>Header</header>
<div id="content">Main Content</div>
<footer>Footer</footer>

The following uses the

element to rewrite the document.

<header>Header</header>
<main id="content">Main Content</main>
<footer>Footer</footer>

Okay, this is so simple that in less than a minute we can rewrite the document into the latest HTML5 style.

【Related recommendations】

What does the HTML5 tag mean? Detailed explanation of the basic usage of HTML5 tag

html What does textarea mean? How to get newlines and spaces in textarea tags?

The above is the detailed content of What does the html5 main tag mean? Detailed introduction to the role of html5 main tag. For more information, please follow other related articles on the PHP Chinese website!