We’ll cover all that you need to know about HTML links in this beginner’s guide including the HTML link tag, the HTML hyperlink tag, how to add links and images, how to remove underlines, how to alter link color, and more.
Check out this insightful video on HTML Tutorial for Beginners.
Appendix
What is a hyperlink in HTML?
A hyperlink is an HTML element that allows you to build a link between two web pages or a webpage and a file. A link is a clickable feature on a web page that sends you to another web page or a specific section on the same website. Links are often highlighted and blue by default, but HTML characteristics allow you to customize their appearance and behavior. And just so you know, the HTML link tag is used to build a hyperlink.
Hyperlinks can also be used to establish a connection to a specific area on the same page, which is particularly handy for big sites with several sections. Understanding how hyperlinks function and how to successfully use them is critical for developing a user-friendly and interesting website.
Let’s explore how to add links to HTML and make websites more engaging and user-friendly.
How to add links in HTML
To insert a link in HTML, use the HTML link tag or the HTML hyperlink tag. The HTML link tag has the following basic syntax
<a href=”url”>link text</a>
The “href” element defines the URL of the page or resource to which you want to connect, and the link text is what the user sees.
For example, to link to the Intellipaat homepage, you would use the following code
<a href=”https://intellipaat.com“>Intellipaat</a>
Using the same anchor tag syntax and replacing the text with an image tag, you can also utilize images as links in HTML. This is an excellent method for making visually appealing buttons or icons that link to other pages. It is also possible to adjust the appearance of links using CSS to change their color, underline, and other attributes. In the following sections, we’ll go over these subjects in further depth and present some examples to get you started.
Examples of HTML Links
Exploring some examples is the easiest method to understand how to construct links in HTML. In this section, we’ll go over some basic and practical examples of the many types of connections you can make, such as text links, picture links, and email links. Let’s get started!
- Add an image with a link in HTML– You can also put a picture in a hyperlink. To achieve this, utilize the a> tag and insert an image> tag inside of it. the fundamental syntax is as follows
<a href=”url”>img src=”image-url”></a>
The “src” value indicates the URL of the picture to be displayed, and the “href” attribute specifies the URL of the page or resource to which the image should be linked.
To make a link to Intellipaat with a picture of the Intellipaat logo, for example, use the following code
<a href=”https://www.intellipaat.com”><img src=”https://intellipaat.com/course-image/2021/05/headed_logo.png”></a>
- Create an Email link in HTML– You can also construct a link that opens the user’s email client with the user’s email address pre-filled. You will use the “mailto:” prefix followed by the email address to do this. The fundamental syntax is as follows:
<a href=”mailto:[email protected]”>email me</a>
When a user clicks on the link, their email client opens with the email address already pre-filled in the “To” field. To make a link that opens the user’s email client with your email address pre-filled,
Get 100% Hike!
Master Most in Demand Skills Now!
For example, to create a link that opens the user’s email client with your email address pre-filled, you would use the following code
<a href=”mailto:[email protected]”>email me</a>
- Create a Button link in HTML– In HTML, you can also make a hyperlink that appears like a button. To do this, you’ll use the <button> tag instead of the <a> tag.
The basic syntax is as follows
<button onclick=”location.href=’url'”>link text</button>
Here, “onclick” attribute specifies the action to take when the button is clicked, and the “location. href” property specifies the URL of the page or resource you want to link to.
For example, to create a button that links to Google, you would use the following code:
<buttononclick=”location.href=’https://www.intellipaat.com/'”>intellipaat</button>
- Add a Video link in HTML– A hyperlink that points to a video file can also be made. You’ll utilize the <video> tag and <a> tag to do this.
The basic syntax is as follows
<a href=”video-url”><video src=”video-url”></video></a>
The “href” value indicates the URL of the page or resource you want to link to, and the “src” attribute specifies the URL of the video file. To generate a link to a video file with the URL “video.mp4”, for instance.
you would use the following code
<a href=”video.mp4″><video src=”video.mp4″></video></a>
How to Customize an HTML Links
Using HTML properties, you can change the look and behavior of your links. Several of the frequently mentioned characteristics include:
- Target– specifies where the linked page will open. For example, “_blank” will open the linked page in a new window or tab.
- Title– adds a tooltip to the link when you hover over it.
- Class– adds a CSS class to the link, which you can use to apply custom styles.
- Style– adds inline styles to the link.
For example, to open a link in a new window, you would add the target attribute like this
<a href=”https://www.google.com” target=”_blank”>Google</a>
Remove Underline from HTML Links
HTML links are by default underlined to show that they can be clicked. The underline can be eliminated with CSS, though. To remove the underline from a link, you can apply the following CSS rule
a {
text-decoration: none;
}
By doing this, all of the links on your page will lose their underlining. By including the color property, you can also apply the same rule to alter the color of your links.
Conclusion
HTML links are an important component of web development since they let consumers browse between your website’s pages and other online resources. You can link to other web pages, photos, videos, and documents using the HTML link or HTML hyperlink tags. With CSS and HTML attributes, you may also change the way your links look and behave. We definitely think this guide should have made it easier for you to add, edit, and use HTML links on your web pages.