HTML #12 - HTML Links ( Hyperlinks ) and it's attributes | External Linking and Title Attribute

Hello friend's, welcome to the another tutorial of Programming Infinity. In this tutorial, we will know about HTML Links, also known as hyperlinks, and it's required attributes. We will also kNow about types of linking ( here, we will only kNow about the external Linking ) and title attribute. So friend's, let's begin.....

P.I. Highlighted :- Above is the video of the whole tutorial in hindi.

Linking in HTML

Linking means, to link different web pages, or to link different parts in the same web page in HTML. It helps user to navigate easily through the web page and website.

Types of linking

1. Internal Linking :- It is used to link different parts of the same webpage. The back to top button of almost all the websites, works on internal Linking, as, it links any part of the page to the top of the page. For seeing the live example of it, click here.....
2. External Linking :- It is used to link different web pages. It takes the URL of the webpage as it's input, where we want to go, when the link is clicked. By default, when we click on an external link, it will be opened in the same tab or window i.e. the web page on which link is clicked will be overridden by the new webpage, whose URL is specified.

HTML Links

Links are used for linking of different web pages or different parts of the same web page in HTML. It is called hyperlinks in HTML. Hyperlinks is a reference to a web page or part of the web page, accessed by clicking on the link.

Basic Structure

<a href="URL/Reference"> CONTENT </a>

In HTML, <a> tag is used to add a link to the web page. It is a container element, because it contains some content within it, and has starting and ending tag.
We had added link using the <a> tag, but, it will not act as an link, if the URL or any reference is not added , because, it defines the path, where we will go, after clicking on the link.

href attribute 

The href attribute is used to specify the path (URL of the web page ) or reference ( id or name of the element, where we want to go ), to which we want to go after click. It takes URL or any reference to any element as it's value.

Visible part ( Link )

The only visible part is the content, which will act as an hyperlink. The content is not required to be only text, it can be any HTML Element.

<a href="https://www.google.com/"><img src="logo.png" /></a>

In the above code, image is used as hyperlink, which will open Google home page, when clicked.

Default Properties

There are some default properties, which is same for a link in all the browsers. These properties are only applied to a link, when some text is used as the content of the <a> tag. We will know about the properties related to text of the link here.....

1. Unvisited / New Link :- The text of the link will be underlined and text color is blue.
2. Visited Link :-  The text of the link will be underlined and text color is purple.
3. Active link :- The text of the link will be underlined and text color is red. This happens, when we hover over the link, or click on an internal link in the web page. It is the property of the active link.

These properties can be customized with the help of CSS. We will know about this in the upcoming tutorials.

URL Scheme

Here, forward slash or slash = "/".

We use URL with External Linking, so that it will go to the specified URL on click. For using URL, it is recommended to add a forward slash to the end of the URL.

It is because, without the forward slash, two requests are made to the server, one is without slash, and then server add forward slash to the end of it, and made another request to itself. This takes some more time than the single request. So, it is recommended to use forward slash at the end of the URL in external linking.

Without Slash

<a href="https://www.google.com">Google</a>

Recommended ( with forward slash / )

<a href="https://www.google.com/">Google</a>

Title Attribute

Title attribute is used to specify the title for any HTML Element i.e. it gives a brief introduction to any HTML Element. This Introduction will be seen, when we hover over the link, as a tooltip text.

<a title="Programming Infinity" href="https://www.programminginfinity.blogspot.com/">Programming Infinity</a>

In the above code, title attribute has value Programming Infinity, which describes the link as the Programming Infinity's URL.

So friend's, that's all for this tutorial. Hope u enjoyed it.

Thanks

Programming Infinity ( Samridh Sharma )