What does the html5 main tag mean? Detailed introduction to the role of html5 main tag-H5 Tutorial-php.cn

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;} Copy after login Sometimes, in order to support some lower versions of IE browsers, you may also need to use JavaScript to create this element.

document.createElement('main'); Copy after login Of course, you can also use html5shiv.

The easiest way to use the element is to replace those <div&gt whose ID or Class value is main or content. ; element.

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

Header Main Content Footer Copy after login The following uses the element to rewrite the document.

Header Main Content Footer Copy after login Okay, this is so simple that in less than a minute we can rewrite the document into the latest HTML5 style.

【Related recommendations】

标签是什么意思？HTML5 标签的基本用法详解">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?