Why Should You Always Use <nav> for Navigation Sections in HTML?
Tags: frontend, webdev, html
Published: 2024-05-06 07:32:40

## Table of contents
- [What is the `<nav>` element?](#What_is_the_<nav>_element)
- [What is a landmark?](#What_is_a_landmark)
- [So why use `<nav>`s?](#So_why_use_<nav>s)
    - [Better for accessibility](#Better_for_accessibility)
    - [Better for code readability](#Better_for_code_readability)

- [Wrapping up...](#Wrapping_up)
- [Further reading](#Further_reading)

-----

A long long while back, when I decided to start writing the chapters for the [Semantic HTML](https://www.codeguage.com/courses/html/semantic-html-introduction) unit in my [HTML course](https://www.codeguage.com/courses/html/), I was heading into new territory. Sure I had heard about `<aside>`s, `<section>`s, `<nav>`s, and `<main>`s, but never did I ever get to appreciate them so closely.

You know, learning is one thing. When you're learning, you're only concerned with yourself, i.e. what works for you. But when you get into teaching something, it's another completely different thing. When you're teaching, you need to _research_, get really deep into what you're learning, or otherwise you risk becoming a mere expresser, not a teacher.

Now, for the purposes of this article, I am concerned with the [`<nav>` element in HTML](https://www.codeguage.com/courses/html/semantic-html-navigation). I always used to think that `<nav>` is only meant for making HTML code look presentable. I mean, who likes a surge of `<div>`s anyway? Beyond this, I gave no importance to the `<nav>` element. Period.

But little did I know that there were much deeper and paramount reasons for using `<nav>`. It wasn't just about better code, but also about the extremely neglected notion of building accessible websites, usable by everyone.

In the following discussion, I aim to talk about a couple of reasons for using `<nav>`, and to convince you to throw away your `<div>`s out of the window if you're using them to create navigation sections.

_But how to throw away a `<div>` out of the window? Anyways..._

-----

## What is the `<nav>` element?<a name="What_is_the_&lt;nav&gt;_element"></a>

The **`<nav>`** element belongs to the class of semantic elements in HTML that clearly describe the purpose, the meaning, of the underlying content they contain.

Actually, pretty much all of HTML falls under the category of semantic elements. For example, the familiar `<h1>` and `<p>` elements are also semantic elements, but we don't usually see them in this light perhaps because the word _'semantic'_ was popularized by HTML5, and all the new elements introduced by this specification came to be known as _'semantic elements.'_

It's mainly the monotonous, generic `<div>` and `<span>` elements that are not semantic in nature. On their own, they don't convey that they represent on a webpage.

Coming back to the `<nav>` element, we can more specifically refer to it as a **_semantic sectioning element_**. That is, `<nav>` is a semantic element that serves to represent some kind of a section in an HTML document.

_So what kind of a section?_ A **navigation section**.

> The `<nav>` element represents a **navigation section** in an HTML document.

A navigation section is basically composed of a bunch of hyperlinks to aid us in navigating across the website (as a whole) or in navigating across the current webpage.

The beauty of using `<nav>` lies in the fact that it implicitly creates a **_navigation landmark_** on a webpage which is then used for accessibility purposes.

And this takes me to my second point: _What is a landmark?_

-----

## What is a landmark?<a name="What_is_a_landmark"></a>

In HTML speak, a **_landmark_** is an **important, distinctive region** of a webpage. Or should I say, an _extremely_ important region.

For example, the header of a webpage is a landmark. So is the footer. Navigation sections, as I just stated, are also landmarks. The main content (represented by the [`<main>` element](https://www.codeguage.com/courses/html/semantic-html-main-content)) is a landmark too.

The [WAI ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) that looks after the specification of landmarks in HTML actually [defines them](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/general-principles.html) in a beautiful way:

> Landmarks provide a powerful way to identify the organization and structure of a web page.

_So what's the use of landmarks? Why should anyone care after all?_

Again, the WAI ARIA continues as follows:

> The use of landmarks roles support keyboard navigation to the structure of a web page for screen reader users, and can be used as targets for author supplied "skip links" and browser extensions for enhanced keyboard navigation.

The most important point to note here is of **keyboard navigation** for screen reader users. That's what landmarks are, at the core, intended to do.

People without disabilities perceive a webpage differently than those with them. They'd be able to quickly see what's visually laid out on the webpage and, thus, not really need to have a classification of landmarks (i.e. what's a header, what's a footer, and so on).

However, people with disabilities, using different kinds of assistive technologies for using their computers, won't be able to make all this judgement about a webpage. These users rather rely on programmatic hints on what part of a webpage is what.

And in this regard, landmarks help us website developers in giving these programmatic hints for such users.

With this knowledge out of the way, let's get back to the `<nav>` element and see the reasons for using it (over the monotonous `<div>`).

-----

## So why use `<nav>`s?<a name="So_why_use_&lt;nav&gt;s"></a>

### 1. Better for accessibility<a name="Better_for_accessibility"></a>

As stated earlier, the `<nav>` element represents a **_navigation landmark_** on a webpage. This helps us clearly announce to screen readers that a particular section on a webpage is meant for navigation purposes.

Screen reader software, such as [NVDA](https://www.nvaccess.org/) and [JAWS](https://www.freedomscientific.com/products/software/jaws/), allow users to quickly move between different landmarks on a webpage using keyboard shortcuts.

Thus, having a navigation section laid out as a `<nav>` element means that it'll be possible for screen reader users to **conveniently navigate to it**, and then navigate across the website or the current page, depending on what kind of a navigation section it is.

And this in turn means that `<nav>` **improves the accessibility** of a webpage.

Clearly, we can't get this benefit when using a `<div>` (at least on its own). Having a `<div>` represent a navigation section means that it's only so for users who can perceive visually; users with visual disabilities won't be able to know this.

**💡 Notice**: It's possible to set `role="navigation"` on a `<div>` to accomplish the same thing, that is, create a navigation landmark. However, with the mass support of `<nav>`, there's really no need to be using a `<div>` at all.

And because fluid navigation is a vital part to any website, which almost all visitors use at one point or the other, it becomes even more crucial to have `<nav>` represent navigation sections.

### 2. Better for code readability<a name="Better_for_code_readability"></a>

If you've ever gotten the chance to move your eye through an intensely nested HTML code file, flooding with `<div>` containers everywhere, you'll agree to the fact that it's no easy feat to read it.

Most importantly, there's probably nothing to break what I call the _'`<div>` chain'_, that is, an endless chain of `<div>` elements.

Using a `<nav>` instead of a `<div>` for representing a navigation section helps **break this tedious chain of `<div>`s**.

Without a doubt, it's easy enough for us to spot a `<nav>` within an outright winning majority of `<div>`s, and to quickly make the connection between the starting (`<nav>`) and ending (`</nav>`) tags in the code.

In essence, I like to think of this to be parallel to the reason why we comment code, or put a block of code on a newline at an increased level of indentation, or use `_` separators when writing out huge numbers in code (for e.g. in JavaScript, PHP, Python) — to **make code readable**.

-----

## Wrapping up...<a name="Wrapping_up"></a>

And this wraps up this not-so-long discussion on the significance of `<nav>` in HTML.

What I've come to appreciate very strongly — like _very very strongly_ — over the months of creating the HTML course is that just because a website looks fine for you and me doesn't mean that it's fine for _everyone_.

It's not at all a trivial task to create a website that is accessible for _everyone_ but by no means is it impossible. As web developers — and programmers, in general — who are always taught to think about efficiency, performance, scalability, it's time that we also embrace accessibility.

It might take us some time to make existing websites accessible or to create ones from the very beginning, but it's _better late than never_.

So probably as a first step in this marathon, go on and throw away the `<div>` out of the window if you're using it for denoting a navigation section in your website. Use `<nav>` instead.

To test your understanding of the `<nav>` element, you can take the [Semantic HTML — Navigation Quiz](https://www.codeguage.com/courses/html/semantic-html-navigation-quiz).

And while I am at it, the subtle details of the `<nav>` element also remind me of the fact that [frontend development is by no means easier than backend development](https://www.codeguage.com/blog/is-frontend-easier). The conundrums underlying HTML and the subtle nuances of HTML elements are so intricate and complex that it's impossible for even an expert developer to fully grasp them.

In this respect, here's a shoutout to all the frontend developers (including myself) 🙌.

-----

## Further reading<a name="Further_reading"></a>

- [Landmark Regions - ARIA Authoring Practices Guide (APG)](https://www.w3.org/WAI/ARIA/apg/practices/landmark-regions/)
- [Navigation Landmark - ARIA Landmark Example](https://www.w3.org/WAI/ARIA/apg/patterns/landmarks/examples/navigation.html)
- [Navigation - Web Accessibility Guidelines v1.0](http://web-accessibility.carnegiemuseums.org/code/navigation/)
- [ARIA: navigation role - MDN](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/navigation_role)
- [Navigation - Semantic HTML - Codeguage](https://www.codeguage.com/courses/html/semantic-html-navigation)


-----

## More from Codeguage

{% embed https://dev.to/codeguage/8-simple-ways-to-become-better-at-javascript-3kk2 %}

{% embed https://dev.to/codeguage/is-frontend-development-easier-than-backend-h77 %}

{% embed https://dev.to/codeguage/4-incredible-vs-code-features-that-you-cant-miss-1nf4 %}