Link or hyperlink is an association which connects one web page to another. It is very important to inter connect your pages so that users as well as search engines can understand the relevancy of related pages. In addition to connecting your own web pages you may also need to link to external sites to provide more information on the related content. This article explains about the basics of hyperlink structure, type of links, colors and points to be taken care during linking web pages.
Hyperlink Structure
A hyperlink consists of two simple parts:
- An URL called Uniform Resource Locator which is nothing but address of the web page you want to link.
- Anchor text which is the text visible to users in the browser window.
Type of Hyperlinks
Based on the usage in a webpage a hyperlink can be classified into one of the following category:
- Text link
- Image link
- Link to a file
- Link to an email id
Creating a Text Hyperlinks
Most of the site’s navigation consists of a text hyperlink including menus and breadcrumbs. In order to create a hyperlink you need to use HTML anchor tag <a>. The sample code to create a text link is as below:
Code
<a href="https://www.webnots.com">A Knowledge Sharing Platform for Webmasters</a>How it looks
A Knowledge Sharing Platform for Webmasters
Href is the attribute called hyperlink reference used to link the requested resource and the resource could be a webpage, a file or an email id. Users will only see the anchor text in the content and the link URL will be displayed in the browser’s lower right or left corner (or status bar in case of Internet Explorer) when moving the mouse over the anchor text as shown in the below picture.
Image Links
Similar to text links you can link the images to navigate to any other web page and below is the sample code to link an image to a webpage.
Code
<img border="2" src="https://img.webnots.com/2012/08/Search-Engine-Submission.png" alt="Search Engine Submission" width="300" height="250">How it looks
Alt text is an important element in the images which will be used for search engines to understand the images. Web browsers will display the alt text in case if the image is not supported.
Linking to a File
Another important use of link is to connect a text or image to a file uploaded in the web server. For example, below is the sample code used with HTML button tag to create a text link which will download a PDF file.
Code
<button>
<a href="https://img.webnots.com/2014/05/Submit-Site-to-Search-Engines.pdf"> Download Site Submission Guide for Search Engines</a>
</button>How it looks
Linking to an Email id
An email id can also be linked to a text or image to enable the user sending mail by clicking on the text or image. Following is the sample code for linking an email id to a text. Clicking on the anchor text will open the default email program on your computer with the hyperlink reference email id mentioned in the “To” address.
Code
<a href="mailto:[email protected]">Contact Us</a>How it looks
Default Colors of Hyperlinks
Hyperlinks by default are displayed in the following colors:
| Link | Color |
|---|---|
| Unvisited Link | Blue |
| Visited Link | Purple |
| Active Link | Red |
The page you are linking by default will open in the same window which can be modified to open in a new window using target attribute as shown below.
<a href="https://www.webnots.com" target="_blank">
A Knowledge Sharing Platform for Webmasters
</a>Note: All the properties of the links can be modified directly in the HTML content of any particular webpage. Alternatively, you can also edit external CSS file to reflect the changes in all the pages of your site.
