First, do not use the section as a Div substitute
One of the most common mistakes people make in tag usage is to HTML5 <section> equivalent to <div>--specifically, directly as a substitute (for styling). In XHTML or HTML4, we often see this code:
| The code is as follows | Copy Code |
| <!--HTML 4-style code--> <!--Please do not copy this code! This is wrong! --> |
|
This is not the correct use:<section> 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 contain a head. If you're looking for an element to use as a page container (like HTML or XHTML style), consider writing the style directly to the BODY element, as Kroc Camen says. If you still need an extra style container, continue using the div.
Based on these ideas, the following are the correct examples of using HTML5 and some ARIA roles features (note that you may also need to add div according to your own design)
| The code is as follows | Copy Code |
| <body> <!--Header content--> <div role= "Main" > <!--Page content--> </div> <aside role= "Complementary" > <!--secondary content--> </aside> <footer> <!--Footer content--> </footer> </body> |
|
If you are still unsure of which element to use, then I suggest you refer to HTML5 sectioning content element flowchart
Second, use header and Hgroup only when needed
Writing labels that don't need to be written is of course meaningless. Unfortunately, I often see headers and hgroup being misused by the senseless. You can read the two articles about header and Hgroup elements for a detailed understanding of the contents, which I summarize briefly 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-layer structure, such as a child head, subtitle, various logo text, etc., use Hgroup to combine H1-H6 elements as the head of section
Abuse of header
Because headers can be used more than once in a document, this style of code may be welcome:
<!--Please do not copy this code! Header--> is not required here
| The code is as follows | Copy Code |
| <article> <!--Article content--> </article> |
|
If your header element contains only one header element, discard the header element. Since the article element has guaranteed that the head will appear in the document profile, and the header cannot contain more than one element (as defined above), then why write the extra code. The simple point of writing this is OK:
| The code is as follows | Copy Code |
| <article> <!--Article content--> </article> |
|
The wrong use of
On the subject of headers, I also often see Hgroup error usage. Sometimes you should not use both Hgroup and headers:
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
