A nav element marks the part of a web page that contains navigation content: usually links to other pages or areas of a site. Write it with opening and closing <nav> tags, then place the links between them. It commonly appears immediately after the header, so visitors can move through the site before reading the page-specific content. section 12.2.1 section 6.2.2
A five-link navigation bar
This navigation element gives visitors links to Home, Blog, FAQ, About, and Contact pages: <nav> <a href="index.html">Home</a> <a href="blog.html">Blog</a> <a href="faq.html">FAQ</a> <a href="about.html">About</a> <a href="contact.html">Contact</a> </nav> Each a element supplies visible link text and an href value naming its destination file. Reuse the same navigation element on related pages to give the site a consistent way to move around. section 6.2.2 section 7.1
A nav element is one piece of a practical page layout. The header introduces the site, nav provides links, main holds content unique to the current page, and footer supplies closing information such as a copyright notice. A navigation area can also hold controls rather than ordinary page links, including filtering and sorting lists and a search box. section 12.2.1 section 13.5
To create one with generated code, describe the navigation precisely:
- Name every link, including its displayed text and destination file, such as “Home” linking to “index.html.” section 6.2.2
- Place it after the header when requesting a standard information-site or article-page layout. section 6.2.3 section 12.2.10
- Ask separately for CSS if you want to control its borders, spacing, and layout. section 6.2.2
CSS can turn a nav element into a horizontal bar. Setting display: flex makes it a Flexbox container, which places its items horizontally by default; justify-content: space-between spreads them across the available width. Borders, margins, and padding can help separate the bar from nearby content. A wide row of links may not fit well on a portrait smartphone screen, where a clickable menu icon is a usual alternative. section 6.2.2 section 12.2.10
Prompt wording you can copy
Ask for the exact structure you need: “Create a navigation element that includes five links: Home to index.html, Blog to blog.html, FAQ to faq.html, About to about.html, and Contact to contact.html.” For a larger page request, include the nav element alongside the header, main, and footer, then request CSS in a separate file. Save the generated HTML and CSS files together when the HTML links to the stylesheet. section 6.2.2 section 6.2.3
<nav>
<a href="index.html">Home</a>
<a href="blog.html">Blog</a>
<a href="faq.html">FAQ</a>
<a href="about.html">About</a>
<a href="contact.html">Contact</a>
</nav>
Inspect this compact navigation example to see the nav container, anchor elements, visible labels, and file destinations together. section 6.2.2
