{"id":106108,"date":"2022-04-09T03:45:22","date_gmt":"2022-04-09T10:45:22","guid":{"rendered":"https:\/\/careerkarma.com\/blog\/?p=106108"},"modified":"2022-04-09T03:45:24","modified_gmt":"2022-04-09T10:45:24","slug":"how-to-create-navigation-bar-in-html","status":"publish","type":"post","link":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/","title":{"rendered":"A Step-by-Step Guide to Creating a Navigation Bar in HTML"},"content":{"rendered":"\n<p>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 <a href=\"https:\/\/www.statista.com\/statistics\/617136\/digital-population-worldwide\/\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\">4.66 billion active internet users worldwide<\/a>, so understanding HTML and its functions are essential as a young entrepreneur.<\/p>\n\n\n\n<p>HTML is one of the leading coding languages worldwide as of 2021, with a resounding <a href=\"https:\/\/www.statista.com\/statistics\/793628\/worldwide-developer-survey-most-used-languages\/\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\">56% of programmers saying they use HTML<\/a>. By following these easy and concise steps to create a navigation bar in HTML, you\u2019ll be able to create a simple navigation bar, a color scheme, and a background.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-what-is-a-navigation-bar-in-html\">What is a Navigation Bar in HTML?<\/h2>\n\n\n\n<p>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.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-uses-for-navigation-bar-in-html\">Uses for Navigation Bar in HTML<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Organization.<\/strong> 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.<\/li><li><strong>Ease of Use.<\/strong> 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.<\/li><li><strong>Accessibility.<\/strong> Good-looking navigation bars provide easier access to information that allows for a streamlined user experience.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-creating-a-navigation-bar-step-by-step\">Creating a Navigation Bar: Step-by-Step<\/h2>\n\n\n\n<ol class=\"wp-block-list\"><li>Open a Text Editor<\/li><li>Create a &lt;nav&gt; tag<\/li><li>Define the &lt;ul&gt; tag<\/li><li>Define the &lt;style&gt; tag<\/li><li>Change the design<\/li><li>Close the tags<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-steps-to-create-a-navigation-bar-in-depth\">Steps to Create a Navigation Bar: In-Depth<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1200\" height=\"800\" src=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2022\/04\/Steps-to-Create-a-Navigation-Bar-In-Depth.jpg\" alt=\"A male programmer sitting in front of three computers.\" class=\"wp-image-106110\"\/><figcaption> You can use HTML to create a functional and accessible navigation bar.<\/figcaption><\/figure>\n\n\n\n<p>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\u2019ll be able to create a navigation menu that will help you build a navigation bar.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-1-open-a-text-editor\">1. Open a Text Editor<\/h3>\n\n\n\n<p>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\u2019ll be the groundwork for your basic navigation bar. These inline elements are the foundation of your navigation bar and will ensure its functionality.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>&lt;!Doctype Html><\/li><li>&lt;Html><\/li><li>&lt;Head><\/li><li>&lt;Title><\/li><li>Make a Navigation Bar<\/li><li>&lt;\/Title><\/li><li>&lt;\/Head><\/li><li>&lt;Body><\/li><li>&lt;\/Body><\/li><li>&lt;\/Html><\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-2-create-a-nav-tag\">2. Create a &lt;nav&gt; tag<\/h3>\n\n\n\n<p>Insert a &lt;nav> tag inside the &lt;body> tag of your CSS file. The &lt;nav> tag is the component that\u2019ll indicate to the computer that you\u2019re making a navigation bar.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>&lt;Body><\/li><li>&lt;nav><\/li><li>&lt;\/nav><\/li><li>&lt;\/Body><\/li><li>&lt;\/Html><\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-3-define-the-ul-tag\">3. Define the &lt;ul&gt; tag<\/h3>\n\n\n\n<p>The &lt;ul&gt; tag collects and orders all of the options you\u2019re going to input in your navigation bar. These options lead to their designated pages via absolute or relative path. The &lt;a&gt; path is a form of anchor tags to an href attribute that allows you to insert navigation links within the CSS properties.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>&lt;Body><\/li><li>&lt;nav><\/li><li>&lt;ul><\/li><li>&lt;li><\/li><li>&lt;a href=&#8221;#&#8221;> Home &lt;\/a><\/li><li>&lt;\/li><\/li><li>&lt;li><\/li><li>&lt;a href=&#8221;#&#8221;> Blog &lt;\/a><\/li><li>&lt;\/li><\/li><li>&lt;li><\/li><li>&lt;a href=&#8221;#&#8221;> About &lt;\/a><\/li><li>&lt;\/li><\/li><li>&lt;li> &lt;a href=&#8221;#&#8221;> Contact &lt;\/a><\/li><li>&lt;\/li><\/li><li>&lt;\/ul><\/li><li>&lt;\/nav><\/li><li>&lt;\/Body><\/li><li>&lt;\/Html><\/li><\/ol>\n\n\n\n<p>If you run the &lt;ul&gt; tag it will automatically show you a vertical navigation bar. The landing pages of these navigation links are coded via the &lt;li&gt; tag.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-4-define-the-style-tag\">4. Define the &lt;style&gt; tag<\/h3>\n\n\n\n<p>The &lt;style&gt; 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.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>&lt;Head><\/li><li>&lt;Title><\/li><li>Make a Navigation Bar<\/li><li>&lt;\/Title><\/li><li>&lt;style type=text\/css><\/li><li>&lt;\/style><\/li><li>&lt;\/Head><\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-5-change-the-design\">5. Change the design<\/h3>\n\n\n\n<p>In this part, you\u2019ll 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.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>&lt;style type=text\/css><\/li><li>body<\/li><li>{<\/li><li>height: 125vh;<\/li><li>margin-top: 80px;<\/li><li>padding: 30px;<\/li><li>background-size: cover;<\/li><li>font-family: sans-serif;<\/li><li>}<\/li><li>header {<\/li><li>background-color: blue;<\/li><li>position: fixed;<\/li><li>left: 0;<\/li><li>right: 0;<\/li><li>top: 5px;<\/li><li>height: 30px;<\/li><li>display: flex;<\/li><li>align-items: center;<\/li><li>box-shadow: 0 0 25px 0 black;<\/li><li>}<\/li><li>header * {<\/li><li>display: inline;<\/li><li>}<\/li><li>header li {<\/li><li>margin: 20px;<\/li><li>}<\/li><li>header li a {<\/li><li>color: white;<\/li><li>text-decoration: none;<\/li><li>}<\/li><li>&lt;\/style><\/li><\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-6-close-the-tags\">6. Close the tags<\/h3>\n\n\n\n<p>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.<\/p>\n\n\n\n<ol class=\"wp-block-list\"><li>&lt;!Doctype Html><\/li><li>&lt;Html><\/li><li>&lt;Head><\/li><li>&lt;Title><\/li><li>Make a Navigation Bar<\/li><li>&lt;\/Title><\/li><li>&lt;style type=text\/css><\/li><li>body<\/li><li>{<\/li><li>height: 125vh;<\/li><li>margin-top: 80px;<\/li><li>padding: 30px;<\/li><li>background-size: cover;<\/li><li>font-family: sans-serif;<\/li><li>}<\/li><li>header {<\/li><li>background-color: blue;<\/li><li>position: fixed;<\/li><li>left: 0;<\/li><li>right: 0;<\/li><li>top: 5px;<\/li><li>height: 30px;<\/li><li>display: flex;<\/li><li>align-items: center;<\/li><li>box-shadow: 0 0 25px 0 black;<\/li><li>}<\/li><li>header * {<\/li><li>display: inline;<\/li><li>}<\/li><li>header li {<\/li><li>margin: 20px;<\/li><li>}<\/li><li>header li a {<\/li><li>color: white;<\/li><li>text-decoration: none;<\/li><li>}<\/li><li>&lt;\/style><\/li><li>&lt;\/Head><\/li><li>&lt;Body><\/li><li>&lt;header><\/li><li>&lt;nav><\/li><li>&lt;ul><\/li><li>&lt;li><\/li><li>&lt;a href=&#8221;#&#8221;> Home &lt;\/a><\/li><li>&lt;\/li><\/li><li>&lt;li><\/li><li>&lt;a href=&#8221;#&#8221;> Blog&lt;\/a><\/li><li>&lt;\/li><\/li><li>&lt;li><\/li><li>&lt;a href=&#8221;#&#8221;> About &lt;\/a><\/li><li>&lt;\/li><\/li><li>&lt;li> &lt;a href=&#8221;#&#8221;> Contact &lt;\/a><\/li><li>&lt;\/li><\/li><li>&lt;\/ul><\/li><li>&lt;\/nav><\/li><li>&lt;\/header><\/li><li>&lt;\/Body><\/li><li>&lt;\/Html><\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-learn-more-about-html\">How to Learn More About HTML<\/h2>\n\n\n\n<ul class=\"wp-block-list\"><li><strong>Try Online Courses.<\/strong> There are <a href=\"https:\/\/careerkarma.com\/blog\/online-html-courses\/\">online HTML courses, classes, and training<\/a> 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.<\/li><li><strong>Gain Hands-on Experience.<\/strong> 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.<\/li><li><strong>Enroll in a Coding Bootcamp.<\/strong> Attending a <a href=\"https:\/\/careerkarma.com\/rankings\/best-coding-bootcamps\/\">top coding bootcamp<\/a> 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.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"h-how-to-create-a-navigation-bar-in-html-faq\">How to Create a Navigation Bar in HTML FAQ<\/h2>\n\n\n\n<div class=\"schema-faq wp-block-yoast-faq-block\"><div class=\"schema-faq-section\" id=\"faq-question-1649500006535\"><strong class=\"schema-faq-question\">Is learning HTML worth it?<\/strong> <p class=\"schema-faq-answer\">Yes, learning HTML is worth it. HTML is the dominant web development language in website building, so it\u2019s a key skill for <a href=\"https:\/\/careerkarma.com\/blog\/how-to-become-a-web-developer\/\">aspiring web developers<\/a> to learn. According to the Bureau of Labor Statistics, the <a href=\"https:\/\/www.bls.gov\/ooh\/computer-and-information-technology\/web-developers.htm\" target=\"_blank\" rel=\"noopener\" rel=\"nofollow\">median pay of web developers in 2020<\/a> was $77,200 per year.<br\/><br\/><\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1649500023715\"><strong class=\"schema-faq-question\">Is learning HTML hard?<\/strong> <p class=\"schema-faq-answer\">Yes, <a href=\"https:\/\/careerkarma.com\/blog\/learn-html\/\">learning HTML may be difficult<\/a>, especially if you don\u2019t have tech or coding experience. However, coding bootcamps have programs for complete beginners. If you\u2019re a tech-savvy individual who understands how computers work, you may find HTML and its logic easy to understand.<br\/><br\/><\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1649500946424\"><strong class=\"schema-faq-question\">What is HTML?<\/strong> <p class=\"schema-faq-answer\">Hypertext Markup Language (HTML) is an online language used in website building or simple applications. It\u2019s 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.<br\/><br\/><\/p> <\/div> <div class=\"schema-faq-section\" id=\"faq-question-1649500969487\"><strong class=\"schema-faq-question\">Why do we need navigation bars?<\/strong> <p class=\"schema-faq-answer\">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.<\/p> <\/div> <\/div>\n","protected":false},"excerpt":{"rendered":"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&hellip;","protected":false},"author":161,"featured_media":106109,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[17281],"tags":[],"class_list":{"0":"post-106108","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-html"},"acf":{"post_sub_title":"","sprint_id":"March 7","query_class":"How-to-create-*goal","school_sft":"","parent_sft":"","school_privacy_policy":"","has_review":null,"is_sponser_post":"","is_guest_post":""},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.4 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How To Create A Navigation Bar In HTML<\/title>\n<meta name=\"description\" content=\"A guide on how to create a navigation bar in HTML. The steps to create a navigation bar in HTML are easy-to-follow and understand.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A Step-by-Step Guide to Creating a Navigation Bar in HTML\" \/>\n<meta property=\"og:description\" content=\"A guide on how to create a navigation bar in HTML. The steps to create a navigation bar in HTML are easy-to-follow and understand.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Career Karma\" \/>\n<meta property=\"article:publisher\" content=\"http:\/\/facebook.com\/careerkarmaapp\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-09T10:45:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-04-09T10:45:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2022\/04\/A-Step-by-Step-Guide-to-Creating-a-Navigation-Bar-in-HTML.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"800\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"AJ Condez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Never be confused when creating a navigation bar in #HTML again. This article will help you become a savvy and knowledgeable #WebDeveloper as you start your #CareerInTech.\" \/>\n<meta name=\"twitter:creator\" content=\"@career_karma\" \/>\n<meta name=\"twitter:site\" content=\"@career_karma\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"AJ Condez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/\"},\"author\":{\"name\":\"AJ Condez\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/5729bc18f705a4a26f74d45f9106432b\"},\"headline\":\"A Step-by-Step Guide to Creating a Navigation Bar in HTML\",\"datePublished\":\"2022-04-09T10:45:22+00:00\",\"dateModified\":\"2022-04-09T10:45:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/\"},\"wordCount\":1308,\"commentCount\":0,\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/A-Step-by-Step-Guide-to-Creating-a-Navigation-Bar-in-HTML.jpg\",\"articleSection\":[\"HTML\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#respond\"]}]},{\"@type\":[\"WebPage\",\"FAQPage\"],\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/\",\"name\":\"How To Create A Navigation Bar In HTML\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/A-Step-by-Step-Guide-to-Creating-a-Navigation-Bar-in-HTML.jpg\",\"datePublished\":\"2022-04-09T10:45:22+00:00\",\"dateModified\":\"2022-04-09T10:45:24+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/5729bc18f705a4a26f74d45f9106432b\"},\"description\":\"A guide on how to create a navigation bar in HTML. The steps to create a navigation bar in HTML are easy-to-follow and understand.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#breadcrumb\"},\"mainEntity\":[{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#faq-question-1649500006535\"},{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#faq-question-1649500023715\"},{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#faq-question-1649500946424\"},{\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#faq-question-1649500969487\"}],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#primaryimage\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/A-Step-by-Step-Guide-to-Creating-a-Navigation-Bar-in-HTML.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/A-Step-by-Step-Guide-to-Creating-a-Navigation-Bar-in-HTML.jpg\",\"width\":1200,\"height\":800,\"caption\":\"Strings of code on a black screen.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tutorials\",\"item\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/tutorials\\\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"A Step-by-Step Guide to Creating a Navigation Bar in HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/\",\"name\":\"Career Karma\",\"description\":\"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/#\\\/schema\\\/person\\\/5729bc18f705a4a26f74d45f9106432b\",\"name\":\"AJ Condez\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/AJ-Headshot.jpg\",\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/AJ-Headshot.jpg\",\"contentUrl\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/wp-content\\\/uploads\\\/2022\\\/04\\\/AJ-Headshot.jpg\",\"caption\":\"AJ Condez\"},\"description\":\"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 WordPress websites, publishing SEO-friendly content, and supervising teams of writers and editors. He has also written content for SEO sites and his personal website. At Career Karma, AJ hopes to provide up-to-date information to deliver beneficial content to help readers start new careers. In his free time, AJ enjoys reading, journaling, and playing board games.\",\"sameAs\":[\"https:\\\/\\\/solomonjournal.wordpress.com\\\/%20\"],\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/author\\\/aj-condez\\\/\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#faq-question-1649500006535\",\"position\":1,\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#faq-question-1649500006535\",\"name\":\"Is learning HTML worth it?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes, learning HTML is worth it. HTML is the dominant web development language in website building, so it\u2019s a key skill for <a href=\\\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-become-a-web-developer\\\/\\\">aspiring web developers<\\\/a> to learn. According to the Bureau of Labor Statistics, the <a href=\\\"https:\\\/\\\/www.bls.gov\\\/ooh\\\/computer-and-information-technology\\\/web-developers.htm\\\">median pay of web developers in 2020<\\\/a> was $77,200 per year.<br\\\/><br\\\/>\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#faq-question-1649500023715\",\"position\":2,\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#faq-question-1649500023715\",\"name\":\"Is learning HTML hard?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Yes, <a href=\\\"https:\\\/\\\/careerkarma.com\\\/blog\\\/learn-html\\\/\\\">learning HTML may be difficult<\\\/a>, especially if you don\u2019t have tech or coding experience. However, coding bootcamps have programs for complete beginners. If you\u2019re a tech-savvy individual who understands how computers work, you may find HTML and its logic easy to understand.<br\\\/><br\\\/>\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#faq-question-1649500946424\",\"position\":3,\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#faq-question-1649500946424\",\"name\":\"What is HTML?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"Hypertext Markup Language (HTML) is an online language used in website building or simple applications. It\u2019s 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.<br\\\/><br\\\/>\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"},{\"@type\":\"Question\",\"@id\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#faq-question-1649500969487\",\"position\":4,\"url\":\"https:\\\/\\\/careerkarma.com\\\/blog\\\/how-to-create-navigation-bar-in-html\\\/#faq-question-1649500969487\",\"name\":\"Why do we need navigation bars?\",\"answerCount\":1,\"acceptedAnswer\":{\"@type\":\"Answer\",\"text\":\"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.\",\"inLanguage\":\"en-US\"},\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How To Create A Navigation Bar In HTML","description":"A guide on how to create a navigation bar in HTML. The steps to create a navigation bar in HTML are easy-to-follow and understand.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/","og_locale":"en_US","og_type":"article","og_title":"A Step-by-Step Guide to Creating a Navigation Bar in HTML","og_description":"A guide on how to create a navigation bar in HTML. The steps to create a navigation bar in HTML are easy-to-follow and understand.","og_url":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/","og_site_name":"Career Karma","article_publisher":"http:\/\/facebook.com\/careerkarmaapp","article_published_time":"2022-04-09T10:45:22+00:00","article_modified_time":"2022-04-09T10:45:24+00:00","og_image":[{"width":1200,"height":800,"url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2022\/04\/A-Step-by-Step-Guide-to-Creating-a-Navigation-Bar-in-HTML.jpg","type":"image\/jpeg"}],"author":"AJ Condez","twitter_card":"summary_large_image","twitter_description":"Never be confused when creating a navigation bar in #HTML again. This article will help you become a savvy and knowledgeable #WebDeveloper as you start your #CareerInTech.","twitter_creator":"@career_karma","twitter_site":"@career_karma","twitter_misc":{"Written by":"AJ Condez","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#article","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/"},"author":{"name":"AJ Condez","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/5729bc18f705a4a26f74d45f9106432b"},"headline":"A Step-by-Step Guide to Creating a Navigation Bar in HTML","datePublished":"2022-04-09T10:45:22+00:00","dateModified":"2022-04-09T10:45:24+00:00","mainEntityOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/"},"wordCount":1308,"commentCount":0,"image":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2022\/04\/A-Step-by-Step-Guide-to-Creating-a-Navigation-Bar-in-HTML.jpg","articleSection":["HTML"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#respond"]}]},{"@type":["WebPage","FAQPage"],"@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/","url":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/","name":"How To Create A Navigation Bar In HTML","isPartOf":{"@id":"https:\/\/careerkarma.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#primaryimage"},"image":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#primaryimage"},"thumbnailUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2022\/04\/A-Step-by-Step-Guide-to-Creating-a-Navigation-Bar-in-HTML.jpg","datePublished":"2022-04-09T10:45:22+00:00","dateModified":"2022-04-09T10:45:24+00:00","author":{"@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/5729bc18f705a4a26f74d45f9106432b"},"description":"A guide on how to create a navigation bar in HTML. The steps to create a navigation bar in HTML are easy-to-follow and understand.","breadcrumb":{"@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#breadcrumb"},"mainEntity":[{"@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#faq-question-1649500006535"},{"@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#faq-question-1649500023715"},{"@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#faq-question-1649500946424"},{"@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#faq-question-1649500969487"}],"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#primaryimage","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2022\/04\/A-Step-by-Step-Guide-to-Creating-a-Navigation-Bar-in-HTML.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2022\/04\/A-Step-by-Step-Guide-to-Creating-a-Navigation-Bar-in-HTML.jpg","width":1200,"height":800,"caption":"Strings of code on a black screen."},{"@type":"BreadcrumbList","@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/careerkarma.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tutorials","item":"https:\/\/careerkarma.com\/blog\/tutorials\/"},{"@type":"ListItem","position":3,"name":"A Step-by-Step Guide to Creating a Navigation Bar in HTML"}]},{"@type":"WebSite","@id":"https:\/\/careerkarma.com\/blog\/#website","url":"https:\/\/careerkarma.com\/blog\/","name":"Career Karma","description":"Latest Coding Bootcamp News &amp; Career Hacks from Industry Insiders","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/careerkarma.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/careerkarma.com\/blog\/#\/schema\/person\/5729bc18f705a4a26f74d45f9106432b","name":"AJ Condez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2022\/04\/AJ-Headshot.jpg","url":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2022\/04\/AJ-Headshot.jpg","contentUrl":"https:\/\/careerkarma.com\/blog\/wp-content\/uploads\/2022\/04\/AJ-Headshot.jpg","caption":"AJ Condez"},"description":"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 WordPress websites, publishing SEO-friendly content, and supervising teams of writers and editors. He has also written content for SEO sites and his personal website. At Career Karma, AJ hopes to provide up-to-date information to deliver beneficial content to help readers start new careers. In his free time, AJ enjoys reading, journaling, and playing board games.","sameAs":["https:\/\/solomonjournal.wordpress.com\/%20"],"url":"https:\/\/careerkarma.com\/blog\/author\/aj-condez\/"},{"@type":"Question","@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#faq-question-1649500006535","position":1,"url":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#faq-question-1649500006535","name":"Is learning HTML worth it?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Yes, learning HTML is worth it. HTML is the dominant web development language in website building, so it\u2019s a key skill for <a href=\"https:\/\/careerkarma.com\/blog\/how-to-become-a-web-developer\/\">aspiring web developers<\/a> to learn. According to the Bureau of Labor Statistics, the <a href=\"https:\/\/www.bls.gov\/ooh\/computer-and-information-technology\/web-developers.htm\">median pay of web developers in 2020<\/a> was $77,200 per year.<br\/><br\/>","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#faq-question-1649500023715","position":2,"url":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#faq-question-1649500023715","name":"Is learning HTML hard?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Yes, <a href=\"https:\/\/careerkarma.com\/blog\/learn-html\/\">learning HTML may be difficult<\/a>, especially if you don\u2019t have tech or coding experience. However, coding bootcamps have programs for complete beginners. If you\u2019re a tech-savvy individual who understands how computers work, you may find HTML and its logic easy to understand.<br\/><br\/>","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#faq-question-1649500946424","position":3,"url":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#faq-question-1649500946424","name":"What is HTML?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"Hypertext Markup Language (HTML) is an online language used in website building or simple applications. It\u2019s 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.<br\/><br\/>","inLanguage":"en-US"},"inLanguage":"en-US"},{"@type":"Question","@id":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#faq-question-1649500969487","position":4,"url":"https:\/\/careerkarma.com\/blog\/how-to-create-navigation-bar-in-html\/#faq-question-1649500969487","name":"Why do we need navigation bars?","answerCount":1,"acceptedAnswer":{"@type":"Answer","text":"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.","inLanguage":"en-US"},"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/106108","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/users\/161"}],"replies":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/comments?post=106108"}],"version-history":[{"count":0,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/posts\/106108\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media\/106109"}],"wp:attachment":[{"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/media?parent=106108"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/categories?post=106108"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/careerkarma.com\/blog\/wp-json\/wp\/v2\/tags?post=106108"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}