HTML5 new label--nav label Introduction

The nav element tag is a new label for HTML5. This chapter will bring you HTML5 new label--nav label Introduction, there is a certain reference value, the need for a friend can refer to, I hope you have some help.

First, NAV is also a new element tag in HTML5. As with other new tags, nav is used as a common name for navigation bars in previous versions of traditional HTML5 HTML layouts.

Like what:

<div class= "NAV" > site navigation content </div>

Or

<div id= "NAV" > site navigation content </div>

The previously used named NAV is specifically used as a new label element in HTML5. This label is commonly used for navigation layout.

I. HTML NAV tag syntax and structure

1. Basic grammar

<nav> content </nav>

2. Nav Plus ID

<nav id= "abc" > Content </nav>

3. Nav Plus class

<nav class= "abc" > Content </nav>

4. Quick understanding of NAV labels

NAV is related to navigation, so it is generally used for site navigation layouts. While using the <nav> tag as a div tag or span tag to add an ID or class, and unlike a div tag, this tag is typically used only for navigation related places, so it may be used in a navigation bar in an HTML page layout. Or a local layout associated with the navigation bar.

5, nav with what label use

DIVCSS5 introduced the general navigation bar using the UL Li label layout in the previous article tutorial, using the Nav label in the general layout with the UL Li tag.

The small cases are as follows:
1), traditional HTML layout

<div id= "nav" ><ul><li> home </li><li> column name </li><li> Contact Us </li></ul ></div>

2), after the Nav label

<nav><ul><li> Home </li><li> Column name </li><li> Contact Us </li></ul></ Nav>

By the above HTML layout to the HTML5 conversion it is actually easy to understand the use of HTML NAV tags, as well as with the UL Li layout navigation bar tips.

second, compatibility tips

Because the <nav></nav> tag is a new label for HTML 5, and is not supported in IE8 and the following IE browsers (IE8, IE7, IE6), layout html is selected on demand.

Third, HTML nav CSS layout case

Learn the basics of NAV syntax and usage from the HTML CSS layout by comparing the traditional div layout with the nav layout.

The following DIVCSS5 through three layout practices to let you master the nav layout, respectively:

1), traditional Div+ul+li layout navigation style;

2), Nav+ul+li layout navigation style;

3) Set the class CSS style to NAV based on the Nav+ul+li layout

Through the above case to let everyone understand nav generally with UL Li or directly for layout navigation related layout, while Nav is like Div use can directly set CSS can also add class or ID.

The specific cases are as follows:

1. Traditional div css layout and nav CSS layout full HTML source code

<! DOCTYPE html> 
The above uses the traditional DIV+UL+LI+CSS layout navigation class layout, and then uses the NAV+UL+LI+CSS layout, and then on the basis of NAV to the NAV set class to change its layout contrast effect.

Special note: May not div CSS layout, may see the above code is difficult, the fundamental solution is to learn div+css, naturally see the above code will be a glance will understand the case to express knowledge points, natural look at the above cases to master.

2. DIVCSS5 instance Layout