Shulou(Shulou.com)06/02 Report--

This article mainly introduces the common misuse of HTML5, which has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

1. Use section as a substitute for div

One of the most common mistakes people see in the use of tags is to arbitrarily use the HTML5

Equivalent to

Specifically, it is directly used as a substitute (for styles). In XHTML or HTML4, we often see code like this:

Now in HTML5, it looks like this:

Please do not copy this code, this is wrong!

This is not correct. * * is not a style container. The * * section element represents the semantic part of the content that is used to help build a document summary. It should contain a head. If you are looking for an element to use as a page container (like the style of HTML or XHTML), consider writing the style directly on the body element, as Kroc Camen said. If you still need extra style containers, keep using div.

Based on the above ideas, here are examples 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)

If you are still not sure which element to use, the Guangzhou IT trainer suggests that you refer to HTML5 sectioning content element flowchart.

Feel free to use header and hgroup

It is pointless to write labels that do not need to be written.

(1) the header element represents a set of introductory or navigational auxiliary text and is often used as the header of section.

(2) when the head has a multi-layer structure, such as subheaders, subheadings, various identification words, etc., use hgroup to combine h2-h7 elements as the head of section.

Abuse of header

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

Please do not copy this code! Header-> is not required here

If your header element contains only one header element, discard the header element. Since the article element has guaranteed that the header will appear in the document summary, and header cannot contain multiple elements (as defined above), why write extra code. Just keep it simple and write it like this:

I also often see misuse of hgroup on the topic of headers. Sometimes public education in Shenzhen should not use hgroup and header at the same time:

The first question usually goes like this:

Please do not copy this code! Hgroup-> is not required here

In this case, remove the hgroup directly.

The second question is another unnecessary example:

Please do not copy this code! Header-> is not required here

If the only child element of header is hgroup, then why do you want header? If there are no other elements in the header (such as multiple hgroup), just remove the header.

Thank you for reading this article carefully. I hope the article "what are the common misuses of HTML5" shared by the editor will be helpful to you. At the same time, I also hope that you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.