How to use a href in HTML for adding links to your website

a href is used to include external and internal links on a website. The authorized values for the HTML attribute href are clearly defined. Examples of links include links to other websites and forwarding to email addresses or telephone numbers.

Web hosting with a personal consultant

Fast and scalable, including a free domain for the first year and email address, trust web hosting from IONOS!

Domain
Wildcard SSL
24/7 support

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 will integrate seamlessly into your website and appear in the form of a hyperlink. This allows visitors to click and visit another page within your site. href stands for “hyper reference” and specifies the desired link destination. href attributes offer your website numerous advantages. For example, they provide a better structure, facilitate navigation, and provide additional information. Links can also be beneficial for SEO.

What is a href’s structure?

Href’s syntax is always the same in HTML and looks like this:

<a href="URL">name of the link destination</a>

Each sections fulfils an important function:

  • The a introduces the link. The a 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 respective 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 specified with the domain, e.g. “examplepage.com” for an external page or “examplepage.html” for an internal link.
  • This is followed by the visible text, which is clickable.
  • The anchor text is complete.

What values may href have?

The values for href in HTML are clearly defined to ensure linking works properly. The authorized values for href are as follows:

  • An absolute URL: The absolute URL is the classic example when using a href. It redirects directly to an external website. Example: href="https://www.ionos.com/digitalguidewww.examplesite.com"
  • A relative URL: The relative URL redirects to a file within a website. Example: href="https://www.ionos.com/digitalguidedefault.htm"
  • Link to an element: The direct link to an element is possible if it has a defined ID. This allows you to link selected sections of your internal website. Example: href="#section3"
  • 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 http://https://, ftp://, or file:.
  • Scripts: Scripts, such as JavaScript, are also authorized values for a href. Example: href="javascript://www.ionos.com/digitalguidealert('Do you have any further questions"
Tip

We explain how to embed JavaScript in HTML in another article.

Five examples for using a href

There are several uses for a href which can be implemented on your website. We’ll show you some of the most common uses for href in HTML.

Use image as link

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

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

Link to an email address

Use mailto: to link an email address. It should look like this:

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

The visitor’s email program will open when they click the link and the address (smith@examplemail.com) will automatically be inserted as the recipient. Alternatively, they can also copy and paste the email address into the program or somewhere else.

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 smartphone 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 international dialling code after the telephone reference tel:. The zero in the area code is not included.

Link to a JavaScript

You can also link to JavaScript using href. The corresponding code is:

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

Open link in a new tab or window

While links are useful, be careful not to send your visitors directly to an external site 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 additional information at another time. The code looks like this:

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

Create your perfect website in just a few steps! The Website Builder from IONOS offers useful and manageable tools and allows you to easily create your professional online presence. If you would rather leave it up to our experts, they will take over the design for you and build your website according to your individual requirements. Choose the right solution for your needs!