HTML Links allows us to connect multiple pages on a website. HTML Links are used to navigating other pages or other website pages as well.
Here You will learn all about the HTML Links!
Table of Contents
- What is a Link?
- Benefits of Link:
- Types of Link in HTML:
- HTML Link Attributes
- Absolute vs Relative url
- Changing Link Color In HTML
- Button As a Link
- Image As a Link
- Link to An Email Address
- Download Link in HTML
- You Might Like This:
- Our Courses:
What is a Link?
HTML Links are hyperlinks. Link is a connection between two web pages. The link where it is placed is known as “source” and where it will navigate is known as “destination”.
The HTML Anchor ( <a> ) tag defines a link. Syntex below:
<a href="loationOfDestination">Link Text</a>
Benefits of Link:
- It improves the indexing of website.
- It reduces the bounce rate.
- It guides trafic to older posts.
- It saves the time of searching.
Types of Link in HTML:
These three types of links are in HTML. HTML allows us to connect another website, other pages, or navigation on the same pages.
Link to Other Website
HTML link allows us to connect another website to our website through a link. This is helpful when we want to give credit to others or want to show related details on other sites.
When we want to show our social media accounts on our website, these types of links are used.
<body> <h3>Link to Google</h3> <a href="https://www.google.com">Google Link!</a> </body>
Here in this example, you can create a visit to google link on your website.
Link to Pages of Same Website
The navigation bar/menu is the best example of a link to other pages on the same website. We can use these links to connect other pages of our website or images, videos, mp3, or other files.
<body> <h3>Link to Google</h3> <a href="/blog">Link to blogs</a> </body>
Link to Section of a Page
This type of link is used to navigate on the same page, When a file is too large to read, it shows the specific links to visit a part of the page. as you can we have also created this type of link at the top as “TOC” (Table of content) this navigates us to every heading of this page. For creating this type of link we need to create a source link and another destination link.
To create a destination link, create an anchor tag then write an attribute name and its value like this.
<a name="GoToTop" >
or you can use an id attribute to create the destination link.
<div id="GoToTop"> </div>
To create a source link, create an anchor tag then write a href attribute and its value to the name or id with a # hash sign.
<a href="#GoToTop" >Go to Top!</a>
HTML Link Attributes
Html has many types of attributes, Let’s discuss them!
The href Attribute
The href attribute is used to write the link of a destination page or any document. Without a href attribute, the link will not work. You can use href=”#top” or href=”#” to link to the top of the current page!
The Target Attribute
The target attribute specifies where to open the link. The target attribute has five values we can use one of them at a time.
The Target Attribute Values:
|_blank||It will open the page in a new tab.|
|_top||Opens the page in the full body of the window.|
|_self||Opens the link in the same frame.|
|_parent||Opens the link in the parent window.|
|frameName||Opens the link in an iframe.|
Absolute vs Relative url
When we use a URL with “https://www” is known as an Absolute URL. Absolute URL is used to connect other websites.
<a href="https://www.google.com">Google Link!</a>
A relative URL is used to connect images from the same website database. It starts with a “/” or a file name.
<a href="/blog">Blog Page</a>
Changing Link Color In HTML
HTML link color can be defined in three stages. Defined below!
A link when it is not pressed. the color of the link will be blue and it will be underlined by default.
When the user presses the link it changes its color to red.
When a user visits the link it changes its color to purple.
Button As a Link
We can create a button using the <button > element and pass the onclick attribute value to the window.location.href = “Address of page”. It will redirect to that link when the user clicks the button.
<button onclick="window.location.href = 'https://www.google.com';" > Visit Google! </button>
Image As a Link
We can use an Image as a link in HTML, create an anchor tag and write the destination in href attribute, In between opening <a> and closing </a> tag write the img tag and add an image. It will work like a link.
<a href="https://www.google.com"> <img src= "https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg" alt="Google Logo icn" /> </a>
Link to An Email Address
To create an email link create a basic structure of anchor tag, Create anchor tag, then write href attribute and set its value to mailto: and the email address. As shown below.
<a href = "mailto: [email protected]">Send Email</a>
Download Link in HTML
Download shows the file to be downloaded. You can use a download attribute to specify the file to be downloaded when the user clicks on it.
<a href="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg" download> <img src="https://pbs.twimg.com/profile_images/1455185376876826625/s1AjSxph_400x400.jpg" alt="W3Schools"> </a>
Hope you learned the HTML Links, Here we have provided an online editor you can practice on it. Click Here!
Thank you for reading this article!