HTML link syntax is used to create hyperlinks that connect one webpage to another. Links allow users to navigate between pages, websites, files, sections of a webpage, email addresses, and other resources.

HTML links are created using the <a> element, also known as the anchor element. The href attribute specifies where the link should take the user.

If you are new to HTML, first understand HTML Elements and HTML Attributes.

Basic HTML Link Syntax

The basic syntax for an HTML link is:

<a href="URL">Link Text</a>

There are three important parts:

• <a> is the opening anchor tag.
• href specifies the destination URL.
• Link Text is the clickable text displayed on the webpage.

Example

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

The text Visit Example becomes clickable. When a user clicks it, the browser opens the URL specified in the href attribute.

The <a> Element

The <a> element is used to create a hyperlink.

<a>HTML Tutorial</a>

However, an anchor element without a destination is generally not useful as a normal link. The href attribute is normally used to specify the destination.

<a href="html.html">HTML Tutorial</a>

You can learn more about the different types of links in HTML Links.

The href Attribute

The href attribute stands for Hypertext Reference. It specifies the destination of the link.

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

The value inside href can be an absolute URL, relative URL, file path, email address, phone number, or page section.

Absolute URL Syntax

An absolute URL contains the complete web address, including the protocol and domain name.

<a href="https://www.example.com/about">
    About Us
</a>

Absolute URLs are commonly used when linking to external websites.

Relative URL Syntax

A relative URL points to another location within the same website.

<a href="about.html">About Us</a>

You can also specify a folder:

<a href="/html/html-elements/">HTML Elements</a>

Relative URLs are particularly useful for internal website navigation.

Opening Links in a New Tab

The target attribute can specify where a link should open.

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

The value _blank tells the browser to open the destination in a new tab or browsing context.

For external links, you can also use rel="noopener":

<a href="https://example.com"
   target="_blank"
   rel="noopener">
    Visit Example
</a>

Linking to a Section

You can use an id to link directly to a specific section of the same webpage.

First, add an ID:

<h2 id="contact">Contact Us</h2>

Then create a link to that ID:

<a href="#contact">Go to Contact</a>

The #contact value tells the browser to move to the element with the matching ID.

Email Link Syntax

You can create an email link using mailto:.

<a href="mailto:hello@example.com">
    Send Email
</a>

Clicking the link can open the user’s default email application.

Phone Link Syntax

The tel: scheme can be used to create a clickable phone number.

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

This is especially useful for mobile-friendly websites.

HTML Link Syntax with an Image

An image can also work as a link by placing the <img> element inside the <a> element.

<a href="/html/html-images/">
    <img src="html.jpg" alt="HTML Images Tutorial">
</a>

For more information, see HTML Images.

Common HTML Link Syntax Mistakes

A common mistake is forgetting the href attribute:

<a>Visit Website</a>

Another mistake is forgetting to close the anchor element:

<a href="about.html">About Us

The correct syntax is:

<a href="about.html">About Us</a>

Always check that your URL is correct and that the opening and closing <a> tags are properly written.

Understanding HTML link syntax is important for creating website navigation, internal links, external references, and clickable resources. Once you understand <a> and href, you can create almost any basic hyperlink required for an HTML webpage.