How do I create a link in HTML?

Create a link using the (anchor) tag with the href attribute: Link Text . The href specifies the destination URL, and the text between tags is clickable. Links can point to external websites (full URLs), internal pages (relative paths like 'about.html'), sections within pages (anchors like '#section'), email addresses (mailto:email@example.com), or phone numbers (tel:+1234567890). Always include descriptive link text for accessibility - avoid generic text like 'click here'.

What is the difference between _blank and _self in HTML links?

target='_blank' opens links in a new browser tab or window, while target='_self' (default) opens links in the same tab. Use _blank for external websites to keep users on your site: External Link . Always add rel='noopener noreferrer' with _blank for security: . Other values include _parent (parent frame) and _top (full window). Overusing _blank frustrates users, so use it sparingly for external resources.

How do I create an email link in HTML?

Create email links using the mailto: protocol in the href attribute: Email Us . Clicking opens the user's default email client with the address pre-filled. Add subject and body: . Multiple recipients: . Include CC and BCC: . Note that mailto links only work if users have email clients configured; consider providing alternative contact methods.

What is the difference between absolute and relative links?

Absolute links include the full URL (protocol and domain): Link , working from any location but breaking if domains change. Relative links specify paths relative to the current page: (same folder), (parent folder), or (site root). Use absolute links for external sites and relative links for internal pages. Relative links are portable across development, staging, and production environments, making site maintenance easier.

How do I create a link to jump to a specific section on the same page?

Create anchor links using # followed by an element's ID. First, add an id to the target section: Section Title . Then create a link: Jump to Section 1 . Clicking scrolls the page to that element. For smooth scrolling, add CSS: html { scroll-behavior: smooth; }. Use descriptive IDs like 'features' or 'pricing'. This works for navigation menus, table of contents, and 'back to top' links. To link to sections on other pages: .

HTML Links

Hyperlink elements establish clickable connections between documents, facilitating web navigation through anchor tags configured with href attributes and supplementary properties.

⏱️ 8 min read 📅 Last Updated: October 5, 2025

Quick Answer

How do you create links in HTML?

Create links using the <a> (anchor) tag with href attribute: <a href="URL">Link Text</a>. Add target="_blank" to open in new tabs, use relative paths for internal pages, and mailto: for email links. Links support images, buttons, and styled text for navigation and user interaction.

Hyperlinks enable seamless movement across pages, document sections, and external resources. Constructed via <a> (anchor) elements, these navigational components form the connective tissue enabling intuitive website exploration.

Defining HTML Hyperlinks

Hyperlink technology transforms the web into an interconnected information network. These clickable references facilitate page-to-page movement, intra-document jumping, and external resource access.

Core Hyperlink Capabilities

Establish cross-document connectivity pathways
Facilitate same-page section navigation
Support diverse targets including files, email, telephony
Accommodate varied visual states and styling
Constitute fundamental usability infrastructure

Fundamental Hyperlink Construction

Elementary links employ <a> elements paired with href attributes designating target destinations.

Standard Hyperlink Patterns
                    <h1>Explore HTML Free Codes</h1>

<!-- Remote destination -->
<p>Access <a href="https://htmlfreecodes.com">HTML Free Codes</a> for additional lessons.</p>

<!-- Alternative external reference -->
<p>Expand your skills at <a href="https://htmlfreecodes.com/tutorials">our educational hub</a>.</p>

<!-- Custom anchor text -->
<p><a href="https://htmlfreecodes.com/contact">Reach our team</a> with inquiries.</p>

<!-- Embedded multiple anchors -->
<p>Study <a href="https://htmlfreecodes.com/html">HTML</a>,
<a href="https://htmlfreecodes.com/css">CSS</a>, plus
<a href="https://htmlfreecodes.com/javascript">JavaScript</a> courses.</p>
                  

Result:

Explore HTML Free Codes

Access HTML Free Codes for additional lessons.

Learn more about web development at our tutorials page.

We offer HTML, CSS, and JavaScript tutorials.

Link Attributes

HTML links support several attributes that control their behavior and appearance.

Link Attribute Examples
                    <h2>Different Link Attributes</h2>

<!-- Link that opens in new tab -->
<p><a href="https://htmlfreecodes.com" target="_blank">Open HTML Free Codes in new tab</a></p>

<!-- Link with title attribute (tooltip) -->
<p><a href="https://htmlfreecodes.com" title="Best place to learn HTML">HTML Free Codes</a> (hover to see tooltip)</p>

<!-- Link with custom styling -->
<p><a href="https://htmlfreecodes.com" style="color: #e74c3c; text-decoration: none; font-weight: bold;">Styled link</a></p>

<!-- Link with rel attribute for security -->
<p><a href="https://example.com" target="_blank" rel="noopener noreferrer">Secure external link</a></p>

<!-- Download link -->
<p><a href="/playground.html" download>Download our HTML tutorial (PDF)</a></p>

<!-- Link with multiple attributes -->
<p><a href="https://htmlfreecodes.com/advanced"
     target="_blank"
     title="Advanced HTML tutorials"
     rel="noopener">Advanced Tutorials</a></p>
                  

Result:

Different Link Attributes

Open HTML Free Codes in new tab

HTML Free Codes (hover to see tooltip)

Styled link

Secure external link

Download our HTML tutorial (PDF)

Advanced Tutorials

Internal Links and Anchors

Internal links allow you to jump to different sections within the same page using anchor points.

Internal Link Examples
                    <h1>Table of Contents</h1>

<!-- Navigation menu with internal links -->
<nav>
    <ul>
        <li><a href="#introduction">Introduction</a></li>
        <li><a href="#getting-started">Getting Started</a></li>
        <li><a href="#examples">Examples</a></li>
        <li><a href="#conclusion">Conclusion</a></li>
    </ul>
</nav>

<!-- Section 1 -->
<section id="introduction">
    <h2>Introduction</h2>
    <p>Welcome to HTML Free Codes! This section introduces our tutorial platform.</p>
</section>

<!-- Section 2 -->
<section id="getting-started">
    <h2>Getting Started</h2>
    <p>Here's how to begin your HTML learning journey with htmlfreecodes.com.</p>
</section>

<!-- Section 3 -->
<section id="examples">
    <h2>Examples</h2>
    <p>Check out these practical examples from HTML Free Codes.</p>
</section>

<!-- Section 4 -->
<section id="conclusion">
    <h2>Conclusion</h2>
    <p>Thank you for learning with HTML Free Codes!</p>
    <p><a href="#introduction">Back to top</a></p>
</section>
                  

Result:

Introduction

Welcome to HTML Free Codes! This section introduces our tutorial platform.

Getting Started

Here's how to begin your HTML learning journey with htmlfreecodes.com.

Examples

Check out these practical examples from HTML Free Codes.

Conclusion

Thank you for learning with HTML Free Codes!

Email and Phone Links

HTML links can also trigger email clients or phone calls using special URL schemes.

Email and Phone Link Examples
                    <h2>Contact HTML Free Codes</h2>

<!-- Basic email link -->
<p>Email us: <a href="mailto:support@htmlfreecodes.com">support@htmlfreecodes.com</a></p>

<!-- Email with subject line -->
<p><a href="mailto:support@htmlfreecodes.com?subject=HTML Tutorial Question">Email us about HTML tutorials</a></p>

<!-- Email with subject and body -->
<p><a href="mailto:support@htmlfreecodes.com?subject=Feedback&body=Hello HTML Free Codes team,%0D%0A%0D%0AI wanted to share my feedback...">Send feedback</a></p>

<!-- Email with CC and BCC -->
<p><a href="mailto:support@htmlfreecodes.com?cc=info@htmlfreecodes.com&subject=Important Message">Email with CC</a></p>

<!-- Phone number link -->
<p>Call us: <a href="tel:+1234567890">(123) 456-7890</a></p>

<!-- SMS link -->
<p>Text us: <a href="sms:+1234567890?body=Hello HTML Free Codes">Send SMS</a></p>

<!-- WhatsApp link -->
<p>WhatsApp: <a href="https://wa.me/1234567890?text=Hello%20HTML%20Free%20Codes">Chat on WhatsApp</a></p>
                  

Result:

Contact HTML Free Codes

Email us: support@htmlfreecodes.com

Email us about HTML tutorials

Send feedback

Email with CC

Call us: (123) 456-7890

Text us: Send SMS

WhatsApp: Chat on WhatsApp

Link Styling and States

Links have different visual states that can be styled with CSS to improve user experience.

Link State Examples
                    <style>
/* Normal link state */
.styled-link {
    color: #3498db;
    text-decoration: none;
    font-weight: bold;
    padding: 5px 10px;
    border-radius: 3px;
    transition: all 0.3s ease;
}

/* Visited link state */
.styled-link:visited {
    color: #9b59b6;
}

/* Hover state */
.styled-link:hover {
    color: white;
    background-color: #3498db;
    text-decoration: underline;
}

/* Button-style link */
.button-link {
    display: inline-block;
    background-color: #e74c3c;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.button-link:hover {
    background-color: #c0392b;
}
</style>

<h2>Different Link Styles</h2>

<p>This is a <a href="https://htmlfreecodes.com" class="styled-link">styled link</a> with hover effects.</p>

<p><a href="https://htmlfreecodes.com/start" class="button-link">Start Learning</a></p>

<p>Visit our <a href="https://htmlfreecodes.com/blog">blog</a> for the latest web development tips.</p>
                  

Result:

Different Link Styles

This is a styled link with hover effects.

Start Learning

Visit our blog for the latest web development tips.

Complete Links Example

Here's a comprehensive example demonstrating various types of HTML links working together:

Complete Links Example
                    <!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML Free Codes - Links Tutorial</title>
</head>
<body>
    <header>
        <h1>Welcome to HTML Free Codes</h1>
        <nav>
            <a href="#about">About</a>
            <a href="#tutorials">Tutorials</a>
            <a href="#contact">Contact</a>
        </nav>
    </header>

    <main>
        <section id="about">
            <h2>About Us</h2>
            <p>Learn web development at <a href="https://htmlfreecodes.com" target="_blank">htmlfreecodes.com</a>.</p>
        </section>

        <section id="tutorials">
            <h2>Our Tutorials</h2>
            <ul>
                <li><a href="https://htmlfreecodes.com/html">HTML Tutorial</a></li>
                <li><a href="https://htmlfreecodes.com/css">CSS Tutorial</a></li>
                <li><a href="https://htmlfreecodes.com/javascript">JavaScript Tutorial</a></li>
            </ul>
        </section>

        <section id="contact">
            <h2>Contact Us</h2>
            <p>Email: <a href="mailto:support@htmlfreecodes.com">support@htmlfreecodes.com</a></p>
            <p>Phone: <a href="tel:+1234567890">(123) 456-7890</a></p>
        </section>
    </main>

    <footer>
        <p><a href="#about">Back to top</a></p>
    </footer>
</body>
</html>
                  

🎯 Link Best Practices

Use descriptive text: Avoid "click here" or "read more"
Open external links in new tabs: Use target="_blank"
Add security attributes: Use rel="noopener noreferrer" for external links
Provide clear hover states: Help users understand what's clickable
Use meaningful URLs: Make them readable and SEO-friendly
Test all links: Ensure they work correctly
Consider accessibility: Use proper contrast and focus indicators

Try it Yourself

Experiment with different types of HTML links and navigation!

Try Links Example

Quick Answer

Defining HTML Hyperlinks

Core Hyperlink Capabilities

Fundamental Hyperlink Construction

Standard Hyperlink Patterns

Result:

Explore HTML Free Codes

Link Attributes

Link Attribute Examples

Result:

Different Link Attributes

Internal Links and Anchors

Internal Link Examples

Result:

Table of Contents

Introduction

Getting Started

Examples

Conclusion

Email and Phone Links

Email and Phone Link Examples

Result:

Contact HTML Free Codes

Link Styling and States

Link State Examples

Result:

Different Link Styles

Complete Links Example

Complete Links Example

🎯 Link Best Practices

Try it Yourself

Test Your Knowledge

Related Articles

HTML Basics

HTML Attributes

HTML Images

HTML File Paths

HTML Iframes

HTML Anchors