Avoid six common HTML5 errors (3-4 )-

3. do not put all plain-style links in nav. as HTML5 introduces 30 new elements (as of the release of the original article ), our selection of semantic and structured tags has become less cautious. That is to say, we should not abuse the hyper-semantic elements. Unfortunately, nav is like this ...,. 3. Do not put all links in nav.

With HTML5 introducing 30 new elements (as of the time of release of the original article), our selection of semantic and structured tags has become somewhat less cautious. That is to say, we should not abuse the hyper-semantic elements. Unfortunately, nav is an example of abuse. The specification of the nav element is described as follows:

The nav element is a link group that can be used as page navigation. The navigation element links to other pages or other parts of the current page.

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 the terms of service, home page, and copyright notice page. The footer element itself is sufficient to cope with these situations. Although the nav element can also be used here, it is generally considered unnecessary.

The key word is the "Main" navigation. Of course, we can spray each other for a whole day ". I personally define it as follows:

• Main navigation

• Intra-Site Search

• Second-level navigation (slightly controversial)

• Navigation on the page (for example, a long article)

Since there is no absolute right or error, according to an informal vote and my own explanation, no matter whether you put it or not

Medium:

• Paging Control

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

• Blog Post tag

• Blog articles

• Third-level navigation

• Too long footer

If you are not sure whether 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 primary principles:

If you use section and hx as well, do not use nav-Hixie on IRC for convenient access. Will you add a link to this nav tag in a "quick jump?

If the answer to these questions is "no ",

Bow down and leave alone.

4. Common Errors of the figure Element

Correct use of figure and figcaption is indeed difficult to control. Let's take a look at some common errors.

Not all images are figure

In the previous article, I told you not to write unnecessary code. The same is true for this error. I have seen many websites write all the images in figure. Do not add additional labels to the image. You just make yourself hurt, but not make your page content clearer.

In the specification, the figure is described as "Some flowing content, sometimes containing its own title description. It is generally referenced as an independent unit in the Document Stream ." This is exactly the beauty of figure-it can be moved from the main content page to the sidebar without affecting the Document Stream.

These issues are also included in the HTML5 element flowchart mentioned earlier.

If the image is purely for rendering purposes and is not referenced elsewhere in the document, it is definitely not

The Logo is not figure

Further, the logo does not apply to figure. Below are some common code snippets:

 02
 
  
03 04
  
   
05 06
  07 My company name 08 09
 10
 11
 
  
12
  
   
13 14
  15
 

There's nothing to say. This is a common error. We can try to determine whether the logo should be an H1 tag, but this is not the focus of our discussion. The real problem lies in the misuse of the figure element. Figure should only be referenced in the document or surrounded by section elements. I think your logo is not very likely to be referenced in this way. Simple. Do not use figure. You only need to do this:

 
      2      My company name    3      
      4    
 

Figure is not just an image

Another common misunderstanding about figure is that it is only used by images. Figure can be a video, audio, a chart, a reference text, a table, a piece of code, a piece of prose, and any combination of them or others. Do not limit figure to images. Web standards precisely describe content using tags.

The above is to avoid the common six HTML5 usage errors (3-4). For more information, see the PHP Chinese website (www.php1.cn )!