Search code examples
htmlnavigation

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?


Solution

  • 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>
    ...