HTML Links

Connect pages together with the anchor element.

Syntax<a href="url">Link text</a>

Links are created with the <a> (anchor) element. The href attribute holds the destination of the link.

How links work

  • Text between the tags becomes the clickable link.
  • The href value can be a full URL or a local file path.

By default, links appear underlined and in a different color.

Example

Try it yourself
Loading editor…
Press Run to see the result.

When to use it

  • A developer uses <a href="/contact"> to navigate users from the homepage to the contact page.
  • A documentation site links related terms with <a href="..."> so readers can jump to definitions.
  • An e-commerce site links product thumbnails to detail pages using an <a> wrapping each <img>.

More examples

Basic internal and external links

href with a path navigates within the site; a full URL navigates to an external resource.

Example · html
<a href="/about">About Us</a>
<a href="https://github.com">GitHub</a>

Email and phone links

mailto: opens the email client and tel: initiates a phone call on mobile devices.

Example · html
<a href="mailto:[email protected]">Email us</a>
<a href="tel:+14155550100">Call us</a>

Link with rel for security

rel="noopener noreferrer" prevents the new tab from accessing the opener page, closing a security hole.

Example · html
<a href="https://example.com/article"
   target="_blank"
   rel="noopener noreferrer">
  Read the full article
</a>

Discussion

  • Be the first to comment on this lesson.
HTML Links — HTML | SoundsCode