A Complete Guide - HTML Anchor Tags and Hyperlinking

Last Updated: 03 Jul, 2025

YOU NEED ANY HELP? THEN SELECT ANY TEXT.

HTML Anchor Tags and Hyperlinking

Structure of an Anchor Tag

The basic syntax for an anchor tag is:

<a href="url">Link Text</a>

<a>: This is the opening tag that marks the beginning of the hyperlink.
href="url": The href (hypertext reference) attribute specifies the destination URL of the hyperlink. This can be an absolute URL (like or a relative URL (like /about/).


Link Text: This is the clickable portion of the hyperlink that users will see on the webpage.


Types of Hyperlinks

External Links: These direct users to a completely different website. For example, linking to a blog post hosted on another platform.
<a href=" More on Example Blog</a>


Internal Links: These direct users to different sections or pages within the same website.
<a href="/about/">About Us</a>


Bookmark Links: These link to specific sections on the same page. The destination section is marked by an id attribute.
<!-- Link to the section -->
<a href="#contact">Contact Us</a>

<!-- Section on the same page -->
<section id="contact">Contact Information...</section>


Email Links: These open the user's default email client with a pre-filled recipient's email address. This can be useful for "Contact Us" forms.
<a href="mailto:info@example.com">Email Us</a>


Download Links: These initiate the download of a file when clicked.
<a href="/download/file.pdf" download="file.pdf">Download PDF</a>



Attributes of the <a> Tag

href: (Required) Specifies the URL of the page the link goes to.

target: Specifies where to open the linked document. Common values are:

_self: Opens the linked document in the same frame as it was clicked (this is default).
_blank: Opens the linked document in a new window or tab.
_parent: Opens the linked document in the parent frame.
_top: Opens the linked document in the full body of the window.

<a href=" target="_blank">Visit Example</a>


title: Provides additional information about the link, often displayed as a tooltip when the user hovers over the link.
<a href=" title="Visit Example Website">Visit Now</a>


rel: Specifies the relationship between the current document and the linked document. Common values are:

noopener: Prevents the new page from being able to access the window.opener property when using target="_blank".
noreferrer: Similar to noopener, but it also prevents referrer information from being passed to the new page.
nofollow: Indicates that the link should not influence the ranking of the destination page by search engines.


Additional Resources

MDN Web Docs - <a> Element
W3Schools - HTML Hyperlinks
WCAG 2.1 Guidelines

                            
                            
                                Online Code run
                                
                                    
                                        🔔 Note: Select your programming language to check or run code at

                                    
                                    💻 Run Code Compiler


                                
                            
                            
                                Step-by-Step Guide: How to Implement HTML Anchor Tags and Hyperlinking
                            
Complete Examples, Step by Step for Beginners: HTML Anchor Tags and Hyperlinking

Step 1: Basic Anchor Tag Usage to Link to Another Website

Open a Text Editor: Start by opening your preferred text editor like Notepad (Windows), TextEdit (Mac), Visual Studio Code, Sublime Text, etc.
Create a Simple HTML Document Structure:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Website!</h1>
    <!-- Anchor Tag Example -->
    <p>Please visit <a href=" Domain</a> for more information.</p>
</body>
</html>


Explanation:

The <a> tag is used to create the hyperlink.
href attribute specifies the URL of the page the link goes to. In this case, it's "
The text between <a> and </a> tags ("Example Domain") will be clickable and shown as the hyperlink text.


Save the File:

Save your file with an .html extension, for example, index.html.


View in a Web Browser:

Double-click the saved index.html file or right-click and choose "Open with" followed by your browser to view the content.
You should see a sentence that includes a clickable link to the Example Domain website.



Step 2: Linking to a Specific Section within the Same Page

Identify Where You Want to Link To:

Suppose you want to create a link that takes users directly to a "Contact Us" section within the same page.


Add an ID Attribute to the Destination Element:

<!DOCTYPE html>
<html>
<head>
    <title>My First Webpage</title>
</head>
<body>
    <h1>Welcome to My Website!</h1>
    
    <!-- Table of Contents -->
    <ul>
        <li><a href="#about-us">About Us</a></li>
        <li><a href="#services">Services</a></li>
        <li><a href="#contact-us">Contact Us</a></li>
    </ul>

    <h2 id="about-us">About Us</h2>
    <p>This section contains information about our organization...</p>

    <h2 id="services">Services</h2>
    <p>Details about our services are listed here...</p>

    <h2 id="contact-us">Contact Us</h2>
    <p>If you have any questions, please contact us at the following email...</p>
</body>
</html>


Explanation:

Each link contains an href attribute that begins with a pound sign (#) followed by the id attribute value of the section you want to link to (e.g., #about-us, #services, #contact-us).
This ensures that when the user clicks the link, they are taken directly to that section within the same page.


Save and View:

Save your changes and view the document in a web browser.
Clicking the "Contact Us" link should scroll you down to the "Contact Us" section immediately.



Step 3: Adding Styling to Links

Use CSS to Style the Links:

You can style links using internal CSS within the <style> tags inside the <head> section or external stylesheets.



<!DOCTYPE html>
<html>
<head>
    <title>Styled Hyperlinks</title>
    <style>
        /* Styling the Links */
        a:link {
            color: blue; 
            text-decoration: none;
        }
        
        a:visited {
            color: purple;
        }
        
        a:hover {
            color: red;
            text-decoration: underline;
        }
        
        a:active {
            color: green;
        }
    </style>
</head>
<body>
    <h1>Welcome to My Styled Webpage!</h1>
    <p>Check out our <a href=" Domain</a> for more details.</p>
</body>
</html>


Explanation of CSS Selectors:

a:link: Styles the unvisited link.
a:visited: Styles the visited link.
a:hover: Styles the link while the user’s mouse hovers over it.
a:active: Styles the link when the user clicks it but before the destination page loads.



Step 4: Creating Download Links
Sometimes, instead of directing users to a webpage, you might want to provide a download link. Here's how:

Use the Anchor Tag with download Attribute:

<!DOCTYPE html>
<html>
<head>
    <title>Download Files</title>
</head>
<body>
    <h1>Download My Resume</h1>
    <p>You can download my resume <a href="resume.pdf" download="JohnDoeResume.pdf">here</a>.</p>
</body>
</html>


Explanation:

The href attribute points to the file location. Make sure the file ('resume.pdf' in this example) exists in the same directory as the HTML file or provide the correct path.
The download attribute suggests the name for the downloaded file in quotes. If not specified, the filename from href will be used.


Save and Place File:

Ensure resume.pdf is in the same directory if your href attribute has no path specified.
Clicking on the link should trigger a file download rather than opening the PDF in the browser.



Step 5: Targeting Links to Open in a New Tab
It can be useful to have links open in a new tab or window. Here's how to do it:

Add the target="_blank" Attribute:

<!DOCTYPE html>
<html>
<head>
    <title>Opening Links in New Tabs</title>
</head>
<body>
    <h1>Explore External Websites</h1>
    <p>Check out the <a href=" target="_blank">Example Domain</a> for more information.</p>
</body>
</html>


Explanation:

The target="_blank" attribute within the <a> tag makes sure the link opens in a new tab or window.
This is particularly important for external websites to keep users engaged with your site.



Step 6: Using Images as Links
You can also use images as clickable hyperlinks. Here's how:

Embed an Image and Link It:

<!DOCTYPE html>
<html>
<head>
    <title>Image Links</title>
</head>
<body>
    <h1>Visit Our Official Website</h1>
    <a href=" target="_blank"><img src="logo.png" alt="Our Logo"></a>
</body>
</html>


Explanation:

The <img> tag used inside the <a> tag creates an image link.
The src attribute defines the file path of the image.
The alt attribute provides alternative text for the image in case it doesn’t load.


Save and Test:

Ensure you have a logo.png image in the same directory or provide the exact path.
Clicking on the image should take you to the Example Domain in a new tab.




                        
                        
                            You May Like This Related .NET Topic
                            
                                📥 Download Code
                                ▶️ Watch Online
                                📖 Read Description


                



        Login to post a comment.


        
            
                

                        
                             All Headings