Nav tag_html/css_WEB-ITnose
nav
Thenav 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>
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>
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>
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>
nav element can also be used in the following scenarios:
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>
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>
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?
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
Gitee Pages static website deployment failed: How to troubleshoot and resolve single file 404 errors?
Apr 04, 2025 pm 11:54 PM
GiteePages static website deployment failed: 404 error troubleshooting and resolution when using Gitee...
What is an example of a starting tag in HTML?
Apr 06, 2025 am 12:04 AM
AnexampleofastartingtaginHTMLis,whichbeginsaparagraph.StartingtagsareessentialinHTMLastheyinitiateelements,definetheirtypes,andarecrucialforstructuringwebpagesandconstructingtheDOM.
How to use CSS3 and JavaScript to achieve the effect of scattering and enlarging the surrounding pictures after clicking?
Apr 05, 2025 am 06:15 AM
To achieve the effect of scattering and enlarging the surrounding images after clicking on the image, many web designs need to achieve an interactive effect: click on a certain image to make the surrounding...
How to implement adaptive layout of Y-axis position in web annotation?
Apr 04, 2025 pm 11:30 PM
The Y-axis position adaptive algorithm for web annotation function This article will explore how to implement annotation functions similar to Word documents, especially how to deal with the interval between annotations...
HTML, CSS, and JavaScript: Essential Tools for Web Developers
Apr 09, 2025 am 12:12 AM
HTML, CSS and JavaScript are the three pillars of web development. 1. HTML defines the web page structure and uses tags such as, etc. 2. CSS controls the web page style, using selectors and attributes such as color, font-size, etc. 3. JavaScript realizes dynamic effects and interaction, through event monitoring and DOM operations.
