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

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

  2. Internal Links: These direct users to different sections or pages within the same website.

    <a href="/about/">About Us</a>

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

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

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

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

  1. Open a Text Editor: Start by opening your preferred text editor like Notepad (Windows), TextEdit (Mac), Visual Studio Code, Sublime Text, etc.
  2. 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>

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

  2. Save the File:

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

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

  1. 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.
  2. 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>

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

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

  1. 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>
  1. 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:

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

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

  2. 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:

  1. 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>
  1. 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:

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

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

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