CODEWITHSUNDEEP
htmlnavigation
Maxim Gershkovich
Maxim Gershkovich

Reputation: 47149

What is the purpose of the <nav> tag

I have read a whole bunch of questions regarding where and how nav tags should be used and I get that we are meant to put "major" navigational elements within it but what is it's purpose?

I can see that w3schools says that

"Browsers, such as screen readers for disabled users, can use this element to determine whether to omit the initial rendering of this content."

but does it have any further use, are there any other implications of omitting the <nav> tag?

Upvotes: 6

Views: 7913

Answers (3)

voithos
voithos

Reputation: 70552

It's a semantic improvement in HTML. A random section of the page with

<div>
    <div>
        <div>
            <ul>
                <li>...</li>
                <li>...</li>
                <li>...</li>
...

doesn't mean much in and of itself, and is only understood as being a "navigational" component when viewed by a user on the graphical page. Someone who is using a screen reader, or a text browser, or any kind of assistive technology would not be easily able to understand the meaning behind the tag soup.

On the other hand, by enclosing your markup in meaningful, semantic tags, it would be very easy for a screen reader to understand that a specific part of the document is meant to be used as a nav, and take the necessary action.

In addition, it's also easier for a developer to look at the markup and immediately recognize what it is for.

<nav>
    <ul>
        <li>...</li>
...

Upvotes: 12

unor
unor

Reputation: 96497

Tools/user-agents may (or may not) do anything with it; now or in the future.

You do your job (marking up your content), tools do their job (interpreting your markup). The only "implication of omitting" the nav element is, well, that these tools can’t use this information for their interpretation.

The nav definition gives a non-normative note:

User agents (such as screen readers) that are targeted at users who can benefit from navigation information being omitted in the initial rendering, or who can benefit from navigation information being immediately available, can use this element as a way to determine what content on the page to initially skip or provide on request (or both).

But it’s not hard to imagine other purposes:

  • text browsers may display the navigation differently
  • mobile browsers may offer a way to display/hide the navigation
  • search engines may ignore navigation content for ranking the page
  • printers may exclude the navigation by default
  • …

The more about the page structure is known, the more can be done with the page by various tools. It’s the whole point of the so-called semantic markup.

Upvotes: 4

Pete Thorne
Pete Thorne

Reputation: 2766

The purpose of tags like <nav> is semantic markup: i.e. understand-ability and sensible descriptions of page elements. The alternative of <div id='nav'> is OK but much more clunky. Web crawlers and the like are much happier to find your content well described and laid out so I would recommend making use of tags like this as much as possible.

Upvotes: 6

Related Questions