Links in HTML - types and uses

This blog post explores the most common types of hyperlinks used in modern websites, providing clear examples and explanations for each. From internal links that guide users within the same site, to external references that direct them elsewhere on the web, each link type serves a distinct purpose in improving navigation and user experience.

You’ll also learn about anchor (jump) links that scroll to specific sections on a page, email and phone links that enhance user interaction and download links that allow users to access files directly.

Designed as a practical reference for both beginners and seasoned developers, this guide demonstrates how to implement each link type using clean, semantic HTML. Whether you’re building a simple landing page or a full-featured web application, understanding these link types is essential for creating accessible, user-friendly and functional websites.

External Links

External links are hyperlinks that point to a different domain or website outside of your own. They are commonly used to reference third-party content, cite sources, link to partner sites or direct users to additional resources.

In HTML, external links are created using the tag with an href attribute containing a full URL (e.g., https://example.com). To enhance user experience, it’s standard practice to open external links in a new browser tab by adding the target=”_blank” attribute and can be paired with rel=”noopener noreferrer” for security and performance.

Example

  Go to <a href="https://www.example.com" target="_blank" rel="noopener noreferrer">https://www.example.com</a>

target=”_blank”

• tells the browser to open the link in a new browser tab or window.

• it’s commonly used for external links so the user doesn’t navigate away from your site

rel=”noopener noreferrer”

• is a security and performance enhancement when using target=”_blank”:

• noopener prevents the new page from being able to access the window.opener property, which protects your site from potential malicious behavior.

• noreferrer prevents the browser from sending the address of your page (the “referrer”) to the linked site.

Internal Links

Internal links are hyperlinks that point to another page or section within the same website. They’re essential for navigation, user experience and search engine optimization (SEO).

Example

  <a href="/about-us" title="Learn more about our team and mission">About Us</a>

title=”Learn more about our team and mission”

• The title attribute in a link provides additional information when a user hovers over the link. It’s useful for accessibility and giving context without cluttering the interface.

Anchor Links (Jump Links)

Anchor links, also known as jump links, are hyperlinks that take the user directly to a specific section of the same page or another page by referencing an element’s id.

Anchor links improve navigation, especially on long pages as they guide users directly to relevant content.

Example – On the Same Page

  <!-- The link (placed anywhere on the page) -->
  <a href="#services">View Our Services</a>

  <!-- The target section -->
  <h2 id="services">Our Services</h2>

When a user clicks the link, the browser scrolls down to the section with id=”services”.

Example – On a Different Page

  <a href="/about#team">Meet the Team</a>

This link navigates to the /about page and jumps to the section with id=”team” on that page.

Email Links

Email links are hyperlinks that open the user’s default email application (like Outlook, Apple Mail, or Gmail) to compose a new email to a specified address. These are created using the mailto: protocol inside the href attribute of an tag.

Example

  <a href="mailto:info@josefzacek.com">Email Us</a>

When user clicks link above, it opens the user’s email client with “To” field is automatically filled with info@josefzacek.com.com email address.

mailto link is used in HTML to create an email hyperlink that opens the user’s default email client with a pre-filled email address

Example with subject and body

  <a href="mailto:info@josefzacek.com?subject=Inquiry&body=Hello, I'd like to learn more about your services.">Contact Us</a>

Above will pre-fill the subject line and the body of the email

?subject=Inquiry sets the subject line

body=Hello, I’d like to learn more about your services. sets the email message body

Phone Links

Phone links are hyperlinks that allow users—especially those on mobile devices—to initiate a phone call directly from a webpage, they use the tel: protocol in the href attribute of an anchor tag.

Example

  <a href="tel:+353870525927">Call Us</a>

When clicked on a smartphone or tablet, the device will prompt the user to call +353870525927.

tel link is used in HTML to create a clickable phone number that allows users—especially on mobile devices—to initiate a phone call directly from the webpage.

Download Links

Download links are hyperlinks that allow users to download a file (like a PDF, image, document, or ZIP archive) directly from your website, rather than navigating to it in the browser. These links improve user experience when you want visitors to save content locally.

  <a href="/files/menu.pdf" download="Restaurant-Menu.pdf">Download Our Menu</a>

download attribute tells the browser to download the file instead of opening it.In this case, clicking the link will download Restaurant-Menu.pdf to the user’s device.

Conclusion

Understanding and using the right types of links is essential for building effective, user-friendly websites. Whether you’re guiding users through your own site with internal links, connecting them to helpful resources via external links or enhancing functionality with anchor, email, phone and download links, each type plays a key role in navigation, accessibility and user experience.

By mastering how and when to use these hyperlink types—along with best practices like secure attributes and clear labeling—you ensure your site is not only functional, but also professional and easy to use across devices.