Detailed explanation of examples of main element in h5

As early as 2013, the

element was officially added to the W3C HTML specification. Up to now, the definition of this element has been very complete, so now it is time to take a deeper look at when it is appropriate to use

　W3C specification

　The main purpose of

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.

Details

It is noteworthy to use the

element One thing is, 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.

According to the specification, if you try to use multiple

tags in a document, the W3C validator will throw an error.

Another requirement for the

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

,

,

,

,

.

Use

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

and add preset styles to it. You may need to Make it a block-level element in its 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 the

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

element.

    <header>Header</header>
    <p id="content">Main Content</p>
    <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.

Summary

As you can see, using the

element is super easy and only takes a few minutes, so now it’s really time to bring in the

It’s time for website development.

The above is the detailed content of Detailed explanation of examples of main element in h5. For more information, please follow other related articles on the PHP Chinese website!