htmlfreecodes.
Menu

Analytics choices

Analytics is optional. If allowed, Google measures public pages, navigation, recognized acquisition sources and engagement, including tool and playground use. The site excludes entered code, search terms and form contents from its Analytics events. You can withdraw here. This choice does not change advertising consent.

Read about Analytics and your information.

HTML Links

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

Complete working example

Links and in-page targets

Try a working page anchor and learn how to label a link that opens a new tab.

HTMLCSSSelf-contained
Edit in playground

Live preview

Original code, no external assets
Read the complete HTML document
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>My code example</title>
<style>
:root {
  font-family: system-ui, sans-serif;
  color: #18223b;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  min-height: 100vh;
  padding: 24px;
  background: #edf1ff;
  display: grid;
  place-items: center;
}
main {
  min-width: 0;
  width: min(100%, 600px);
  background: white;
  border-radius: 20px;
  padding: clamp(20px, 5vw, 32px);
}
h1 {
  font-size: clamp(24px, 5vw, 32px);
  line-height: 1.2;
  margin: 0 0 16px;
}
h2 {
  font-size: 20px;
  margin: 24px 0 12px;
}
p,
li {
  line-height: 1.65;
}
a {
  color: #2545a8;
  text-underline-offset: 3px;
}
button,
input,
select,
textarea {
  font: inherit;
}
button {
  min-height: 44px;
  border: 1px solid #9eaed0;
  border-radius: 10px;
  padding: 10px 14px;
  background: #eff3ff;
  color: #18223b;
  cursor: pointer;
}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid #3658bf;
  outline-offset: 3px;
}
pre {
  max-width: 100%;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  background: #eef2fa;
  padding: 16px;
  border-radius: 10px;
}
code {
  font-family: ui-monospace, monospace;
}
#packing {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid #dbe2f1;
}
</style>
</head>
<body>
<main>
  <h1>Links with a clear destination</h1>
  <nav aria-label="On this page"><a href="#packing">Jump to the packing list</a></nav>
  <p>A descriptive link tells the reader what they will find.</p>
  <p
    ><a href="https://html.spec.whatwg.org/" target="_blank" rel="noopener noreferrer"
      >Read the HTML Standard (opens a new tab)</a
    ></p
  >
  <section id="packing" tabindex="-1"
    ><h2>Packing list</h2
    ><ul
      ><li>Notebook</li
      ><li>Water bottle</li></ul
    ></section
  >
</main>
<script>

</script>
</body>
</html>

How it works

The #packing link matches a unique id in this document. The external reference is a plain destination link, with an announced new tab and noopener noreferrer. The isolated site preview demonstrates external links without opening destinations; a copied document follows them normally.

Troubleshooting and limits

Each target id must be unique and match the fragment exactly. Replace the external destination only with a URL you trust. Relative page links need the corresponding local file. Links navigate; buttons perform actions.

Explore more original working examples.

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.

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

Test Your Knowledge

5 practice questions are available. Choose Start practice to try them.

Related Articles

Continue your learning journey with these related tutorials:

Sample contact and navigation controls above are demonstrations. They do not contact anyone or open a destination.

A smaller starting example and practical notes

The anchor element creates navigation when it has an href. Write link text that explains the destination. A visitor should be able to understand the link without relying on an adjacent icon or a vague label such as click here.

<a href="/examples/">Browse working examples</a>
<a href="#next-step">Jump to the next step</a>
<section id="next-step">
  <h2>Your next step</h2>
  <p>Choose one small example and change its text.</p>
</section>

Know which path you are using

A path starting with / is relative to the site's root. A path such as next.html is relative to the current document location. A fragment starting with # targets an element with the matching id in the same document. Exact filename spelling and capitalization can matter on the web server even if they appeared forgiving on your Mac.

Use navigation for destinations

Use a button when the visitor performs an action, such as pausing an animation or resetting a counter. Do not use href="#" as a stand-in for an unfinished action: it changes navigation without providing a useful destination. Let links retain a visible focus indicator and distinguish them from surrounding body text.

Verify the destination

Follow the link in a browser and confirm it loads the intended content. Check fragment links against real ids. For a removed URL with an equivalent permanent replacement, a server redirect is preferable to an unrelated homepage handoff.