HTML Text Links Tutorial
Creating 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.
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:
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>
The download button will look like below on the browser!!!
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=”http://site.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.
Text Link Colors
All text links in a web page will have the following default colors.
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.