Home > Article > Web Front-end > Be sure to pay attention to three common incorrect usages of HTML5

Be sure to pay attention to three common incorrect usages of HTML5

php中世界最好的语言Original: 2018-01-29 09:41:431801browse

This time I will bring you three common incorrect usages of HTML5 that you must pay attention to. What are the precautions. Here are actual cases. Let’s take a look. one time.

One of the most common mistakes people make when using tags is to equate HTML5's 2f8332c8dcfd5c7dec030a070bf652c3 with dc6dce4a544fdca2df29d5ac0ea9906b - specifically, using it directly as a replacement (for styling purposes) ). In XHTML or HTML4, we often see code like this:

<!-- HTML 4-style code --><div id="wrapper">
    <div id="header">
        <h1>My super duper page</h1>
        Header content  </div>
    <div id="main">
        Page content    </div>
    <div id="secondary">
        Secondary content   </div>
    <div id="footer">
        Footer content  </div></div>

But now in HTML5, it will be like this:

Please do not copy these codes! This is wrong!

<section id="wrapper">
    <header>
        <h1>My super duper page</h1>
        <!-- Header content -->
    </header>
    <section id="main">
        <!-- Page content -->
    </section>
    <section id="secondary">
        <!-- Secondary content -->
    </section>
    <footer>
        <!-- Footer content -->
    </footer></section>

This usage is incorrect: **

is not a style container. The **section element represents the semantic part of the content used to help build a document summary. It should contain a header. If you're looking for an element that acts as a page container (like HTML or XHTML style), then consider writing the style directly to the body element, as Kroc Camen suggests. If you still need additional style containers, stick with divs.

Based on the above ideas, the following are examples of correct use of HTML5 and some ARIA roles features (note that you may also need to add divs according to your own design)

<section id="wrapper">
    <header>
        <h1>My super duper page</h1>
        <!-- Header content -->
    </header>
    <section id="main">
        <!-- Page content -->
    </section>
    <section id="secondary">
        <!-- Secondary content -->
    </section>
    <footer>
        <!-- Footer content -->
    </footer></section>

This usage is incorrect: **

Based on the above ideas, the following are examples of correct use of HTML5 and some ARIA roles features (note that according to your own design, you may also need to add div)

<body><header>
    <h1>My super duper page</h1>
    <!-- Header content --></header><div role="main">
    <!-- Page content --></div><aside role="complementary">
    <!-- Secondary content --></aside><footer>
    <!-- Footer content --></footer></body>

2. Use header and hgroup only when needed

It is of course meaningless to write tags that do not need to be written. Unfortunately, I often see headers and hgroups misused for no purpose. You can read the two articles about header and hgroup elements for a detailed understanding. I briefly summarize the contents as follows:

The header element represents a set of introductory or navigation properties auxiliary text, often used as the header of the section

When the header has multiple layers of structure, such as sub-headers, subtitles, various logo texts, etc., use hgroup to combine h1-h6 elements as Section header

Abuse of header

Since header can be used multiple times in a document, this code style may be popular:

请不要复制这段代码！此处并不需要header –>
<header>
    <h1>My best blog post</h1>
</header>
<!-- Article content --></article>

If your header element only contains one header element, then discard the header element. Since the article element already guarantees that the header will appear in the document summary, and the header cannot contain multiple elements (as defined above), why write extra code. Simply write it like this: Incorrect use of

<article>
    <h1>My best blog post</h1>
    <!-- Article content --></article>

On the topic of headers, I often see the incorrect use of hgroup. Sometimes hgroup and header should not be used at the same time:

If there is only one sub-header

if hgroup will work fine by itself. . . Isn’t this nonsense?

The first question is usually like this:

请不要复制这段代码!此处不需要hgroup –>
    <hgroup>
        <h1>My best blog post</h1>
    </hgroup>
    <p>by Rich Clark</p></header>

In this example, just remove the hgroup and let the heading run smoothly.

<header>
    <h1>My best blog post</h1>
    <p>by Rich Clark</p></header>

The second question is another unnecessary example:

请不要复制这段代码!此处不需要header –>
<hgroup>
    <h1>My company</h1>
    <h2>Established 1893</h2>
</hgroup></header>

If header is the only child element It's hgroup, so what else needs to be done with the header? If there are no other elements in the header (such as multiple hgroups), just remove the header directly.

<hgroup>
    <h1>My company</h1>
    <h2>Established 1893</h2></hgroup>

3. Don’t put all list-style links in nav

With the introduction of 30 new elements in HTML5 (as of the time of the original publication), we are constructing semantics The choice of and structured tags has also become a bit careless. That said, we shouldn't abuse hyper-semantic elements. Unfortunately, nav is an example of such an abuse. The specification of the nav element is described as follows:
The nav element represents a block in the page that links to other pages or other parts of this page; a block that contains navigation connections.

Note: Not all links on the page need to be placed in the nav element - this element is intended to be used as the main navigation block. To give a specific example, there are often many links in the footer, such as terms of service, home page, copyright statement page, etc. The footer element itself is sufficient to handle these situations. Although the nav element can also be used here, we usually think it is unnecessary.

The key word is "main" navigation. Of course we could spend the whole day telling each other what "main" is. And I personally define it like this:

Main navigation

Site search

Secondary navigation (slightly controversial)

In-page navigation (such as Very long article)

Since there is no absolute right or wrong, so based on an informal vote and my own explanation, in the following situations, whether you let it go or not, I won’t put it in the middle anyway:

PagingControl

Social links (although some social links are also primary navigation, such as "About" and "Favorites")

Tags for blog posts

Classification of blog posts

Three-level navigation

Too long footer

If you are not sure whether to put a series of links in nav, ask yourself : "Is it the main navigation?" To help you answer this question, consider the following first principles:

Don't use nav if using section and hx are equally appropriate — Hixie on IRC

For easy access, will you add a link to this nav tag in a "quick jump"?

If the answer to these questions is "no," just bow down and go off alone.

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to the php Chinese website Other related articles!

Be sure to pay attention to three common incorrect usages of HTML5

Related articles