Previous
Written by: rJTutorial Team | Last Updated:

HTML Links

In web development, links are the "glue" that hold the internet together. Created using the <a> (anchor) element, links allow users to navigate between pages, jump to specific sections of a document, or even trigger actions like downloading a file or sending an email.

  • Basic Link:

The most common use of a link is to send a user to another website. This is done using the href (hypertext reference) attribute, which tells the browser exactly where the user should go when they click the text.

<a href="https://www.example.com">Visit Example Website</a>
Developer Tip: Always use descriptive link text. Instead of saying "Click here," use text like "Download our API documentation." This is much better for SEO and helps users who use screen readers understand the link's purpose.
  • Linking to a Different Page on the Same Site:

When you are building a multi-page website, you don't need to type the full URL (absolute path) for every page. Instead, you can use a relative path to point to a file within your own project folder.

<a href="/about">About Us</a>
Best Practice: Use relative paths (like /contact instead of https://mysite.com/contact) for internal links. This ensures your links continue to work even if you change your domain name or move from a local staging environment to a live server.
  • Linking to a Specific Section on a Page:

Sometimes called "bookmarks" or "anchor links," these allow users to jump to a specific part of the current page. This is incredibly useful for long-form articles or "Back to Top" buttons. To make this work, the target element must have a unique id.

<!-- The link -->
<a href="#section-id">Jump to Section</a>

<!-- The target -->
<div id="section-id">This is where the user will land.</div>
Common Mistake: Forgetting the hashtag (#) in the href attribute. If you write href="section-id", the browser will look for a page named "section-id" instead of jumping to the ID on the current page.
  • Opening Links in a New Tab:

By default, links open in the same tab. If you want to keep the user on your site while they view an external resource, you can use the target="_blank" attribute.

<a href="https://www.example.com" target="_blank">Visit Example Website</a>
Watch Out: Opening every link in a new tab can be annoying for users and is a common accessibility complaint. Reserve target="_blank" for external sites or when a user is in the middle of a process (like filling out a form) that shouldn't be interrupted.
  • Linking an Email Address:

You can create a link that automatically opens the user's default email program (like Outlook or Gmail) with your email address already filled in the "To" field by using the mailto: prefix.

<a href="mailto:[email protected]">Email Us</a>
Developer Tip: You can even pre-fill the subject line! Use mailto:[email protected]?subject=Inquiry to save your users even more time.
  • Linking to a File (e.g., PDF, Image):

Links aren't just for HTML pages. You can link directly to PDF files, ZIP archives, or images. Browsers will usually try to open PDFs in a new tab, while other files might trigger a download automatically.

<a href="document.pdf">Download PDF</a>
  • Using Images as Links:

In modern UI design, we often use logos or icons as clickable elements. To do this, simply wrap your <img> tag inside an <a> tag.

<a href="https://www.example.com">
    <img src="logo.png" alt="Company Logo">
</a>
Best Practice: When using an image as a link, ensure the alt attribute of the image describes where the link goes. If the image is a logo, the alt text should be "Home" or "Company Name Home" so screen readers can narrate the destination.
  • Link with a Title Attribute:

The title attribute provides extra information about a link. When a user hovers their mouse over the link, a small tooltip appears after a short delay.

<a href="https://www.example.com" title="Visit Example Website">Visit Example Website</a>

HTML links are the foundation of the web's structure. Whether you are building a simple navigation menu, a table of contents for a blog post, or a call-to-action button, mastering these attributes ensures your website is functional, accessible, and user-friendly.

Previous