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.
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 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>
The target attribute defines how the document will open. It has many types, and we can use them according to our needs.
<a href="http://www.demo.com" target="_blank" rel="noopener">Your Link text</a>
Here target=”_blank” is the syntax for using it.
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> or
In 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.
We can also provide colors to our html link. By default, they have three states for link color; this will appear in all browsers.
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.
<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().
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.
The above is the detailed content of HTML Text Link. For more information, please follow other related articles on the PHP Chinese website!