What is a hyperlink?

A hyperlink, the technical term of a link, is a clickable element on a website that redirects to a different location or file.

Hyperlinks are important for a website as they enable the readers to jump between pages and access a lot of information quickly without having to type out URLs. 

If the hyperlink is text-based, it’s usually a different color from the rest of the content. To make it stand out more, your cursor changes when you hover over the hyperlink.

Once you click on a hyperlink, the color often changes to something darker, notifying that it was already visited.

Types of hyperlinks

There are four types of hyperlinks:

• Text hyperlink — text that points to a specified URL. The text used to link is called anchor text
• Image hyperlink — a picture that links to a URL.
• Email hyperlink — an email address. Clicking it usually takes you to an email app on your device
• Button hyperlink — a button that points to the intended location, usually a CTA

These types of hyperlinks are popular on the internet and on offline documents and apps. 

Hyperlinks in apps like Word and Excel are used to take users to a different section of the document, although they can bring up new pages as well. 

How to create a hyperlink

Every piece of software that has a text editing tool, like a website builder or a CMS — has a specific feature to create hyperlinks. This is easier than manually editing the HTML code. 

Here’s how you create a hyperlink with Zyro.

1. Select the element that you want to turn into a hyperlink (e.g. text) and press Edit text
2. Click on the link icon and insert the desired website address into the URL form
3. Hit the Save button to make the change

Some apps also allow you to right-click on the selected item and choose insert link from the menu. Alternatively, you can press CTRL + K on Windows or CMD + K on MacOS to add a link after selecting the element. 

The correct HTML structure for creating a hyperlink

When manually coding a website, the HTML structure of a hyperlink is as follows:

<a href=”zyro.com”>Try Zyro for free</a>

Here’s a breakdown of each element:

• <a> … </a> — called the <a> tag, which defines a hyperlink in an HTML document
• href — short for hypertext reference. It’s the attribute name that introduces the attribute value 
• “zyro.com” — referred to as the attribute value, a page URL that you want to point to. Note that the double quotation marks are mandatory
• Try Zyro for free — the anchor text

The HTML code above is displayed like this: 

Try Zyro for free

If you don’t include any anchor text, the hyperlink is just the full URL.

Turning an image (or any other element) into a hyperlink

To manually turn an image into a hyperlink, you need to use the HTML source code of the image. For example:

<img src=”photo.jpg” alt=”image alt text”>

Then, place it between the opening <a> and closing </a> tag, like this:

<a href=”example.com”><img src=”image.jpg” alt=”image alt text”></a>

Now the picture being displayed is clickable and link to the specified URL. 

How to link to a different section on the same web page

First, you have to mark the specific section that you want to link to, which can be a paragraph or a heading. To do this, you need to use the id selector in HTML. 

For example, let’s say we want to create a hyperlink that directs readers to the “How to create hyperlink” heading. In our HTML document, the code looks like this:

<h2>How to create a hyperlink</h2>

Now, we insert id=”section-name” inside the opening h2 tag:

<h2 id=”section-1”>How to create a hyperlink?</h2>

Keep in mind that you can’t have spaces in the section name. You need to use an underscore or a hyphen if it’s more than one word.

Once we mark the desired section, place the name inside the opening <a> tag, after the href attribute. Here, we use “Show me how to create a hyperlink” as our anchor text. This is the final HTML code:

<a href=”section-1”>Show me how to create a hyperlink<a/>

If you only need to access the top of the page. Instead of using a section name, insert “#top” after the href attribute:

<a href=”#top”>Get back to the top<a/>

Get back to the top.