HTML <nav> Tag
The HTML <nav> tag represents a navigational section of the HTML document.
A navigational section is a section of a document that links to other documents or to parts within the document.
The <nav> element is primarily intended for sections that consist of major navigation blocks (such as sitewide navigation etc). Links such as the terms of service, the home page, and a copyright page don't need to be enclosed in <nav> tags. These types of links often appear in the footer section of the document. If so, marking them up inside <footer> tags is sufficient (i.e. no need to enclose them in <nav> tags).
Syntax
The <nav> tag is written as <nav></nav> with the navigation content inserted between the start and end tags.
Like this:
Examples
Basic Tag Context
Here are two examples that demonstrate where the <nav> element can go within an HTML document. These are simply examples, the element is not restricted to these contexts. The <nav> element can appear anywhere that "flow content" is expected (basically, anywhere within the <body> element).
Inside a <header> Element
In this example, the <nav> element appears within the <header> element.
Anywhere With the <body> Element
In this example, the <nav> element appears on its own within the body of an HTML document. As mentioned, the <nav> can appear anywhere that "flow content" is expected, which is basically anywhere within the <body> element.
Lists
Navigation items that appear as a list should still be included within an HTML list. Here, the navigation items appear within a <ul> element that is inside a <nav> element.
Adding Styles
Navigational lists can be styled so that they appear more like navigation than a bullet list.
Here, we use CSS to apply styles to the elements that are inside the <nav> element.
Attributes
Attributes can be added to an HTML element to provide more information about how the element should appear or behave.
The <nav> element accepts the following attributes.
| Attribute | Description |
|---|---|
| None |
Global Attributes
The following attributes are standard across all HTML elements. Therefore, you can use these attributes with the <nav> tag , as well as with all other HTML tags.
accesskeyautocapitalizeclasscontenteditabledata-*dirdraggablehiddenidinputmodeisitemiditempropitemrefitemscopeitemtypelangpartslotspellcheckstyletabindextitletranslate
For a full explanation of these attributes, see HTML 5 global attributes.
Event Handlers
Event handler content attributes enable you to invoke a script from within your HTML. The script is invoked when a certain "event" occurs. Each event handler content attribute deals with a different event.
onabortonauxclickonbluroncanceloncanplayoncanplaythroughonchangeonclickoncloseoncontextmenuoncopyoncuechangeoncutondblclickondragondragendondragenterondragexitondragleaveondragoverondragstartondropondurationchangeonemptiedonendedonerroronfocusonformdataoninputoninvalidonkeydownonkeypressonkeyuponlanguagechangeonloadonloadeddataonloadedmetadataonloadstartonmousedownonmouseenteronmouseleaveonmousemoveonmouseoutonmouseoveronmouseuponpasteonpauseonplayonplayingonprogressonratechangeonresetonresizeonscrollonsecuritypolicyviolationonseekedonseekingonselectonslotchangeonstalledonsubmitonsuspendontimeupdateontoggleonvolumechangeonwaitingonwheel
Most event handler content attributes can be used on all HTML elements, but some event handlers have specific rules around when they can be used and which elements they are applicable to.
For more detail, see HTML event handler content attributes.