Home > Developer > Web Develop
One of the most common mistakes people make in label use is to arbitrarily HTML5 <section> equivalent to <div>--specifically, which is used directly as a substitute (for styling). In XHTML or HTML4, we often see this code:
Daily Headlines<!--HTML 4-style code-to<divid="wrapper"><divid=" Header ">
Daily HeadlinesMy Super duper pageHeader content</div><divid= "main">page content</div>
<div id= "secondary" >< Span class= "PLN" >secondary content</div><div id= "footer" > footer content</div></div>
And now in the HTML5, it will be this:
<!--Please do not copy this code! This is wrong! -<section Id="Wrapper">My Super Duper Page<!--Header Content--<section id= "main" ><!--page Content-- </section><section id= "secondary" >< Span class= "PLN" ><!--secondary content--></ Section><footer><!--footer Content--></footer></ Section>
This is not used correctly:<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 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)
Emotional Diary<body>
My Super Duper Page<!--Header Content--<div Role="main"><!--Page content--</div> <aside Role="complementary"><!--secondary content--</ aside><footer><!--footer content --</footer>Emotional Diary
</BODY>Do not put all the list-type 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 <nav>:
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 Three 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 with <nav> and leave alone.
Common 2 kinds of HTML5 error syntax
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
