Home > Article > Web Front-end > Detailed explanation of the function and use of html nav tag
Detailed explanation of the function and use of html nav tag
- 黄舟Original
- 2017-06-29 14:19:458528browse
The new element tag c787b9a589a3ece771e842a6176cf8e9 in HTML5 is used to divide links with navigation properties together, making the code structure more accurate in semantic and at the same time for the screen Support for devices such as readers is also better.
We have always been accustomed to using codes such as eb545d6e9e25f5c0174408f6286375ad or 9e490bea09a82f3ff6663081fb0e947b to write page navigation; in HTML5, we can directly The navigation link list is placed in the c787b9a589a3ece771e842a6176cf8e9 tag:
<nav> <ul> <li><a href="index.html">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/blog/">Blog</a></li> </ul> </nav>
According to the W3C definition specification:
nav element is a element that can be used as page navigation A link group; navigation elements within it link to other pages or other parts of the current page. Not all link groups need to be put into the c787b9a589a3ece771e842a6176cf8e9 element; for example, there is usually a group of links in the footer, including terms of service, home page, copyright statement, etc.; in this case, it is most appropriate to use the c37f8231a37e88427e62669260f0074d element. , without the need for the c787b9a589a3ece771e842a6176cf8e9 element.
A page can have multiple c787b9a589a3ece771e842a6176cf8e9 elements as navigation for the entire page or different parts; the following is a code example given by W3C:
<body> <h1>The Wiki Center Of Exampland</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/events">Current Events</a></li> ...more... </ul> </nav> <article> <header> <h1>Demos in Exampland</h1> <p>Written by A. N. Other.</p> </header> <nav> <ul> <li><a href="#public">Public demonstrations</a></li> <li><a href="#destroy">Demolitions</a></li> ...more... </ul> </nav> <div> <section id="public"> <h1>Public demonstrations</h1> <p>...more...</p> </section> <section id="destroy"> <h1>Demolitions</h1> <p>...more...</p> </section> ...more... </div> <footer> <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p> </footer> </article> <footer> <p><small>© copyright 1998 Exampland Emperor</small></p> </footer> </body>
In this example, we can see that c787b9a589a3ece771e842a6176cf8e9 can not only be used as the global navigation of the page, but can also be placed within the 23c3de37f2f9ebcb477c4a90aac6fffd tag to link to other locations on the current page as a navigation related to the content of a single article.
The above is the detailed content of Detailed explanation of the function and use of html nav tag. For more information, please follow other related articles on the PHP Chinese website!