Create a Top Navigation Bar using HTML Tutorial | Learning Path – Complete Guide
Last updated on 12th Aug 2022, Blog, Tutorials
What Does Navigation Bar Mean?
A navigation bar is a link to appropriate sections/pages in the website that helps readers in traversing the online document.Considered a traditional method of navigation, a navigation bar can be implemented in a number of ways, namely, horizontally or vertically, or fixed or dynamic.A navigation bar implementation is considered one of the key points of Web design and usability.A navigation bar helps readers in selecting topics, links or sub-topics of their interest.Using a navigation bar, users require not enter the URL of the particular webpage, as this is automatically taken care of by a navigation bar, with the navigation sections having embedded the necessary links of a webpage.Users benefit from a navigation bar since it is visible and accessible.For Web developers, making a navigation bar helps in separating content from the structure.This helps them in modifying style or providing creativity to the structure without impacting the data present in the pages.As a result, a navigation bar is thought of as the website’s make-or-break design element.
- Any online page that uses a navigation bar has its foundation in standard HTML.
- Based on the user’s action, a number of links are called upon by it.
- The two main categories of a navigation bar are fixed/sticky and dynamic.
- Faster browsing and simpler navigation are hallmarks of sticky navigation bars.
- Dynamic navigation bars are used when space is a constraint and when translation problems, especially in the mobile formats, are encountered.
- There are other classifications of navigation bars, for example, based on a position (vertical or horizontal) and based on a text and graphics (text-only or graphics-only navigation bar).
Syntax:
- <"nav"> Links… <"/nav">
Example:
- <"!DOCTYPE html">
- <"html">
- <"body">
- <"h1">GeeksforGeeks<"/h1">
- <"h2"> HTML nav Tag<"/h2">
- <"nav">
- <"a" href="#">Home<"/a'>
- <"a" href="#">Interview<"/a">
- <"a" href="#">Languages<"/a">
- <"a" href="#">Data Structure<"/a">
- <"a" href="#">Algorithm<"/a">
- <"/nav">
- <"/body">
- <"/html">
How to make a Navigation Bar in Html
If you need to make a navigation bar in Html, then follow the steps which are given below.Using these steps, simply create the Navigation bar.
Step 1:
Firstly, to type the Html code in any text editor or open an existing Html file in the text editor in which you need to make a Navigation Bar.
- <"Html">
- <"Head">
- <"Title">
- Make a Navigation Bar
- <"/Title">
- <"/Head">
- <"Body">
- <"/Body">
- <"/Html">
Step 2:
Now, to explain the <"nav"> tag in the <"body"> tag where I need to make the bar.
- <"Body">
- <"nav">
- <"/nav">
- at JavaTpoint Site…..
- <"/Body">
- <"/Html">
Step 3:
After then, explain the <"ul"> tag, which is used to show the unordered list.And, then explain the list items in the <"li"> tag.Explain those items which need to show in the navigation bar.
- <"Body">
- <"nav">
- <"ul">
- <"li">
- <"a" href="#"> Home <"/a">
- <"/li">
- <"li">
- <"a" href="#"> About <"/a">
- <"/li">
- <"li">
- <"a" href="#"> Contact <"/a">
- <"/li">
- <"li"> <"a" href="#"> Terms of use <"/a">
- <"/li">
- <"li">
- <"a" href="#"> Join Us <"/a">
- <"/li">
- <"/ul">
- <"/nav">
- at JavaTpoint Site…..
- <"/Body">
- <"/Html">
Step 4:
After then, place the cursor in the <"head"> just after a closing of the title tag.And then, explain the <"style"> tag.
- <"Head">
- <"Title">
- Make a Navigation Bar
- <"/Title">
- <"style type=text/css">
- <"/style">
- <"/Head">
Step 5:
Now, specify various id attributes which are used to set the position, color of the navigation barSo, use the following code in a head tag.Also change the value of properties according to the requirements.
- <"style type=text/css">
- body
- {
- height: 125vh;
- margin-top: 80px;
- padding: 30px;
- background-size: cover;
- font-family: sans-serif;
- }
- header {
- background-color: orange;
- position: fixed;
- left: 0;
- right: 0;
- top: 5px;
- height: 30px;
- display: flex;
- align-items: center;
- box-shadow: 0 0 25px 0 black;
- }
- header * {
- display: inline;
- }
- header li {
- margin: 20px;
- }
- header li a {
- color: blue;
- text-decoration: none;
- }
- <"/style">
Step 6:
After that, to type the <"header"> tag just before an opening <"nav"> tag.And also close this tag. And, at last, I need to save the Html file and then run the file in the browser.
- <"Html">
- <"Head">
- <"Title">
- Make a Navigation Bar
- <"/Title">
- <"style type=text/css>
- body”
- {
- height: 125vh;
- margin-top: 80px;
- padding: 30px;
- background-size: cover;
- font-family: sans-serif;
- }
- header {
- background-color: orange;
- position: fixed;
- left: 0;
- right: 0;
- top: 5px;
- height: 30px;
- display: flex;
- align-items: center;
- box-shadow: 0 0 25px 0 black;
- }
- header * {
- display: inline;
- }
- header li {
- margin: 20px;
- }
- header li a {
- color: blue;
- text-decoration: none;
- }
- <"/style">
- <"/Head">
- <"Body">
- <"header">
- <"nav">
- <"ul">
- <"li">
- <"a" href="#"> Home <"/a">
- <"/li">
- <"li">
- <"a" href="#"> About <"/a">
- <"/li">
- <"li">
- <"a" href="#"> Contact <"/a">
- <"/li">
- <"li"> <"a" href="#"> Terms of use <"/a">
- <"/li">
- <"li">
- <"a" href="#"> Join Us <"/a">
- <"/li">
- <"/ul">
- <"/nav">
- <"/header">
- at JavaTpoint Site…..
- <"/Body">
- <"/Html">
Using the NAV tag for web menu has advantages:
The <"nav"> tag is introduced by HTML5 which explains a section of navigation links. Not all links of a document must be in the <"nav"> element.The <"nav"> element is intended only for the main block of navigation links.The major search engines such as Google and Bing will see NAV as containing the structure of the website, and that will get an ACCURATE extended listing in the search engine for a main site entry. The NAV tag states clearly that these are the major pages within the NAV tag.Otherwise search engines such as Google may randomly choose to list various pages. It also helps with the BOILERPLATE repetition.Search engines such as Google know this is a repeated element and will not penalize the page rank for duplicate content.
Are you looking training with Right Jobs?
Contact Us- Windows Azure Interview Questions and Answers
- Salesforce Architecture Tutorial
- Wrapper Class in Salesforce Tutorial
- salesforce lightning
Related Articles
Popular Courses
- VM Ware Training
11025 Learners
- Microsoft Dynamics Training
12022 Learners
- Siebel Training
11141 Learners
- What is Dimension Reduction? | Know the techniques
- Difference between Data Lake vs Data Warehouse: A Complete Guide For Beginners with Best Practices
- What is Dimension Reduction? | Know the techniques
- What does the Yield keyword do and How to use Yield in python ? [ OverView ]
- Agile Sprint Planning | Everything You Need to Know