- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <nav> Tag
HTML <nav> tag is used to represent a section of a page whose purpose is to provide navigation links, either within the current document or to other documents.
Not all links need to be included in the <nav> element. HTML <nav> is only intended for a major block of navigation links. Usually, the <footer> element often contains a list of links that don't need to be in the <nav> element.
Syntax
<nav>...</nav>
Attribute
HTML nav tag supports Global and Event attributes of HTML.
Examples of HTML nav Tag
Bellow examples will illustrate the usage of nav tag. Where, when and how to use nav tag and how to style nav element using CSS.
Creating nav bar using nav Tag
In the following example, we are using the <nav> tag to specify the sections that contain the navigation links.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML nav Tag</title> </head> <body> <h1>TutorialsPoint</h1> <nav> <a href= "https://www.tutorialspoint.com/html/index.htm"> HTML </a> <a href= "https://www.tutorialspoint.com/css/index.htm"> CSS </a> <a href= "https://www.tutorialspoint.com/javascript/index.htm"> JavaScript </a> </nav> </body> </html>
Styling the nav Bar
In the following example we will decorate the nav bar we already created in the previus example. All the styling will be done using internal CSS.
<!DOCTYPE html> <html lang="en"> <head> <title>HTML nav Tag</title> <style> nav{ background-color: green; padding: 15px; border-radius: 5px; } a { font-weight: bold; margin-right: 10px; color: lightgray; text-decoration: none; } </style> </head> <body> <h1>TutorialsPoint</h1> <nav> <a href= "https://www.tutorialspoint.com/html/index.htm"> HTML </a> <a href= "https://www.tutorialspoint.com/css/index.htm"> CSS </a> <a href= "https://www.tutorialspoint.com/javascript/index.htm"> JavaScript </a> </nav> </body> </html>
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
nav | Yes 5.0 | Yes 9.0 | Yes 4.0 | Yes 5.0 | Yes 11.1 |
To Continue Learning Please Login
Login with Google