How to Create Navigation Links using HTML5 ?

How to Create Navigation Links using HTML5 ?

Last Updated : 14 Jul, 2020

In this article, we create a navigation link by using the <nav> tag in the document. The nav element represents a section of the page whose purpose is to provide navigational links, either in the current document or to other documents. The links in the "nav" element may point to other webpages or to different sections of the same webpage. It is a semantic element. Common examples of the "nav" elements are menus, tables, contents, and indexes. Syntax:

<nav>
    Links...
</nav>

Example:

html

<!DOCTYPE html>
<html>

<head>
    <title>
        How to create navigation 
        links using HTML5 ?
    </title>

    <style>
        .gfg {
            font-size: 40px;
            color: #090;
            font-weight: bold;
            text-align: center;
        }

        .nav_tag {
            text-align: center;
            margin: 30px 0;
            font-size: 35px;
        }
    </style>
</head>

<body>
    <div class="gfg">
        GeeksforGeeks
    </div>

    <div class="nav_tag">
        How to create navigation 
        links using HTML5 ?
    </div>
    
    <nav>
        <a href="#">C++</a> |
        <a href="#">Java</a> |
        <a href="#">PHP</a> |
        <a href="#">Data Structure</a> |
        <a href="#">Algorithm</a>
    </nav>
</body>

</html>

Output:

Supported Browsers are listed below:

Google Chrome
Internet Explorer
Firefox
Apple Safari
Opera

How to Create Navigation Links using HTML5 ?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to create a nofollow link using HTML5 ?

A nofollow link s used by Google to specify that the Google search spider should not follow that link and mostly used for paid links. Nofollow links are links with a rel=â€nofollowâ€ HTML tag applied to them. The nofollow tag tells search engines to ignore that link. The nofollow links do not pass Pag

How to create navigation bar using <div> tag in HTML ?

In this article, we will know to create the navigation bar using the <div> tag in HTML. The Navbar is a navigation header that contains the links to navigate to the different pages or sections of the site that helps to make the website interactive. The navbar is an important & fundamental

How to Create Navigable Tabs in HTML

Navigable tabs in HTML are interactive elements that allow users to switch between different content sections without reloading the page. Tabs organize content into panels, and users can navigate between them by clicking the tab headers, enhancing user experience through better content management.He

How to create Vertical Navigation Bar using HTML and CSS ?

After reading this article, you will be able to build your own vertical navigation bar. To follow this article you only need some basic understanding of HTML and CSS. Let us start writing our vertical navigation bar, first, we will write the structure of the navigation bar. In this tutorial, we crea

How to create Right Aligned Menu Links using HTML and CSS ?

The right-aligned menu links are used on many websites. Like hotels website that contains lots of options in the menu section but in case of emergency to make contact with them need specific attention. In that case, you can put all the menu options on the left side of the navigation bar and display

How to Create a Hyperlink in HTML?

If we want to navigate from one page to another then Hyperlink comes into play. It provides you the link to navigate to another page, on hovering that link the cursor turns into a little hand. Hyperlink enables us to connect one page to another, navigate to specific sections, or even open applicatio

How to Create Links to Other Pages in HTML ?

HTML links are like pathways on the internet. They connect one webpage to another. Imagine a link as having two parts: a starting point (where you click) and an endpoint (where you end up). When you click on a link, you're basically starting at one point (the anchor) and moving to another (the desti

How to create links to sections within the same page in HTML ?

Creating links that allow users to jump to different sections of a webpage can significantly improve navigation. This is especially helpful for long pages with a lot of content, as it helps users save time and find the information they need more quickly.Syntax<a href="#section1">Section 1</

How to create table cell using HTML5 ?

In this article, we will create cell in a table by using a combination of <tr> and <td> tag in a HTML table. Syntax: <table> <tr> <td> . . . </td> <td> . . . </td> </tr> </table> Example: html <!DOCTYPE html> <html> <head>

How to use anchor tag to open links in HTML ?

In this article, we will learn how to use anchor tags to open links in HTML and we will implement different operations using anchor tags in HTML. We will see in this article, how to redirect another website through an anchor tag and how to open a blank new tag for any new link to open an image in a