HTML Hyperlinks Tutorial - Creating Links with the A Element

Understanding HTML Hyperlinks

Hyperlinks connect webpages and other resources on the web. In HTML, links are created with the <a> element, commonly called the anchor element.

A hyperlink can lead to another page on the same website, a page on another website, a specific location within a page, a downloadable file, or other types of resources. The destination is normally specified with the href attribute.

HTML Hyperlink Syntax

A basic hyperlink consists of an opening <a> tag containing an href attribute, the clickable link content, and a closing </a> tag.

<a href="https://www.example-web.site/">Visit Example Web</a>

In this example, https://www.example-web.site/ is the destination and Visit Example Web is the text the visitor can select to follow the link.

The href Attribute

The href attribute specifies the destination of a hyperlink. Its value can point to many types of resources, including webpages, files, locations within a document, email addresses, and telephone numbers.

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

Without an href attribute, an <a> element does not create a conventional hyperlink to another resource. Most links therefore include an href value.

Link Text

The content between the opening and closing <a> tags becomes the clickable portion of the hyperlink. Link text should clearly describe where the link goes or what will happen when it is selected.

<a href="/contact.html">Contact Us</a>

Descriptive text such as Contact Us is more useful than vague phrases such as Click Here. Visitors should be able to understand the purpose of a link from its text and surrounding context.

Link Destinations

HTML hyperlinks can point to several types of destinations. The appropriate form of the href value depends on where the resource is located and what type of action the link performs.

<a href="page.html">Relative URL</a>
<a href="/html5/tutorials/">Root-Relative URL</a>
<a href="https://www.example-web.site/">Absolute URL</a>
<a href="#section-name">Page Fragment</a>
<a href="mailto:name@example-web.site">Send Email</a>
<a href="tel:+15551234567">Call Us</a>

Each of these link types is covered in more detail later in this section, including separate tutorials for relative, root-relative, and absolute URLs, fragment links, email links, telephone links, and download links.

The target Attribute

The target attribute specifies where the linked resource should be opened. Without a target value, a normal hyperlink opens in the current browsing context.

<a href="https://www.example-web.site/" target="_blank">Visit Example Web</a>

The _blank value usually opens the destination in a new browser tab or window. Use it when there is a good reason to open a separate browsing context rather than automatically applying it to every link.

HTML Hyperlink Example

The following example demonstrates several basic hyperlinks with different destinations.

<h2>Helpful Links</h2>

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

<p><a href="/contact.html">Contact Us</a></p>

<p><a href="https://www.example-web.site/">Visit Example Web</a></p>

Try changing the link text and href values in the editor to see how the destination and clickable content work together.

Play in Editor

Default Link Appearance

Browsers provide default styles that help distinguish hyperlinks from ordinary text. Unvisited links are commonly blue and underlined, while visited links may appear in a different color.

CSS can change the color, underline, background, and other visual properties of links. Links should remain visually distinguishable from surrounding text so visitors can recognize which content is interactive.

Writing Accessible Links

Good link text helps everyone understand the purpose of a hyperlink and is particularly useful to people who navigate webpages with assistive technology. Link text should make sense without requiring visitors to guess where the link leads.

<!-- Less descriptive -->
<a href="/html5/tutorials/">Click here</a>

<!-- More descriptive -->
<a href="/html5/tutorials/">Browse the HTML Tutorials</a>

Avoid using the URL itself as link text when a concise description would communicate the destination more clearly. Also avoid repeatedly using identical vague text such as Read More when the links lead to different destinations.

Hyperlink Best Practices

Use the <a> element to create hyperlinks to webpages and other resources.
Use the href attribute to specify the link destination.
Write descriptive link text that communicates the purpose or destination of the link.
Avoid vague link text such as Click Here when a meaningful description can be used instead.
Choose the appropriate type of URL for the destination.
Use target="_blank" only when opening a new browsing context is appropriate.
Keep links visually distinguishable from surrounding text.
Check links regularly to make sure their destinations still exist and work correctly.

Summary

HTML hyperlinks are created with the <a> element, while the href attribute normally identifies the destination. Links can connect pages, websites, files, document fragments, email addresses, telephone numbers, and other resources, making them one of the fundamental ways visitors navigate and interact with the web.