Links in HTML

Links in HTML are created using the anchor element. A link connects one document, page section, file, email address, phone number, or external resource to another place. Without links, web pages would be isolated documents. With links, the web becomes a connected system of pages that users and search engines can move through.

The main tag used for links is <a>. The most important attribute inside it is href, which tells the browser where the link should go. A good link is not only technically correct; it also uses clear link text, points to the right destination, opens safely when needed, and helps users understand what will happen when they click it.

In this article, we will understand how links work in HTML, how to use the anchor tag, the difference between absolute and relative URLs, how to link to page sections, how email and phone links work, and what best practices make links more accessible and SEO-friendly.

What are Links in HTML?

Links in HTML are clickable references created with the <a> tag. The word “anchor” comes from the older idea of anchoring one point in a document to another point or destination. Today, the anchor tag is used for normal website navigation, buttons that behave like links, download links, contact links, and internal page jumps.

A link has two main parts: the destination and the visible link text. The destination is usually written in the href attribute. The visible link text is written between the opening and closing anchor tags.

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

In this example, https://example.com is the destination and Visit Example is the clickable text shown to the user.

A strong HTML link has a valid destination, meaningful link text, and behavior that matches what the user expects.

Basic Syntax of Links in HTML

The basic syntax of a link is simple. You start with the <a> tag, add the href attribute, write the link text, and close the tag. The closing tag is important because the content between the opening and closing tags becomes clickable.

<a href="page.html">Read the next page</a>

The browser displays the text as a link. By default, most browsers show unvisited links in blue and underlined, visited links in purple, and active links in another state while clicked. CSS can change this visual style, but the HTML structure remains the same.

The href Attribute in HTML Links

The href attribute is the heart of an HTML link. It can contain an external website URL, an internal page path, a file path, an email address link, a phone link, or an ID reference inside the same page. If an anchor tag does not have an href, it may still be an anchor element, but it is not a normal navigational link.

<a href="about.html">About Us</a>
<a href="https://nerdsdostuff.com">NerdsDoStuff</a>
<a href="#faq">Jump to FAQ</a>

The first link points to another page in the same site. The second points to a full external URL. The third points to an element on the current page whose id is faq.

Absolute URLs vs Relative URLs

An absolute URL includes the full address, usually with the protocol and domain name. A relative URL points to a location relative to the current page or site structure. Both are useful, but they solve different problems.

<!-- Absolute URL -->
<a href="https://example.com/tutorials/html.html">HTML Tutorial</a>

<!-- Relative URL -->
<a href="/tutorials/html.html">HTML Tutorial</a>

Use absolute URLs when linking to external sites or when the full destination must be clear. Use relative URLs for internal site links when the page belongs to the same website. Relative links are easier to maintain if the domain changes, but they must match the site folder structure correctly.

Opening Links in a New Tab

The target attribute controls where the linked document opens. The most common value is _blank, which opens the link in a new tab or window. This is often used for external links, documentation links, or resources that should not interrupt the current reading flow.

<a href="https://example.com" target="_blank" rel="noopener noreferrer">
  Open external website
</a>

When using target="_blank", add rel="noopener noreferrer". This is a security and privacy best practice. It prevents the new page from controlling the original page through window.opener and avoids leaking some referrer information in stricter cases.

Linking to Sections on the Same Page

You can link to a specific section of a page by using an ID. First, add an id attribute to the target element. Then create a link whose href starts with # followed by that ID.

<a href="#features">Go to Features</a>

<h2 id="features">Features</h2>
<p>This section explains the main features.</p>

This is useful for table of contents links, FAQ jumps, documentation pages, long tutorials, and landing pages. Keep IDs short, readable, and unique within the page. If two elements use the same ID, browser behavior can become confusing.

Email and Phone Links in HTML

HTML links are not limited to web pages. You can create email links using mailto: and phone links using tel:. These are especially useful on contact pages, business websites, and mobile-friendly pages.

<a href="mailto:contact@example.com">Email us</a>
<a href="tel:+911234567890">Call us</a>

A mailto: link usually opens the user's email application. A tel: link can start a phone call on supported devices. Do not rely only on these links; also show the email address or phone number as visible text when it helps the user copy it manually.

Download Links in HTML

The download attribute tells the browser that the target should be downloaded instead of opened normally. This works best for same-origin files, meaning files hosted on the same website. Browser behavior can vary for cross-origin files.

<a href="/files/html-notes.pdf" download>Download HTML Notes</a>

Download links should be clear. Tell the user what file they are downloading and, if possible, include the file type or size nearby. This improves trust and usability.

Link Text and Accessibility

Good link text tells the user where the link goes or what action it performs. Avoid vague text such as “click here” when the link is outside a sentence. Screen reader users often navigate by links, so repeated “click here” links are not helpful.

• Use descriptive text such as Read the HTML forms tutorial.
• Avoid unclear text such as click here or more without context.
• Do not use a full raw URL as link text unless the URL itself matters.
• Make sure link text is unique enough when several links appear close together.
• If a link opens in a new tab or downloads a file, make that behavior clear when needed.

Accessible links help everyone, not only screen reader users. Clear link text improves scanning, SEO context, and confidence before clicking.

Internal Links and SEO

Internal links connect pages within the same website. They help users move through related topics and help search engines understand page relationships. In a tutorial website, internal links are especially important because topics naturally build on each other.

For example, an article about HTML links can link to related topics such as images in HTML, lists in HTML, forms in HTML, and semantic HTML. The link text should describe the destination naturally. Do not force links only for SEO. Add them where they genuinely help the reader continue learning.

Common Mistakes with Links in HTML

One common mistake is forgetting the protocol in external links. If you write example.com as a relative link, the browser may treat it as a local path instead of an external website. Use https://example.com for external destinations.

Another mistake is nesting interactive elements incorrectly, such as placing a real button inside an anchor or an anchor inside a button. If something navigates to another page, use a link. If something performs an action on the current page, use a button. CSS can make either one look visually styled, but the HTML meaning should stay correct.

• Do not leave href empty on real navigation links.
• Do not use # as a fake destination unless JavaScript handles it carefully.
• Do not open every link in a new tab without reason.
• Do not use vague repeated link text across a page.
• Check links regularly so broken links do not hurt user experience.

FAQs

Which tag is used for links in HTML? 3

The <a> tag is used to create links in HTML. The destination is usually written in the href attribute.

What is href in HTML? 3

href stands for hypertext reference. It defines the URL, file path, email address, phone number, or page section where the link should go.

How do I open a link in a new tab? 3

Use target="_blank" on the anchor tag. For safety, also add rel="noopener noreferrer".

What is the difference between absolute and relative links? 3

An absolute link includes the full URL with the domain. A relative link points to a file or path relative to the current page or website root.

Can a link point to the same page? 3

Yes. Use a fragment link such as #faq and give the target section an ID such as id="faq".