This article was co-authored by How.com.vn staff writer, Darlene Antonelli, MA. Darlene Antonelli is a Technology Writer and Editor for How.com.vn. Darlene has experience teaching college courses, writing technology-related articles, and working hands-on in the technology field. She earned an MA in Writing from Rowan University in 2012 and wrote her thesis on online communities and the personalities curated in such communities.
This article has been viewed 28,649 times.
A navigation bar makes it easier for your site visitors to move to specific places within your website. You can also highlight a page by including it in the navigation bar for visitors to see. This How.com.vn will show you how to make a navigation bar in HTML.
Steps
Choose how you want your navigation bar to look. If you don’t have any ideas, you can take a look at the websites you like for inspiration.- Is the navigation bar going to be vertical or horizontal?
- Will the navigation bar present drop-down menus when you hover over a section?
- Will the navigation bar change colors when you click to a page?[1]
Open a text editor. Windows and Mac computers come with default text editor programs that will work to create or edit HTML.- If you’re using Windows, you can use Notepad, which you can search for in the Start Menu to find this application. For a notepad program with more features you can try Notepad++.
- If you’re using a Mac, you can use TextEdit, which you can search in Spotlight.
Type "<nav>" and press ↵ Enter. This indicates the beginning of your navigation bar code.
Type "<ul>" and press ↵ Enter. A navigation bar, at its very core, is a list of links. You have the option to use an unordered list, an ordered list, or a definition list. Most navigation bars use the unordered list option.
Type "<li>" and press ↵ Enter. This adds a list item tag to whatever you type in next.
Type a page link in “<a href=”LINK”>LINKNAME</a>” and press ↵ Enter. If you want to include a link to your Home page, type<a href=”/”>Home</a>
Type "</li>" to close the list item tag. If you forget to close a tag, you’ll see the error show up in your web page.
Type in more page links to fill your navigation bar. For example, you can include links to your Contact Us page, your About page, your Bio page, your Products page, and your News page.- Make sure each link is surrounded by "<li>" and "</li>".
Type "</ul>" to close the unordered list. The </ul> tag will stop the code from continuing the list.
Type “</nav>” to close the navigation bar code. All code written outside this tag will not be included in the navigation bar.- Your code might look like this:
<nav> <ul> <li> <a href="/">Home</a> </li> <li> <a href="/print">Print Design</a> </li> <li> <a href="/web">Web Design</a> </li> <li> <a href="/bio">Bio</a> </li> <li> <a href="/contact">Contact</a> </li> </ul></nav>
Advertisement- Your code might look like this:
Expert Q&A
Tips
- You’ll want to put your navigation bar code inside the “<! DOCTYPE html>” tag of your document.Thanks
About this article
1. Open a text editor.
2. Type ″<nav>″.
3. Type ″<ul>″ to start the navigation bar links.
4. Type page links in ″<a href="EXAMPLE">EXAMPLE</a>″ and within "<li></li>" tags.
5. Type "</ul>" to end the navigation bar links.
6. Type "</nav>".
Is this article up to date?
⚠️ Disclaimer:
Content from Wiki How English language website. Text is available under the Creative Commons Attribution-Share Alike License; additional terms may apply.
Wiki How does not encourage the violation of any laws, and cannot be responsible for any violations of such laws, should you link to this domain, or use, reproduce, or republish the information contained herein.
- - A few of these subjects are frequently censored by educational, governmental, corporate, parental and other filtering schemes.
- - Some articles may contain names, images, artworks or descriptions of events that some cultures restrict access to
- - Please note: Wiki How does not give you opinion about the law, or advice about medical. If you need specific advice (for example, medical, legal, financial or risk management), please seek a professional who is licensed or knowledgeable in that area.
- - Readers should not judge the importance of topics based on their coverage on Wiki How, nor think a topic is important just because it is the subject of a Wiki article.
