HTML Links, also known as hyperlinks, are defined by the <a> tag in HTML, which stands for “anchor.” These links are essential for navigating between web pages and directing users to different sites, documents, or sections within the same page.
The basic attributes of the <a> tag include href, title, and target, among others.
Basic Syntax of an HTML Link:
<a href="https://www.example.com">Visit Example</a>
Note: A hyperlink can be represented by an image or any other HTML element, not just text.
A Simple HTML Link Example
In this example, we contains a paragraph instructing users to click on the link labeled “GeeksforGeeks,” which directs to the website “https://www.geeksforgeeks.org”.
HTML
<!DOCTYPE html>
<html>
<head>
<title>HTML Links</title>
</head>
<body>
<p>Click on the following link</p>
<a href="https://www.geeksforgeeks.org">
GeeksforGeeks
</a>
</body>
</html>
Output:
By default, links will appear as follows in all browsers:
- An unvisited link is underlined and blue.
- A visited link is underlined and purple.
- An active link is underlined and red.
HTML Links – Target Attribute
The target attribute in the <a> tag specifies where to open the linked document. It controls whether the link opens in the same window, a new window, or a specific frame.
| Attribute | Description |
|---|
_blank | Opens the linked document in a new window or tab. |
_self | Opens the linked document in the same frame or window as the link. (Default behavior) |
_parent | Opens the linked document in the parent frame. |
_top | Opens the linked document in the full body of the window. |
framename | Opens the linked document in a specified frame. The frame’s name is specified in the attribute. |
Example: In this example we demonstrates the use of target attributes in links. Each link opens in a different context: _blank opens in a new window or tab, _self in the same frame, _parent in the parent frame, _top in the full window body, and framename in a specified frame.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Target Attribute Example</title>
</head>
<body>
<h3>
Various options available in the
Target Attribute
</h3>
<p>
If you set the target attribute to
"_blank", the link will open in a new
browser window or tab.
</p>
<a href="https://www.geeksforgeeks.org"
target="_blank">
GeeksforGeeks
</a>
<p>
If you set the target attribute to
"_self", the link will open in the
same window or tab.
</p>
<a href="https://www.geeksforgeeks.org"
target="_self">
GeeksforGeeks
</a>
<p>
If you set the target attribute to
"_top", the link will open in the full
body of the window.
</p>
<a href="https://www.geeksforgeeks.org"
target="_top">
GeeksforGeeks
</a>
<p>
If you set the target attribute to
"_parent", the link will open in the
parent frame.
</p>
<a href="https://www.geeksforgeeks.org"
target="_parent">
GeeksforGeeks
</a>
</body>
</html>
Output:
Linking Different HTML Elements
Below are examples of how to link different HTML elements with their respective code snippets
| Element to Interlink | Specific Code |
|---|
| Linking to an image | <a href="image.jpg"><img src="image.jpg" alt="Image"></a> |
| Link to an Email Address | <a href="mailto:[email protected]">Send Email</a> |
| Phone Number | <a href="tel:+1234567890">Call Now</a> |
| Button | <a href="https://www.example.com"> <button>Visit Example</button> </a> |
| Link to Download File | <a href="file.pdf" download>Download File</a> |
| Link Title | <a href="https://www.example.com" title="Visit Example">Link Text</a> |
Supported Browsers
Similar Reads
HTML Tutorial
HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It tells the web browser how to display text, links, images, and other forms of multimedia on a webpage. HTML sets up the basic structure of a website, and then CSS and JavaScript
10 min read
HTML Introduction
HTML stands for HyperText Markup Language. It is the standard language used to create and structure content on the web. It defines the structure of a webpage by using a series of elements, tags, and attributes to organize text, images, links, and other multimedia elements. HTML is a markup language,
7 min read
HTML Editors
An HTML Editor is a software application designed to help users create and modify HTML code. It often includes features like syntax highlighting, tag completion, and error detection, which facilitate the coding process. There are two main types of HTML editors: Text-Based Editors - Allow direct codi
5 min read
HTML Basics
HTML (HyperText Markup Language) is the standard markup language for creating and structuring web pages. It defines the structure of a webpage using elements and tags.HTML is responsible for displaying text, images, and other content.It serves as the foundation for building websites and web applicat
6 min read
HTML Comments
HTML comments are used to add notes or explanations in the HTML code that are not displayed by the browser. They are useful for documenting the code, making it easier to understand and maintain.To add a comment, use the syntax <!-- your comment here -->. [GFGTABS] HTML <!-- This is a commen
4 min read
HTML Elements
An HTML Element consists of a start tag, content, and an end tag, which together define the element's structure and functionality. Elements are the basic building blocks of a webpage and can represent different types of content, such as text, links, images, or headings. For example, the <p> el
5 min read
HTML Attributes
HTML Attributes are special words used within the opening tag of an HTML element. They provide additional information about HTML elements. HTML attributes are used to configure and adjust the element's behavior, appearance, or functionality in a variety of ways. Each attribute has a name and a value
9 min read
HTML Headings
HTML headings are used to define the titles and subtitles of sections on a webpage. They help organize the content and create a structure that is easy to navigate. Proper use of headings enhances readability by organizing content into clear sections.Search engines utilize headings to understand page
4 min read
HTML Paragraphs
A paragraph in HTML is simply a block of text enclosed within the <p> tag. The <p> tag helps divide content into manageable, readable sections. It’s the go-to element for wrapping text in a web page that is meant to be displayed as a distinct paragraph. Syntax: <p> Content</p
5 min read
HTML Text Formatting
HTML text formatting refers to the use of specific HTML tags to modify the appearance and structure of text on a webpage. It allows you to style text in different ways, such as making it bold, italic, underlined, highlighted, or struck-through. Table of Content Categories of HTML Text FormattingLogi
4 min read