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:
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:
<a> tag is used to create a hyperlink.href attribute 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.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:
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!