Updated July 3, 2023
Introduction to HTML text link
An HTML link can be a link or a hyperlink. This redirects to another page, image, or website; it can be anything. They are also used to navigate on the same page for a particular section. They used to render data and documents just by clicking them. We wrap our document, images, url, or data inside text. Depending upon the requirement, it can also point to a file, object, or anything on the same page or a different page. When we hover the mouse over the HTML link, it changes the cursor to an other icon. We can discuss how they work and how to create them in the next section of our article. In this topic, we are going to learn about HTML Text links.
Syntax for HTML Link
We can create our first HTML Link from the following syntax below. We will use a different tag, attributes, and corresponding properties in the given syntax below.
<a href="your url">Link your corresponding text here</a>In the above syntax, we use the anchor tag to create an html link or a hyperlink. We will discuss this anchor tag in detail.
The anchor tag is a tag through which we can attach or link our text, phrase, or word to create an external or internal link. By using an anchor tag; we make a URL into our pages that can be used to navigate to any other page, website or within the same section on the page.
Using the anchor tag, we have many advantages mentioned below.
- Organize: It helps to organize our data. We do not need to make several web pages or split our data into chunks for managing purposes; we can easily organize our data in one place only.
- No Scrolling: By using the html link or html internal links, we do not need to worry about scrolling on really long pages; we can click on that link to find the desired section page. So it makes it easy to find any data or section on the page.
How to Create an Anchor Tag?
As you can see in the above syntax, we have used so many things over there now; we will have a closer look at how to create and how it works.
It consists of three different parts (attribute):
- href attribute
- target attribute
- name attribute
1. href attribute
Href attribute stands for hypertext reference. Suppose we want to create a hyperlink, so the first requirement is a document address that can be anything like another website, a file such as PDF, etc.
So, for example :
<a href="http://www.google.com">Google</a>In this, http://www.google.com is the value we assign to our href attribute. So whenever we click on Google, it will redirect us to the google home page link. Hence href attribute contains the document address. We can also mention our own HTML link to href.
For example
<a href="demo.html">My page</a>2. target attribute
The target attribute defines how the document will open. It has many types, and we can use them according to our needs.
- _parent: It just opens the attached document into the parent frame.
- _blank: It opens the document into a new tab or window.
- _top: It opens the attached document in the full window.
- _self: It opens the document into the same window or the same tab in which it is clicked. The default, this target is enabled. We can modify it like the below :
<a href="http://www.demo.com" target="_blank" rel="noopener">Your Link text</a>Here target=”_blank” is the syntax for using it.
3. name attribute
The name attribute is used to jump or navigate to some point on the page; this can be useful when we have a significant VRU page with so much content. This helps to save user findings and time without scrolling. Syntax below:
<a name="to end"></a> orIn this, we click to go to the end of the page without scrolling down.
<a href="#SomeSection">Section</a>This browser will identify the section, but we must use (#) with the name attribute.
<a href="otherpage.html#title">Link your text</a>By this, we can internally refer to the “title “of some other page. Here also, (#) must be used at the end of the page’s address.
HTML Link Colors
We can also provide colors to our html link. By default, they have three states for link color; this will appear in all browsers.
- Active link: When we click on any link, it becomes an active link with an underlined and red color.
- Unvisited links: Standard browser default colors for the unvisited links are blue and underlined.
- Visited links: These are purple and underlined.
But we can also provide our custom colors to link using the below syntax. We can follow this different type to give color to our link. But we are using inline CSS here; you can also create external CSS if you want.
- Directly provide the name of the color.
- By using the HEX color code.
- By using rgb() and rgba() values.
- By using hsl and hsla() values.
<a href="http://demo.com/" style="color:blue;">Red Link</a>We can directly specify the color name in the style attribute. This is an inline CSS.
<a href="http://demo.com/" style="color:#FF0000;">Red color code</a>Here we are specifying the color by using color codes. (HEX color codes)
<a href="http://demo.com/" style="color:rgb(255,0,0);">Red color</a>We can also use RGB() values to specify the color of our links. We can control the opacity of the color by using rgb().
<a href="http://demo.com/" style="color:rgba(255,0,0,0.4);">Red color</a>You can replace rbg() with rgba() but specify the fourth value for transparency and opacity.
<a href="http://demo.com/" style="color:hsl(0,10%,50%);">Red color</a>We can also use HSL t color our link. HSL stands for hue, saturation, and lightness. We can also use HSLA for specifying color, but we need to provide one more parameter in hsla().
Conclusion – HTML Text Link
So in Sort, we use the anchor tag and its attributes to create the hyperlink or link in HTML. HREF contains the document’s address and the target responsible for handling the document. We can also color our link using inline or external CSS.
Recommended Articles
We hope that this EDUCBA information on “HTML Text Link” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
