HTML links or hyperlinks are words, phrases, or images in online content that, on clicking, take the site visitor to another web page with related content. Links are an integral part of the world wide web.

Links connect pages both within a website and to other websites. They enable site visitor’s to collect relevant information in less time by clicking their way from one page to another on any server across the world.

There are two ends of a link: anchor and direction. The link will start at the ‘source’ anchor and point to the ‘destination’ anchor. The destination anchor may be an HTML document, image, video, or a section within an HTML document.

Also explore related HTML topics:

Difference Between HTML and CSS

In this article, we will discuss what is html, what is CSS and the difference between them with the help of example. Later in the article we will also discuss...read more

Read Later

How to add background image in HTML?

Images can make a page look more appealing and captivating. One of such ways for making the page more attractive is adding background image to it. You can add backgrond...read more

Read Later

Concept of HTML Colors

HTML Colors play a pivotal role in creating the visual identity of a webpage, influencing its aesthetics, readability, user experience, and even its brand messaging. HTML colors are a way...read more

Read Later

HTML Link Syntax

In HTML, we specify a link using the <a> tag.

Syntax:

<a href="url">Link text</a>
Copy code

Explanation:

<a></a>: This is the anchor tag that creates a hyperlink. Anything between this tag becomes part of the link. The user can click that part to reach the linked document.
href: Specifies the destination address of the link used.
Text link: The visible part of the link.

Example:

<!DOCTYPE html>
<html>
   <head>
      <title>Example of HTML Link</title>
   </head>    
   <body>
      <p>Click on the below link</p>
      <a href = "https://www.naukri.com/learning">Shiksha Online</a>
   </body>
</html>
Copy code

Output:

Must read: How to add background image in HTML?

target Attribute

The target attribute helps us define the location where the linked document will open. Some of the target locations include:

Target	Description
_self	The link opens in the same frame. It is the default value, so you need not specify this value.
_blank	The link opens in a new window.
_parent	The linked document opens in the parent frameset.
_top	It will open the link in the full body of the window.
framename	It opens the linked document in the named frame.

Syntax:

Example:

<a href="URL"_blank|_self|_parent|_top|framename">Link Text</a>
Copy code

<!DOCTYPE html>
<html>
   <head>
      <title>Target Attribute Example</title>
   </head>    
   <body>
      <p>Click any of the following links</p>
     <a href = " https://www.shiksha.com/online-courses/" target = "_self">Link will open in Self</a> |
     <a href = " https://www.shiksha.com/online-courses/" target = "_blank">Link will open in New</a> |
     <a href = " https://www.shiksha.com/online-courses/" target = "_parent"> Link will open in Parent</a> |
      <a href = " https://www.shiksha.com/online-courses/" target = "_top"> Link will open in Body of the window</a>
   </body>
</html>
Copy code

Output:

Must read: HTML Formatting: HTML Tags for Text Formatting (With Examples)

HTML Link Colors

By default, in most browsers, links appear in the following colors:

Unvisited link: blue and underlined.
Visited link: purple and underlined.
Hover link: when the user hovers mouses over it.
Active link (the moment a link is clicked): red and underlined.

We can change the color of the links using the CSS property.

Syntax to change Link text color with CSS styling:

<a href="https://www.shiksha.com/online-courses/" style="color:red">Shiksha Online</a>
Copy code

Output:

Syntax to change Link background color with CSS styling:

<a href=" https://www.shiksha.com/online-courses/" style="background-color:yellow">Shiksha Online</a>
Copy code

Output:

Below is an example of how we can change the default colors of HTML links on a webpage.

Example:

<!DOCTYPE html>
<html>
<head>
<style>
a:link {
    color: green;
    background-color: transparent;
}
a:visited {
    color: pink;
    background-color: transparent;
}
a:hover {
    color: red;
    background-color: transparent;
}
a:active {
    color: yellow;
    background-color: transparent;
}
</style>
</head>
<body>
<p>Changing HTML Link Colors</p>
<a href="https://www.shiksha.com/online-courses/" target="_blank">Shiksha Online</a> 
</body>
</html>
Copy code

Output:

Also Explore:

How to Create HTML Forms – Tutorial with Examples

HTML forms or web forms are a powerful medium for interacting with users. They have interactive controls for submitting information. Web forms enable us to collect data or personal information...read more

Read Later

Creating HTML Tables (Tutorial With Examples)

This guide offers an introduction to HTML tables. You will learn how to create tables in HTML to present tabular data. Tables are a great way to present data visually....read more

Read Later

Top Features of HTML5 With Examples

HTML5 is the latest version of Hypertext Markup Language, used for structuring content on the web. It introduces new elements, multimedia support, and improved semantics, making it essential for modern...read more

How to Create a Bookmark Link in HTML?

Bookmark links in HTML enable users to go to a specific section on a web page. Bookmarks are beneficial for long pages where users can directly jump to the relevant section rather than going through the entire page.

In HTML, you will first need to create a bookmark and add a link to it. On clicking on that link, the user will go to that specific location.

Here is how to create a bookmark link in HTML:

Add the id attribute to the HTML element where you want the site visitor to go.
Use the # symbol followed by the id attribute value as the href attribute value in the <a> tag.

Example:

<a href="html_courses.html#courses">Popular HTML Courses</a>
Copy code

Steps Explained:

1. Create a bookmark using the id attribute:

<h2 id="courses">Popular HTML Courses</h2>
Copy code

2. Now, we will need to add a link to the bookmark – “Popular HTML Courses ” from the same page:

<a href="#courses">Jump to Popular HTML Courses</a>
Copy code

HTML Code to Create a Bookmark:

<!DOCTYPE html>
<html>
   <head>
      <title>Bookmark Link in HTML</title>
   </head>
   <body>
      <h1>Programming Courses</h1>
      <p>
         <a href="#courses">Learn Programming</a>
      </p>
      <h2>Java</h2>
      <p>Explore the top Java Courses</p>
      <h2>Python</h2>
      <p>Explore the top Python Courses</p>
      <h2>JavaScript</h2>
      <p>Explore the top JavaScript Courses </p>
      <h2>C++</h2>
      <p>Explore the top C++ Courses</p>
      <h2>HTML</h2>
      <p>Explore the top HTML Courses</p>
      <h2>PHP</h2>
      <p>Explore the top PHP Courses</p>
      <h2>
         <a name="courses">Learn Programming</a>
      </h2>
   </body>
</html>
Copy code

Output:

Conclusion

In today’s digital world, links and hyperlinks play an essential role in creating your online presence and managing your online reputation. We hope this article on Links in HTML will help you add links to your web pages that can take your site visitors to another web page with related content.

FAQs

What are the different types of links in HTML?

The different types of links in HTML include: 1. Local - Links to a page on the same directory or server 2. Internal - Link to a section on the current page 3. External - The link leads to a page outside the site of the current page 4. Download - Allows users to download a file

Explain the difference between active links and normal links in HTML?

In HTML, normal links are those on which the user has not clicked yet. Active links are those that are currently being clicked by the user. The default color of normal links is blue and that of active links is red. You can change the colors using CSS styling.

What is an href in an HTML link?

href stands for Hypertext REFerence. Now let us understand href meaning. href is an attribute of the tag that specifies the destination of the hyperlink or link. Using the href attribute, we can link anchor text to another web page or a different section of the same page.

Can I style links differently from regular text?

Yes, you can style links using CSS to change their appearance, such as color, underline, and hover effects.

About the Author

Shiksha Online

This is a collection of insightful articles from domain experts in the fields of Cloud Computing, DevOps, AWS, Data Science, Machine Learning, AI, and Natural Language Processing. The range of topics caters to upski... Read Full Bio

Creating HTML Links – Tutorial With Examples

Table of Contents

Best-suited HTML & CSS courses for you

HTML, Javascript training

Learn HTML5, CSS3 & Bootstrap to Build Responsive Website

Learn Intro to HTML

Online Certificate in HTML5 / Internet Web Technologies

Certificate in HTML5 and CSS3

Web Designing (HTML5, CSS3, JS, Bootstrap)

Advanced CSS and Sass: Flexbox, Grid, Animations and More

Front End Development - HTML

Learn the basics of HTML, CSS, JavaScript and React

CSS Tutorial

What are HTML Links?

HTML Link Syntax

target Attribute

HTML Link Colors

Also Explore:

How to Create a Bookmark Link in HTML?

Conclusion

FAQs

Top Picks & New Arrivals