How to Create Text Links in HTML?

Imagine a site consists of hundreds of pages without having any connectivity between those pages. When you create a website, it is an important factor to connect one page to another. This not only helps the users to understand the relevancy of the main and linked pages but also helps search engines to estimate the relative importance of a page in a whole site. In this article, we will explain how to create HTML text links for different purposes.

What is HTML Link?

Links (also called as hyperlinks) are the connectors connecting one resource to another resource within a same page or across the pages and anchor <A> tag is the one used in HTML to define a link.

Structure of an HTML Link

Anchor tag consists of two parts:

A hyperlink reference – which is a URL of a page you want to link
A text – called anchor text displayed in the browser window

Types of Hyperlinks

Hyperlinks can be classified based on the element it is used with as follows:

Text links
- Connecting different pages
- Connecting sections of a same page
- Download link
- Email link
Image links

Creating Text Links – Connecting Different Pages

This is the standard, simple and most common form of hyperlinks which you can see in site’s navigation menus and breadcrumbs. HTML anchor tag <a> with a target URL and an anchor text is sufficient to create a link. The sample code to create a text link is as below:

<a href="https://www.webnots.com/">Home</a> |
<a href="https://www.webnots.com/webmasters-blog/">Blog</a> |
<a href="https://www.webnots.com/shop/">Shop</a> |
<a href="https://www.webnots.com/contact-us/ ">Contact Us</a>

It will look like this in a web page:

Home | Blog | Shop | Contact Us

Text Links – Connecting Two Sections of a Same Page

In order to connect two sections located in a same web page, the target section is to be identified and then linked in the source text using <a> tag. For example, if a page (http://yoursite.com/page.html) has a heading “Types of Links” for a section and you want to go to that heading from certain text link located somewhere down the page then there are two steps to be followed.

The first step is to identify the heading with an id as below:

<h1 id="Link_Types"> Types of Links </h1>

The second step is to link the section id with the anchor text using # tag, so that clicking on the text will take the users to the heading.

<a href="http://yoursite.com/page.html#Link_Types"> Go to Types of Links Section </a>

Using Back to Top Text Link

It is a good idea to provide a “back to top” link after each section of a web page especially when the content is very long. This is very simple in HTML, just add the below anchor tag anywhere in your page and clicking on the link will take the users to top of the page.

<a href="#top">Back to Top</a>

Creating Download Link

Download links are the hyperlinks when clicking on it will download a file on the browser window. Below is the example of creating a download button and clicking on it will download a PDF file from the server.

<button>
<a href="http://yoursite.com/ebook.pdf" target="_blank"> Download </a>
</button>

Note: The target=”_blank” attribute is used to instruct the browser to open the link in a new browser window.

The download button will look like below on the browser!!!

Learn more about email links, images links and link attributes.

Relative and Absolute Links

It is necessary to understand the directory structure when using hyperlinks (whether it is a text link or an image link). Let us take an example of site structure as below:

You are supposed to link the “style.css” file in your “index.html” file. You can do this in two ways:

<a href="/css/style.css">Here is a link to style.css file using relative structure.</a>
<a href="https://yoursite.com/css/style.css">Here is link to style.css using absolute URL.</a>

In reality the site may have more complex structure. If you don’t understand the site’s structure just use the absolute URLs. The problem with absolute URL is that when you change the URL, you should change each instance of it. But relative URLs generally get updated automatically without the need of modifying each instance.

Remember, when you change the file name from “style.css” to “style1.css” then you should change each instance regardless of relative or absolute URL is being used. Because it will point to unavailable resource and results in 404 error.

Content management systems like Weebly uses relative URLs while WordPress uses absolute URLs.

Text Link Colors

All text links in a web page will have the following default colors.

Link	Color
Unvisited Link	Blue
Visited Link	Purple
Active Link	Red

The colors of the unvisited link, visited link and active link can be changed by using the attributes link, vlink and alink within a tag of your HTML document as shown below:

<body link=red vlink=green alink=yellow>
Your Site Content Goes Here....
</body>

Though it is supported by all browsers, it is not recommended to control the link colors using HTML. Instead CSS can be used to control it over the complete site.

HTML Anchor <A> Tag Attributes

The power of HTML hyperlinks can be utilized maximum by adding attributes to the anchor <a> tag. These attributes only decide how the target link should behave and not on the content of the target link. Though there are many attributes an anchor tag <a> can support, here we will discuss some important ones from practical use point. Remember, you can use these link attributes with text, images and email links in HTML.

1. Href

This is a hyperlink reference specifies the target URL. The URL shall be an absolute or relative and can include an identifier.

<a href="https://www.webnots.com/">Home</a> | <!-- Absolute Link -->
<a href="index.html">Home</a> <!-- Relative Link -->

2. Target

The target link by default will open in the same browser window which you can customize with this attribute to tell the browser how the link should be opened.

Value	How it Opens?
_blank	Link will be opened in a new window or tab
_top	Link will be opened in the same window with full body
_parent	Link will be opened in the same window in the parent frame
_self	This is the default value will open the link in the same frame
Framename	Link will be opened in the mentioned frame

For example, below is the code showing how to use <a> tag to open a link in a new window or tab.

<a href="https://www.webnots.com/" target="_blank">Home</a> <!-- Link will open in a new window or tab -->

3. Name or ID

Specifies the name or id of an anchor and used with another href link to tell the browser to go to that section. Name attribute is not supported in HTML5 and hence use of ID attribute is recommended.

Below is an example code showing how to use id attribute within anchor <a> tag.

<a id="Link_Types"> Types of Links </a>

4. Rel

This is an attribute specifies the relationship between the current document and the target link. Browsers do not use this attribute but search engines use this to determine a link weightage for ranking. The values of this attributes are:

Value	Description
alternate	Alternate version of a document is linked
author	Linking to the author
help	Help document is linked
nofollow	Indicates the link is not to be followed by the search engine’s crawlers

Nofollow is an important attribute informs the search engines not to follow the link and hence will not be included when the popularity of a page. Below is an example of how to use nofollow attribute in HTML anchor tag.

<a href="https://www.webnots.com/" rel="nofollow">Home</a> <!-- Link will not be followed by a search engine crawler for calculating link weightage -->

5. Other Attributes

Value	Description
coords	Used to specify the coordinates of a link and not supported in HTML5.
download	Indicates that the hyperlink is a downloadable target and the browser downloads the files directly or ask for the location to store the file. Supported in HTML5 by the browsers Chrome and Firefox.
hreflang	If you want to link a document with a different language then use this attribute to indicate the language of the linked document.
type	Indicates the MIME type of the linked document.

<a href="https://img.webnots.com/2014/05/Do-It-Yourself-SEO-Guide-for-Beginners.pdf" download> Download Step By Step SEO Tutorial
</a> <!--File will be downloaded by the browser -->

Note: Most of the hyperlink attributes like download, hreflang, rel, target, and type can be used only if the anchor tag contains a href attribute.