Links in HTML | Create, Example
In HTML, a link, also known as a hyperlink, is a reference (or an address) to a resource on the web. It can point to any resource on the web, such as web pages, images, videos, files, documents, or other types of content accessible through the internet.
In the late 1960s, a computer scientist named Ted Nelson first introduced the concept of linking documents, called hypertext links. They are embedded into a web document using HTML.
Hyperlinks play an important role on the web because they connect different web pages, websites, documents, and other resources available on the internet.
Links allow the users to navigate from one page to another or to a specific section within a page by clicking. They also allow users to navigate to external webpage or any multimedia content, such as an image, audio, video, animation, etc. HTML provides several types of hyperlinks, each serving a specific purpose.
How to Create a Hyperlink or Link in HTML?
There are two important things that require creating a link in HTML.
- File name or url to which you want to link.
- Text that will serve as a clickable hyperlink.
The basic syntax to create a link in HMTL is as:
<a href = "filename or url">Text to be displayed</a>
Only the text included within the link tag is actually visible on the web page. When the readers click on the link, the browser loads the URL associated with the link. Look at the below figure that shows the parts of a typical link using the <a> tag, including the href, the text of the link, and the closing tag.
In the above syntax,
(a) <a> tag:
The <a> tag is an anchor tag or element that is used to create a hyperlink in a webpage. It is an opening tag that is followed by an attribute href. The attributes of this tag are href, name, and target. The anchor tag also has a closing tag, </a> that specifies the end of the entire link.
(b) href:
The href (stands for hypertext reference) is an attribute which is mandatory in the anchor tag. This attribute takes a value as an address of supporting document or a valid url (Uniform Resource Locator) to which this link points. The href attribute can take as values both relative and absolute links.
[adinserter block=”5″]
We need to give the full address to link a web page on another website. Such a type of link is called an absolute link. It specifies both the protocol name i.e. https and host name i.e. www.scientecheasy.com. For example:
<a href = "https://www.scientecheasy.com">Scientech Easy</a>
Relative link is a type of link that is used to link a web page from the same site.
(c) link text:
This is the visible part of the link between the opening and closing anchor tags that users will click on. It can be plain text or include other HTML elements, like images.
Let’s take a simple example in which we will see how a browser displays a link.
Example 1:
<!DOCTYPE html>
<html>
<head>
<title>HTML Hyperlink Example</title>
</head>
<body>
<p><strong>List of some links of popular websites:</strong></p>
<a href = "https://www.google.com">Google</a>
<br>
<a href = "https://www.scientecheasy.com">Scientech Easy</a>
<br>
<a href = "https://www.facebook.com">Facebook</a>
</body>
</html>
Output:
Most web browsers use blue as the default color for unvisited hyperlinks and change the color to purple for visited hyperlinks. This color coding provides a visual cue to users, helping them distinguish between links they have already followed and those they have not, thereby, enhancing the browsing experience. However, we can override these default colors using CSS (Cascading Style Sheets) to match the design and color scheme of their websites.
Title Attribute in Anchor <a> tag
In anchor tag <a>, the title attribute is used to specify the title of document or a page that we want to link. The basic syntax to create a link with the title attribute in HTML is as:
<a href = "filename or url" title = "value">Text to be displayed</a>
[adinserter block=”2″]
In the above syntax, the value of the title attribute may be any string enclosed in double quotes.
Example 2:
<!DOCTYPE html>
<html>
<head>
<title>HTML Title Attribute Example</title>
</head>
<body>
<p><strong>HTML code to demonstrate title attribute:</strong></p>
<a href = "https://www.scientecheasy.com" title = "Scientech Easy">Click here</a>
</body>
</html>
Output:
Target Attribute in Anchor <a> Tag
The target attribute in the anchor tag is used to open a web page. For example, the value “_blank” opens the web page in a new browser window. The value “_top” opens the linked web page in the current active browser window. The general syntax to open the linked web page in a new browser window is as:
<a href = "https://www.google.com" target = "_blank">Search Engine</a>
The basic syntax to open the linked webpage in the same browser window as the existing window is as:
<a href = "https://www.scientecheasy.com" target = "_top">Best Online Portal</a>
The above code will open the web page of scientecheasy on the clicking the hyperlink “Best Online Portal” in the same browser window as the current one. It will not open a new window to load the web page of scientecheasy.
Rel Attribute in HTML
The anchor <a> tag in HTML supports an additional attribute called rel, which stands for “relationship.” The rel attribute is used to specify the relationship between the current document and the linked document.
This attribute provides additional information to web browsers and search engines about the nature of the link. There’s a set of specific values that we can use with this attribute. Some commonly used values of the rel attribute include:
(a) nofollow:
The nofollow attribute is a value that can be included in the rel attribute of an <a> (anchor) tag in HTML. It instructs the search engines not to follow the link for ranking purposes. The basic syntax to include rel=”nofollow” into a hyperlink is as:
<a href = "http://www.example.com" rel="nofollow">Click Here</a>
The nofollow attribute is particularly useful in several scenarios:
- Websites that allow users to post content in the forums, comments, or social media platforms often use nofollow to prevent spam links from influencing search engine rankings. It helps to deter spammers from posting irrelevant links to improve the ranking of the site in the search engine.
- If a site links to another page but does not want to imply any endorsement or pass along ranking credit, nofollow is used.
(b) noopener:
The noopener attribute is a value that can be included in the rel attribute. This attribute helps to enhance the security by preventing the newly opened page from accessing the window.opener property of the original page that initiated the link. The noopener attribute is generally used with target=”_blank” attribute. Here’s an example of how we might use it:
<a href="https://mysite.com" target="_blank" rel="noopener">Visit Mysite</a>
In this example, target=”_blank” instructs the browser to open the link in a new tab or window, and rel=”noopener” ensures that the new page cannot access the window.opener property of the original page, enhancing security.
(c) noreferrer:
The noreferrer attribute is another value that can be included in the rel attribute of an anchor <a> tag. Similar to noopener, it has a specific purpose related to security and privacy.
When we use rel=”noreferrer”, it instructs the browser not to send the HTTP referrer header to the new page when the link is clicked. It also prevents the newly opened page from having access to the window.opener property, just like noopener does. Here’s an example of how to use it:
<a href = "https://mysite.com" target="_blank" rel="noreferrer">Visit Mysite</a>
In this example, target=”_blank” opens the link in a new tab, and rel=”noreferrer” ensures that the new tab does not receive referrer information and cannot access the window.opener property, enhancing both privacy and security.
Look at the below example of using the rel attribute in an <a> tag:
<a href = "https://www.mysite.com" rel="nofollow noopener noreferrer">Visit Mysite</a>
How to Create Text Links in HTML?
Text links are the most common type of links on the web. We can create them using the anchor <a> element in HTML. By wrapping text within an <a> tag and specifying a destination URL in the href attribute, we create a clickable text link in HTML.
When users click on this kind of linked text, they are directed to the specified URL or web address. The basic syntax to create a text link in HTML is as:
<a href = "https://www.mysite.com">Visit Mysite.com</a>
Clickable text links are versatile in nature. They are used for various purposes, such as:
- Linking to other web pages within the same website.
- Linking to external websites.
- Linking to specific sections within a page (using anchor links).
- Initiating downloads of files.
- Linking to email addresses using mailto: in the href attribute.
- Linking to phone numbers using tel: in the href attribute.
How to Create Image Links in HTML?
Sometimes, we may need an image to act as a hyperlink. We can do it by simply wrapping an <img> tag within anchor <a> and </a> tags. This is useful when we want to create an image-based navigation or linking. The basic format to create an image link in HTML is as follows:
<a href="https://www.mysite.com"> <img src="image.jpg" alt="Mysite Image"> </a>
In this example, the src attribute specifies the path to the image file, and the alt attribute provides alternative text for the image, which improves accessibility. This alternative text will display when the image is not loaded.
Image links are visually engaging and enhance the user experience on a website. They are commonly used for various purposes, such as logos, banners or advertisements, thumbnail images, and graphical navigation elements.
How to Create Email Links in HTML?
To create email links in HTML, we use the mailto: scheme as a value of the href attribute within an anchor (<a>) tag. When clicked on this type of link, it opens the user’s default email client with the specified email address pre-filled in the “To:” field. Here is the basic syntax:
<a href = "mailto:contact@mysite.com">Send an Email</a>
Email links are a convenient way for allowing users to make email communication by a simple click. W commonly use it for the contact information on websites.
How to Create External Links in HTML?
In HTML, external links are used to point to resources located on other websites. By setting the target attribute of an anchor (<a>) tag to “_blank”, the linked page will open in a new tab or window, depending on the user’s browser settings. Here’s the basic syntax for creating an external link that opens the page in a new tab:
<a href = "https://www.externalsite.com" target="_blank">Visit External Site</a>
External links are generally useful when you want your website to remain opened in the current tab while the linked content appears in a separate tab or window.
For security and privacy reasons, it is also recommended to include the rel=”noopener noreferrer” attribute when using target=”_blank”. The complete and secure way to create an external link would look like this:
<a href = "https://www.externalsite.com" target="_blank" rel="noopener noreferrer">Visit External Site</a>
How to Create Internal Links in HTML?
Internal links in HTML are utilized for navigation within the same website. These links reference other pages or sections of the site using relative URLs. Here’s an example of how you might create an internal link to an “About Us” page located in the root directory of your site:
<a href="/about">About Us</a>
Internal links are necessary for site navigation and SEO benefits. They help users find related content, moving between different pages, or move between different sections of your website. Internal linking also helps search engines understand the structure of your website, index your pages more effectively, and recognize important pages.
Best Practice for Working with HTML links
When working with HTML links, there are certains best practices that you should follow to enchance usability, accessibility, and SEO of your website. They are as:
1. Use Descriptive Link Text
Using descriptive text for link anchors is a best practice in creating HTML links. Descriptive link text improves the user experience by providing clear context on where the link will take the user before they click on it. For example:
Not Recommended:
<a href = "https://www.mysite.com">Click here</a>
Recommended:
<a href = "https://www.mysite.com">Visit Mysite.com</a>
By avoiding generic phrases like “click here” or “more” and using meaningful descriptions, you can make your website more accessible and easier to navigate. This practice is also useful for better SEO because search engines use the anchor text of links to understand the content of the page, helping in accurately indexing and ranking web pages.
2. Make Links Accessible
You should use the title attribute to provide additional information about the link, which are easily navigable for keyboard users and visually distinguishable for those with visual impairments.
3. Keep URLs Relative for Internal Links
You should use relative URLs for internal links to make your site more portable and easier to maintain. This is useful when you move your site to a different domain without having to update every internal link.
4. Use Absolute URLs for External Links
When linking to external sites or web pages, use the full URL, including the http or https protocol. This prevents any confusion for the browser about where the link should go.
5. Avoid Broken Links
You should regularly check your site to find out broken links. Broken links lead to a poor user experience and can harm your site’s SEO.
6. Use Meaningful rel Attributes
The rel attribute specifies the relationship between the current document and the linked document. Use nofollow attribute for links that should not influence the ranking in the search engine’s index. You should use noopener for external links for security, and noreferrer for privacy and security.
7. Consider SEO Implications
Use links to improve your site’s SEO. Linking to reputable sites can enhance your site’s credibility. Do internal linking of your pages within a website that will boost your SEO ranking as well as easier for search engines to crawl and index your site.
By following these best practices, you can create a user-friendly, accessible, and SEO-friendly website that provides a good experience for all users.
In this tutorial, we have explained hyperlinks or links in HTML with the help of various examples. Hope that you will have understood the basic concepts of creating various types of links and have done the best practices.
Happy coding!!!
