How to use anchor tag to open links in HTML ?

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

Last Updated : 30 Apr, 2025

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</a>

<a>: The anchor tag is used to define a hyperlink.
href="#section1": The href attribute specifies the target of the link. In this case, it points to a section id="section1" on the same page.
Section 1: The clickable text that appears for the user. When clicked, it will scroll to the section with id="section1".

Approach

Use the Anchor Tag <a>: In HTML, use the <a> tag to create links within the same page.
Assign Unique IDs: Assign unique IDs to different sections of the webpage using the id attribute.
Set the href Attribute: Set the href attribute of the anchor tag to “#section1” (replace “section1” with the desired ID) to link to a specific section.
Avoid Using Class Names in href: Class names are not unique identifiers and should not be used in the href attribute for internal linking.

Example: Below is an example where we divide the webpage into sections using <div>, assign unique IDs to each section, and use <a> tags in the navigation section with href=”#section1″ to enable users to navigate to specific sections with a click.

HTML

<html>
<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            font-family: Arial, sans-serif;
        }

        .section {
            width: 100%;
            height: 100vh;
            /* Full viewport height */
            color: white;
            font-size: 2rem;
            display: flex;
            justify-content: center;
            align-items: flex-start;
            /* Align text to the top */
            text-align: center;
            padding-top: 80px;
            /* Adds space to avoid being hidden behind fixed nav */
        }

        .one {
            background-color: #EF5354;
        }

        .two {
            background-color: #E03B8B;
        }

        .three {
            background-color: #3944F7;
        }

        .four {
            background-color: #38CC77;
        }

        .nav {
            position: fixed;
            top: 10px;
            width: 100%;
            background-color: #333;
            display: flex;
            justify-content: center;
            padding: 10px 0;
            z-index: 100;
        }

        .btn {
            color: white;
            background-color: #38CC77;
            height: 40px;
            width: 90px;
            padding: 2px;
            border: 2px solid black;
            text-decoration: none;
            display: inline-block;
            margin: 0 10px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="nav">
        <a href="#section1" class="btn">Section 1</a>
        <a href="#section2" class="btn">Section 2</a>
        <a href="#section3" class="btn">Section 3</a>
        <a href="#section4" class="btn">Section 4</a>
    </div>

    <div class="section one" id="section1">
        Section 1: Welcome to the first section!
    </div>
    <div class="section two" id="section2">
        Section 2: Here’s some content for the second section.
    </div>
    <div class="section three" id="section3">
        Section 3: More details and information here.
    </div>
    <div class="section four" id="section4">
        Section 4: Final section with additional content.
    </div>
</body>

</html>

Output

output-0001

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

In this example:

This HTML code creates a webpage with a navigation bar at the top containing links to different sections of the page.
Each section has a unique background color and is 40% of the viewport height. Clicking a navigation button scrolls the user to the corresponding section.
The sections are styled with large text and centered content for easy readability.

Conclusion

Creating anchor links to sections within the same page in HTML is a way to enhance navigation and improve the user experience. By using the id attribute for target sections and the href attribute for linking, you can create seamless navigation for long pages, FAQs, or single-page websites. Additionally, using smooth scrolling and following best practices will ensure that your anchor links are user-friendly and accessible.

How to use anchor tag to open links in HTML ?

J

jymnjogiya

Improve

Article Tags :

Similar Reads

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 Navigation Links using HTML5 ?

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

What is nesting of list & how to create the nested list in HTML ?

Nesting of lists in HTML involves placing one list within another list item, creating a hierarchical structure. This is done by embedding a <ul> (unordered) or <ol> (ordered) list inside an <li> (list item) element. The proper way to make a nested HTML list is to use the <ul>

How to Create a Link to Send Email in HTML ?

Incorporating email links into HTML pages facilitates a smooth way for users to send a message directly from the webpage. We will see how to create these email links, making your web pages user-friendly and interactive. Table of Content Using Mailto Protocol with Predefined SubjectCreating Link to s

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

How to create links with 'target="_blank"' in Markdown ?

In this article, we will see how to create links with 'target="_blank"' in Markdown. Markdown is a free and open-source lightweight markup language that can be utilized to include formatting elements to plaintext text documents. It is a special way to write words that makes them look different on a

How To Link Two Pages In HTML ?

Linking the two pages in HTML is the fundamental task in the web development. It can allow the users to navigate from one page to another by clicking on the hyperlinks. It can be typically done using the anchor tag in HTML, which defines the hyperlink to another page or resource. In this article, we

How to Change the Target of a Link in HTML ?

In HTML, for changing the target of a link we can use the target attribute in the <a> anchor tag. This attribute mainly specifies where the linked content should be displayed. Below are the approaches that can be used to change the target link in HTML: Table of Content Using target Attribute O

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. H

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