First, let's take a look at what HTML main means:
HTML5 the definition and function of the main tag:
<main> tags specify the main content of the document.
The content in the <main> element should be unique to the document. It should not contain content that recurs in a document, such as a sidebar, navigation bar, copyright information, site logo, or search form.
Note: In a document, more than one <main> element cannot appear. The <main> element cannot be a descendant of the following elements:<article>, <aside>, <footer>,
The <main> tag is a new label in HTML 5.
As early as 2013, the,<main> element was formally added to the HTML specification, so far the definition of the element has been perfected, so it is time to delve into the appropriate use of <main> elements. So, let's get started.
Specifications
The main purpose of <main> is to map the ARIA's iconic role to elements in HTML. This can help those screen reading devices and assistive devices know where the main content of the page starts.
The specification will describe <main> as:
The primary content of the document or application. The main content area consists of content that is directly related to or extended to the central theme of the document or the core functionality of the app.
Since the <main> element is contained in the HTML provisions, the,<body> element is reverted to its definition in HTML4.
The BODY element represents the content of the document.
HTML5 main tag specific use of the role:
One thing to note about using <main> elements is that it can only be used once per page. Why do you have to specify that a page can only be used once? Although I am not interested in specific details, some points of view still seem to be more meaningful.
By specification, if you try to use multiple <main> tags in a document, the validator will throw an error.
Another rule of the <main> element is that it cannot be used as <article>,
HTML5 the specific use of the main tag:
Just like other HTML5 new elements, not all browsers will be able to recognize <main>, and add a preset style to it, you may need to set it as a block-level element in your own CSS file.
main {display:block;}Sometimes, in order to support some of the lower versions of IE, you may also need to create the element using JavaScript.
<script type= "Text/javascript" >document.createelement (' main ');</script>Of course, you can also use Html5shiv.
The simplest way to use <main> elements is to replace those <div> elements whose IDs or Class values are main or content.
So, what should it look like in practice? Here is the document structure before using the <main> element.
The following uses the <main> element to overwrite the document.
Well, it's so simple that we can rewrite the document into a trendy HTML5 style in less than a minute.
"Recommended"
What does the html5<progress> label mean? The basic usage of the html5<progress> tag is detailed
What does HTML textarea mean? How do I get line breaks and spaces in a textarea tag?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
