New Year's Sale:Up to 69 % OFF
September 29, 2020
1 min read
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.
There are four types of hyperlinks:
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.
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.
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.
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:
The HTML code above is displayed like this:
If you don’t include any anchor text, the hyperlink is just the full URL.
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.
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.