Common 4 kinds of HTML5 error usage, you use a few wrong

One, do not use section as a substitute for Div

One of the most common mistakes people make in label use is to arbitrarily equate HTML5 with--specifically, directly as substitutes (for styling). In XHTML or HTML4, we often see this code:

Page content </div><div id= "secondary" > Secondary content </div><div id= "Footer" > Foote R content </div>

And now in HTML5, it will be this: please do not copy this code! This is wrong!

is not a style container. The **section element represents the semantic part of the content that is used to help build a document profile. It should consist of a head. If you're looking for an element to use as a page container (like HTML or XHTML style), consider writing the style to the BODY element, as Kroc Camen says. If you still need an extra style container, continue with the Div bar.

Based on the above thought, here's an example of the correct use of HTML5 and some ARIA roles features (note that depending on your own design, you may also need to add div)

<!--Header content--><div role= "main" ><!--page content--></div><aside role= " Complementary "><!--secondary content--></aside><footer><!--footer Content--></ Footer>

If you are still unsure of which element to use, then I suggest you refer to HTML5 sectioning content element flowchart

Second, use headers and hgroup only when needed

It's pointless to write labels that don't need to be written. Unfortunately, I often see headers and hgroup being misused by nonsense. You can read a detailed understanding of the two articles on the header and Hgroup elements, which I briefly summarize as follows:

The header element represents a set of introductory or navigational auxiliary text that is often used as the head of a section
When the head has a multi-layered structure, such as a sub-head, subtitle, a variety of identity text, etc., use Hgroup to combine H1-H6 elements as the head of a section.

Header abuse: Because the header can be used multiple times in a document, this style of code may be popular:

<!--article Content--

If your header element contains only a single header element, discard the header element. Since the article element has ensured that the head appears in the document profile, and the header cannot contain multiple elements (as defined above), then why write extra code. The simple point is that it's OK:

On the theme of headers, I also often see the hgroup of the wrong use. Sometimes hgroup and headers should not be used at the same time: if there is only one sub-head, if Hgroup can work well ... Is this nonsense?

If the only child element of the header is Hgroup, do you want the header to be a horse? If there are no other elements (such as multiple Hgroup) in the header, take the header straight away.

Third, do not put all the list-style links in the Nav

As HTML5 introduced 30 new elements (as of the release of the original text), our choice to construct semantic and structured tags became somewhat less cautious. In other words, we should not misuse the hyper-semantic elements. Unfortunately, Nav is such an example of abuse. The canonical description of the Nav element is as follows:

The nav element represents a chunk in a page that links to another page or to another part of the page, and a block containing 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. For example, there are often many links in footer, such as terms of service, home page, copyright notice page, and so on. The footer element itself is sufficient to cope with these situations, although the NAV element can also be used here, but usually we think it is unnecessary.

The key word is "primary" navigation. Of course, we can spray each other all day. What is called "the main". And that's what I personally define:

• The main navigation

• Search in the station

• Second-level navigation (slightly controversial)

• In-page navigation (e.g. long articles)

Since there is no absolute right or wrong, so according to an informal vote and my own explanation, the following situation, whether you put it or not, I do not put in:

• Paging control

• Social links (although some social links are also the main navigation, such as "about" "Favorites")

• Tags for blog posts

• Categories of blog Posts

• -Level navigation

• A long footer.

If you're not sure if you want 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:

If using section and HX are also appropriate, do not use Nav-hixie on IRC
For easy access, would you like to add a link to this nav tag in a "Quick jump"?

If the answer to these questions is no, then bow and leave alone.

Iv. common errors in Figure elements

The correct use of figure and figcaption is indeed difficult to navigate. Let's take a look at some common mistakes, not all of which are figures.

Above, I have told you not to write unnecessary code. The same is true of this mistake. I see a lot of websites that write all the pictures. For the sake of the picture, please do not add extra tags to it. You just make your own eggs ache, and not make your page content clearer.

The specification describes a figure as "some flowing content, sometimes with a caption that contains itself." It is generally referenced as a separate unit in the document flow. "This is the beauty of figure-it can be moved from the main content page to the sidebar without affecting the flow of the document.

These issues are also included in the previously mentioned HTML5 element flowchart. If it is purely to render a diagram, nor is it referenced elsewhere in the document, it is definitely not. Others are subject to availability, but at the outset you can ask yourself: "Does this picture have to do with context?" "If not, it may not be (perhaps)." Continue: "Can I move it to the appendix?" "If two questions are met, then it may be.

Logo is not a figure, there is nothing to say. This is a very common mistake. We can give the logo whether it should be H1 label and spray each other to the cows have finished home, but this is not the focus of our discussion. The real problem is the misuse of figure elements. Figure should only be referenced in the document, or surrounded by section elements. I don't think your logo is likely to be quoted in this way. Very simple, do not use figure. You just have to do this:

<!--more stuff on here--

It's not just pictures.

Another common misconception about figure is that it is only used by images. Figures can be video, audio, graphs, quotes, tables, a piece of code, a piece of prose, and any combination of them or any other. Don't confine the figure to the picture. The responsibility of web standards is to accurately describe content with tags

Need the Web front-end free course classmate, QQ login http://www.kgc.cn/index.php?tuin=7124, you can receive the free

Common 4 kinds of HTML5 error usage, you use a few wrong