A Step-by-Step Guide to Creating a Navigation Bar in HTML

Learning how to create a navigation bar in HTML will help you plant your feet in website building and development. The Internet is becoming the basis of both personal and professional news with 4.66 billion active internet users worldwide, so understanding HTML and its functions are essential as a young entrepreneur.

HTML is one of the leading coding languages worldwide as of 2021, with a resounding 56% of programmers saying they use HTML. By following these easy and concise steps to create a navigation bar in HTML, you’ll be able to create a simple navigation bar, a color scheme, and a background.

Find your bootcamp match

Select Your Interest

Your experience

Time to start

GET MATCHED

By continuing you agree to our Terms of Service and Privacy Policy, and you consent to receive offers and opportunities from Career Karma by telephone, text message, and email.

What is a Navigation Bar in HTML?

A navigation bar, or navbar, in HTML, is a user interface section, typically on top of a website, that allows users to explore and access information. The navigation bar comes in a dropdown menu or a collapse navbar that has class names. An application with navigation features may also use HTML and CSS as a programming language to code elements of an application.

Uses for Navigation Bar in HTML

Organization. Having a navigation menu for your website makes sure that the list items for the dropdown menu are coordinated and logically formulated. Organized navigation links are visually appealing to website visitors.
Ease of Use. Navigating an unordered list of links is inconvenient and might turn traffic away from your website. Well-organized navigation bars that are easy to use provide a convenient experience for people that visit your website.
Accessibility. Good-looking navigation bars provide easier access to information that allows for a streamlined user experience.

Creating a Navigation Bar: Step-by-Step

Open a Text Editor
Create a <nav> tag
Define the <ul> tag
Define the <style> tag
Change the design
Close the tags

Steps to Create a Navigation Bar: In-Depth

A male programmer sitting in front of three computers. — You can use HTML to create a functional and accessible navigation bar.

Below are the steps you need to follow to make a responsive navigation bar. By learning about the CSS templates you need and by following a block element example, you’ll be able to create a navigation menu that will help you build a navigation bar.

1. Open a Text Editor

Open a new text editor or your pre-existing CSS file in an app folder. Insert the following sets of block-level elements, as they’ll be the groundwork for your basic navigation bar. These inline elements are the foundation of your navigation bar and will ensure its functionality.

<!Doctype Html>
<Html>
<Head>
<Title>
Make a Navigation Bar
</Title>
</Head>
<Body>
</Body>
</Html>

2. Create a <nav> tag

Insert a <nav> tag inside the <body> tag of your CSS file. The <nav> tag is the component that’ll indicate to the computer that you’re making a navigation bar.

<Body>
<nav>
</nav>
</Body>
</Html>

3. Define the <ul> tag

The <ul> tag collects and orders all of the options you’re going to input in your navigation bar. These options lead to their designated pages via absolute or relative path. The <a> path is a form of anchor tags to an href attribute that allows you to insert navigation links within the CSS properties.

<Body>
<nav>
<ul>
<li>
<a href=”#”> Home </a>
</li>
<li>
<a href=”#”> Blog </a>
</li>
<li>
<a href=”#”> About </a>
</li>
<li> <a href=”#”> Contact </a>
</li>
</ul>
</nav>
</Body>
</Html>

If you run the <ul> tag it will automatically show you a vertical navigation bar. The landing pages of these navigation links are coded via the <li> tag.

4. Define the <style> tag

The <style> tag sets custom styles to your navigation bar. CSS style rules allow your navigation bar to have basic design principles that you want, such as screen sizes, interactive styles, and a background style for the menu.

<Head>
<Title>
Make a Navigation Bar
</Title>
<style type=text/css>
</style>
</Head>

5. Change the design

In this part, you’ll be making changes in the anchor display of color codes and background-color property. You can change the alignment within navbars and position them to where you want them. Color spacing is also an additional class tag that you can edit.

<style type=text/css>
body
{
height: 125vh;
margin-top: 80px;
padding: 30px;
background-size: cover;
font-family: sans-serif;
}
header {
background-color: blue;
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: white;
text-decoration: none;
}
</style>

6. Close the tags

Below is a sample code of how your navigation bar might look. A simple navigation bar will be easy to navigate and easy to understand.

<!Doctype Html>
<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: blue;
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: white;
text-decoration: none;
}
</style>
</Head>
<Body>
<header>
<nav>
<ul>
<li>
<a href=”#”> Home </a>
</li>
<li>
<a href=”#”> Blog</a>
</li>
<li>
<a href=”#”> About </a>
</li>
<li> <a href=”#”> Contact </a>
</li>
</ul>
</nav>
</header>
</Body>
</Html>

How to Learn More About HTML

Try Online Courses. There are online HTML courses, classes, and training that you can attend to help you in your journey of becoming proficient in HTML. A beginner web development course may help you learn more about HTML and its facets.
Gain Hands-on Experience. Test your knowledge and hone your skills in HTML by getting hands-on experience. By trying out projects and building websites, you can build an HTML portfolio you can show to future clients or employers.
Enroll in a Coding Bootcamp. Attending a top coding bootcamp is a great way to learn more about HTML and its uses. A bootcamp can teach you in-demand practical skills you need to become proficient in HTML quickly and efficiently.

How to Create a Navigation Bar in HTML FAQ

Is learning HTML worth it?

Yes, learning HTML is worth it. HTML is the dominant web development language in website building, so it’s a key skill for aspiring web developers to learn. According to the Bureau of Labor Statistics, the median pay of web developers in 2020 was $77,200 per year.

Is learning HTML hard?

Yes, learning HTML may be difficult, especially if you don’t have tech or coding experience. However, coding bootcamps have programs for complete beginners. If you’re a tech-savvy individual who understands how computers work, you may find HTML and its logic easy to understand.

What is HTML?

Hypertext Markup Language (HTML) is an online language used in website building or simple applications. It’s the language that provides structure and form to websites. It lays down the basic coding foundation and allows other languages to add more complex features.

Why do we need navigation bars?

Navigation bars allow users to quickly visit different sections of a website. If a website does not have a navigation bar, users will find it hard to locate particular sections of a site and will have to repeatedly hit the back button to get back to previous pages. A poor navigation bar, or lack of a navigation bar, will drive traffic away from a site.

About us: Career Karma is a platform designed to help job seekers find, research, and connect with job training programs to advance their careers. Learn about the CK publication.

What's Next?

Want to dive deeper?

Ask a question to our community

Want to explore tech careers?

Take our careers quiz

About the Author

AJ Condez

Copy Editor at Career Karma

AJ, from Manila, Philippines, holds a Bachelor's Degree in Accountancy from AMA Computer College. He has also taken courses from Technical Education and Skills Development Authority. Previously, he worked as a content manager for New Wave Media, handling ... read more about the author

Apr 9, 2022