HTML nav tag

HTML: <nav> tag

In this series of learning HTML, we will teach you how to use HTML nav tag with proper syntax and lots of examples. Let’s start on the HTML nav tag.

Description of HTML nav tag

The HTML “nav” tag is a semantic tag introduced in HTML5 that is used to define a section of a web page that contains navigation links. The “nav” tag should be used to mark up the primary navigation block or section of a webpage, typically consisting of a list of links that allow users to navigate to different sections of the website.

Here is an example of how to use the “nav” tag in HTML:

<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="/about">About</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact Us</a></li>
</ul>
</nav>

In the example above, the “nav” tag is used to wrap a list of navigation links, each represented by an “a” tag. The “ul” tag is used to create an unordered list, and the “li” tag is used to create individual list items.

Using the “nav” tag helps to indicate to search engines and assistive technologies that this section of the page contains navigation links, which can improve accessibility and SEO.

Syntax of HTML nav tag

The <nav> tag in HTML is used to define a block of navigation links on a webpage. Here’s the basic syntax of the <nav> tag:

<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>

Inside the <nav> tag, a list of navigation links is typically created using an unordered list (<ul>) and list item (<li>) tags. Each navigation link is created using an anchor (<a>) tag, which contains the link URL in the href attribute and the link text between the opening and closing tags.

The <nav> tag is typically used to markup navigation menus on a website, such as a main navigation menu, a sidebar menu, or a footer menu. It can also be used to markup other types of navigation elements, such as breadcrumb trails or pagination links.

Event Attributes

The HTML <nav> tag does not have any specific event attributes that are unique to it. However, it can make use of event attributes that are available to all HTML elements.

Here are some of the commonly used event attributes that can be used with the <nav> tag:

1. onclick: This attribute is used to specify a JavaScript function to be executed when the user clicks on the <nav> element.
2. onmouseover: This attribute is used to specify a JavaScript function to be executed when the mouse cursor is moved over the <nav> element.
3. onmouseout: This attribute is used to specify a JavaScript function to be executed when the mouse cursor is moved off of the <nav> element.
4. onfocus: This attribute is used to specify a JavaScript function to be executed when the <nav> element receives focus, such as when it is tabbed to or clicked on.
5. onblur: This attribute is used to specify a JavaScript function to be executed when the <nav> element loses focus.

It’s important to note that event attributes can be used to trigger JavaScript functions, which can make web pages more interactive and dynamic. However, it’s also important to use them judiciously, as too many event listeners can slow down page performance and make the user experience less enjoyable.

Other Attributes

In addition to global and event attributes, there are some other attributes that can be used with the HTML <nav> tag to provide additional information about the navigation links.

Here are some examples of other attributes that can be used with the <nav> tag:

1. aria-label: This attribute is used to provide a label for the <nav> element, which can be used by assistive technologies to provide context and improve accessibility.
2. role: This attribute is used to specify the role of the <nav> element in the web page, such as “navigation”, “menu”, or “toolbar”.
3. aria-labelledby: This attribute is used to associate the <nav> element with another element on the page that serves as its label, such as a heading or a descriptive text.
4. aria-describedby: This attribute is used to provide additional descriptive text for the <nav> element, which can be read aloud by assistive technologies.
5. data-*: This attribute is used to store custom data attributes for the <nav> element, which can be used by JavaScript or CSS to provide additional functionality or styling.

It’s important to note that some of these attributes may not be supported by all web browsers or assistive technologies, so it’s important to use them judiciously and test them thoroughly to ensure they work as intended.

Notes on HTML nav tag

Example of HTML nav tag

We will discuss the <nav> tag below, exploring examples of how to use the <nav> tag in HTML5, HTML 4.01 Transitional, XHTML 1.0 Transitional, XHTML 1.0 Strict, and XHTML 1.1.

<!DOCTYPE html>
<html>
<head>
<title>Example website</title>
</head>
<body>
<header>
<h1>Example website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact us</a></li>
</ul>
</nav>
</header>
<main>
<h2>Welcome to our website</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in lacus libero. Sed vel malesuada quam. Ut euismod odio sit amet lorem iaculis blandit.</p>
</main>
<footer>
<p>© 2023 Example website. All rights reserved.</p>
</footer>
</body>
</html>

In this example, we have a simple website with a header, main content, and footer. The header contains a <h1> tag with the website title, and a <nav> tag with a list of navigation links.

The navigation links are contained within an unordered list (<ul>), with each link contained within a list item (<li>). Each link is created using the <a> tag, with the href attribute specifying the destination URL. This creates a simple menu with links to the home page, about us page, services page, and contact us page.

By wrapping the navigation links in a <nav> tag, we are indicating to web browsers and search engines that this content is navigation-related. This can help to improve accessibility and SEO for our website.

Note that this is just a simple example, and there are many ways to use the <nav> tag to create navigation menus that are more complex or customized to your needs.