nav
The
nav element is a link group that can be used as page navigation; the navigation elements link to other pages or other parts of the current page. Not all link groups need to be put into the
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 element without element.
We have always been accustomed to defining navigation bars in the following way:
<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>
Copy after login
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>
Copy after login
Concise version of HTML5 study notes (3): New elements hgroup, header, footer, address, nav
nav is not meant to represent the so-called navigation bar, but to represent "navigational content". Semantically, navigation has nothing to do with content, such as links to the homepage, links to the next article, links to other columns, etc. However, if it is a link to other articles quoted by the content itself, then it should not be placed. in the navigation.
What is the difference between section article in HTML5? How to understand header footer nav?
Many new elements in HTML5 are easy to cause misunderstandings. Part of the reason is that some elements themselves are ambiguous, and the semantics expressed are constantly revised in the specifications.
does not refer to the visual navigation bar, but represents content with navigation properties. To be precise:
element represents an element that contains multiple An area for links that lead to other pages or other parts of this page.
It is important to note the following points:
Not all links need to be placed inside the nav element, which should contain the part that forms the main navigation block. As a counter-example, usually the footer has a list of links to other pages of the website, such as services, home page, and copyright page. In this case, just the footer element is enough, and there is no need to use the nav element.
If the content inside the nav element describes a list of items, then list tags (ol, ul, etc.) should be used to help understanding (enhance semantics) and navigation.
User agents (such as screen readers) can use this element to determine which content on the page can be skipped directly or provide choices on request.
So usually a page navigation can be written like this:
<nav><ul><li><a href="index.html">Home</a></li><li><a href="#about">About</a></li><li><a href="#">Contact</a></li></ul></nav>
Copy after login
or:
<div id="nav"><ul><li><a href="index.html">Home</a></li><li><a href="#about">About</a></li><li><a href="#">Contact</a></li></ul></div>
Copy after login
nav element can also be used in the following scenarios:
Table of contents
Previous page, next page button, or paging
Breadcrumb navigation Why do html navigation menus use li a tags, while Instead of using the a tag directly, or using the nav a tag, how should I write the navigation menu in HTML5?
@丁小倪’s statement is a bit extreme. The nav element is sectioning content, which is the element that will ultimately affect the generation of the document outline. It only reflects its content including navigation, but does not express the form of its content. The navigation content can be a list of links, or a piece of natural text with navigation links embedded in it.
According to the applicable scenario examples given in the W3C description of the nav element (
the nav element
), I will simplify it. The usage can be:
<nav><ul><li><a href="/home">Home</li><li><a href="/about">About</a></li><li><a href="/links">Links</a></li></ul></nav>
Copy after login
can also be:
<nav><h1>Navigation</h1><p>Welcome to my website. To see latest blog posts, please go to <a href="/blog">my blog</a>. You can find my books and papers in the <a href="/publications">publication</a> section. If you are interested in my work, please contact me by fill in the contact form <a href="/contact">here</a>.</p></nav>
Copy after login
If the content is a list, then the ul>li method is also very appropriate and cannot be said to be abused. A list doesn't stop being a list just because it's placed in a nav, it's a matter of the nature of the content. Compared with ul, nav has a higher level of abstraction semantically, because it has even been decoupled from the organization form of the content.
For dd, dl, dt, you can think of it as a list of name-value pairs, which is often used together with the dfn element. The more suitable scenarios are the expression of metadata, dictionary entries, etc. . There is also a problem with @赵王野's statement. dt and dd do not need to appear in pairs. They are many-to-many mappings (
dl element
). You can read this article on HTML5 Doctor:
The dl element
If you want to have a deeper understanding of HTML elements, I personally recommend combining the article on HTML5 Doctor with the HTML5 specification. Come and read.
Why use ul>li instead of dd dt dl for navigation bar?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
