HTML5/CSS3 series Tutorials: Use headers, nav and footer-for HTML5 basic tags-

As you may know, HTML5 contains a lot of previously unavailable labels, such as header, nav, and footer. Before that, if we develop the relevant page layout, CSS is often used to define the relevant header, navigation and the bottom of the page, as follows: # nav {padding: 10px ...}...,. As you may know, HTML5 contains a lot of previously unavailable labels, such as header, nav, and footer. Before that, if we develop the relevant page layout, CSS is often used to define the relevant header, navigation and the bottom of the page, as follows:

#nav{ padding： 10px... }#header{ padding： 10px ... }#footer{ padding： 10px ... }

After the definition, we use the p tag to organize the page structure, as shown below:

This Code allows us to create a lot of non-style CSS definitions. The code structure is complex and not intuitive and easy to understand.

In the new HTML5 standard, we have defined a series of labels to help you define the page layers and logic in a more semantic way. You do not need to define the related DIV by yourself, HTML5 provides existing tags to complete the preceding structured definition, as shown below:

To use the preceding labels, you only need to define relevant real style information in the css file.

In this article, we will introduce the basic HTML5 tag headers, nav and footer.

Header label

In the new standard, the header label is defined as follows:

    “A group of introductory or navigational aids.”

The basic meaning is "a group of introductory content related to navigation ". Literally, we can understand that header labels not only define the content of the page header, but also define the introduction of other content below the page header. This is not exactly the same as our traditional page header definition. For example:

 
  
HTML5 basic tag usage, header, Nav, and footer
  

  
Author information: gbin1.com: HTML5/CSS3
  

 
As you may know, HTML5 contains a lot of previously unavailable labels, such as header, nav, and footer. Before that, if we develop the relevant page layout, CSS is often used to define the relevant headers, navigation and bottom points of pages.

In the above structure, we can see that we have defined the title and content of an article using the header. Here, the header label is not the page header, but the page header of the article.

In HTML5, the use of headers is more flexible. You can define and organize the document structure as needed.

Nav label

The full name of the Nav tag is navigation. The HTML5 standards are defined as follows:

"A section of a page that links to other pages or to parts within the page: a section with navigation links."

"One of the pages is used to link to another page or the current page area: a region with a navigation link ".

The nav label function is clearly defined here. Similar to the header, it does not specify that the label must be a main navigation or a subnavigation of other parts of the page. As follows:

Gbin1.com article list
 
  
 

   
  
HTML5 Article Introduction
   
  
CSS3 Introduction
   
  
JQuery Introduction
   
  

  
 
 

In the above example, we can see that this is just an article navigation area. You can also use nav to define a small page navigation.

Footer label

The last one is the footer tag, that is, the tab at the bottom of the page. You can use this label to define the low-end structure of the page. Of course, like the header or nav label described above, it is not just used at the end of the page. Related HTML5 standards are defined as follows:

  “ The footer element represents a footer for its nearest ancestor sectioning content or   sectioning root element. A footer typically contains information about its section such as who wrote it,   links to related documents, copyright data, and the like.”

The footer element represents the display at the bottom of the page content or area content. A typical example includes author information, document links, or copyright information.

Of course, here we can see that it is not limited to the content of the entire page, but also the content at the end of a document, such as the source or author information. As follows:

 
  
Related tags html5, nav, header, footer
  

  
Source: html5/css3 tutorial
  

 

In the preceding example, we define the end-to-end information of a simple article. We can see that we have added source and related tags, which often appears on blog websites.

A complete HTML5 page

Here we use the basic header. The nav and footer labels are used to write a responsive HTML5 page. If you use an old browser version, such as IE6 and 7. Related js needs to be introduced to help identify new elements. Of course, you can also use the following js Code for simple generation.

/** Create HTML5 tag */document. createElement ("article"); document. createElement ("section");

For other HTML5 features, headers, nav, and footer were not so cool. At that time, as a front-end developer, how to correctly organize the page structure was very logical, the page is also a complex project, and the meaning is still very significant. I hope this article will help you understand these basic HTML5 tags in a simple and intuitive manner.

The above are HTML5/CSS3 series Tutorials: HTML5 basic labels use header, nav and footer content. For more information, see PHP Chinese Network (www.php1.cn )!