In the previous lesson, we learned how to add images to your webpage, making it more visually engaging. Now, we're going to explore another crucial aspect of web design — hyperlinks. Hyperlinks allow you to link to other web pages, resources, or even specific sections within the same page, giving users a seamless browsing experience.
In this lesson, we'll cover the basics of embedding hyperlinks in your content using the <a> tag in HTML. By the end of this lesson, you'll be able to:
- Create a basic hyperlink.
- Open links in a new tab.
- Customize clickable text for your links.
Here’s a quick example to get you started:
HTML, XML1<!DOCTYPE html> 2<html lang="en"> 3<head> 4 <meta charset="UTF-8"> 5 <title>My Enhanced Webpage</title> 6</head> 7<body> 8 <h1>Welcome to My Enhanced Webpage</h1> 9 <p>Find more resources at <a href="https://codesignal.com/">CodeSignal</a></p> 10 11 <p>Here is a link that opens in a new tab:</p> 12 <p>Visit <a href="https://codesignal.com/" target="_blank">codesignal.com</a> for more!</p> 13</body> 14</html>
In the example above, the <a> tag is used to add hyperlinks.
Let's break down the code:
- The
<a>tag is used to create a hyperlink. - The
hrefattribute specifies the URL of the page the link goes to. And the text between the opening and closing<a>tags is the clickable text that users see. - The
target="_blank"attribute opens the link in a new tab. If you don't include this attribute, the link will open in the same tab.
Mastering hyperlinks is essential because they:
- Enhance navigation by allowing users to easily move between different sections of your site or to external resources.
- Improve user experience by making your webpages more interactive and connected.
- Provide additional information and references, enriching the content on your site.
By embedding hyperlinks, you'll create a more informative and user-friendly web experience. Let's dive into the practice section and start enhancing your site with links!