How to use a href in HTML to add links to your website

a href is used to include external and internal links on a website. The au­thor­ised values for the HTML attribute href are clearly defined. These include links to other websites and for­ward­ing to email addresses or telephone numbers.

What is href and what is it used for?

a href allows users to create external or internal links in an HTML document. When used correctly, the href attribute in­teg­rates seam­lessly into a website and appears in the form of a hyperlink. This allows visitors to click and visit another page on your site. The term href stands for ‘hyper reference’ and specifies the desired link des­tin­a­tion.

href at­trib­utes offer your website numerous ad­vant­ages. They provide a better structure, fa­cil­it­ate nav­ig­a­tion, and provide ad­di­tion­al in­form­a­tion. Links can also be be­ne­fi­cial for SEO. According to Google, it doesn’t matter whether you use an absolute URL, which includes the domain name, or a relative URL without a preceding domain name.

To display this video, third-party cookies are required. You can access and change your cookie settings here.

What is the structure of a href?

The syntax for href is always the same in HTML and looks like this:

<a href="URL">anchor text</a>

Each section fulfils an important function:

• The a in­tro­duces the link and indicates an anchor text. This HTML tag defines the start and end point of the hyperlink.
• The href attribute is used within the anchor text and sets the re­spect­ive link’s jump target. In addition to an internal or external website, PDF documents or images can also be linked.
• The URL for the link is placed within the quotation marks.
• This is followed by the visible text, which is clickable.
• The anchor text is complete.

Often links are combined with the title attribute to define the link title, an al­tern­at­ive de­scrip­tion of the link target. The link title can contain ad­di­tion­al in­form­a­tion about the linked website. It becomes visible in the frontend when you hover over the link without clicking on it. Defining link titles is also re­com­men­ded as an SEO measure. In HTML it looks like this:

<a href="URL" title="Linktitle">anchor text</a>

What values can href have?

The values for href in HTML are clearly defined to ensure that linking works properly. The au­thor­ised values for href are as follows:

• An absolute URL: When using a href, the absolute URL is the classic example. It redirects directly to an external website and contains the domain name, the path and (if available) the file name. Example: <a href="www.examplesite.com/topic/index.html">Absolute link to the example page</a>
• A relative URL: In a relative URL, you only specify the path (the file name is optional). For this reason, relative URLs are much shorter than absolute ones. Example: <a href="/topic/index.html">Relative link to example page</a>
• Link to an element: The direct link to an element is possible if it has a defined ID. This allows you to in­tern­ally link different sections of your website. Example: <a href="#section3">Direct link to an element</a>
• Other protocols: href is also suitable for other protocols, such as linking directly to an email address. This works via mailto:. Other protocols may include https://, ftp://, or file:.
• Scripts: Scripts, such as JavaS­cript, are also au­thor­ised values for a href. Example: href="javascript:alert('Do you have any further questions?');">

Five examples for how to use a href

You can use a href for different purposes. Below we’ll show you some of the most common use cases for href in HTML.

Use an image as a link

Use the following code to set an image as a link to a subpage:

<a href="https://www.examplesite.com"><img src=" /exampleimage.jpg" alt="image description"></a>

Link to an email address

Use mailto: to link an email address:

<a href="mailto:smith@examplesite.com">smith@examplesite.com</a>

The visitor’s email client will open when they click the link and the address (smith@ex­amples­ite.com) will auto­mat­ic­ally be inserted as the recipient. Al­tern­at­ively, they can also copy and paste the email address into the program or to another location.

Link to a phone number

You can also link a phone number with a href. This is useful if someone accesses your site using a smart­phone and wants to contact you directly. The link looks like this:

<a href="tel:+11231234567">0123 1234567</a>

It is important to add a plus sign and the in­ter­na­tion­al dialling code after the telephone reference tel:. The zero in the area code is not included.

Link to JavaS­cript

You can also link to JavaS­cript using href. The cor­res­pond­ing code is:

<a href="javascript:Example ( )">example</a>

Open a link in a new tab or window

While links are useful, be careful not to send your visitors to an external site directly from your website. With this in mind, it is useful for the link to open in a new tab or a new window. Users will then remain on your site and can look at any ad­di­tion­al in­form­a­tion at another time. The code for opening a link in a new tab or window looks like this:

<a href="http://www.example.org" target="_blank">http://www.example.org</a>