Lesson 4 – HTML5 Anchors Or Hyperlinks

Hyperlinks are one of the most important features of HTML5. Hyperlinks or anchors links provide references to other sources such as HTML5 documents, videos, audios, and images available on the World Wide Web. The web browser tries to perform a certain action related to a hyperlink whenever a user clicks on it. The action may include opening an email client or navigating to another webpage or URL.

You can actually convert virtually any element on your HTML5 document into a hyperlink. It is also very easy for users to distinguish hyperlinks from other types of text because most browsers color hyperlinks as blue and underline them as well.

We use an anchor element (a) to create a hyperlink assigning the URL of the target page or content to “href” or hypertext reference attribute. Anything within the opening <a> and closing </a> tags will act as a hyperlink.

We create hyperlinks for the popular social media sides in the following code snippet.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hyperlinks</title>
</head>
<body>
    <h1>Hyperlinks To Popular Social Media Sites</h1>
    <p>Click on the links to visit these sites</p>

    <p><a href="https:www.facebook.com">Facebook</a></p>
    <p><a href="https:www.instagram.com">Instagram</a></p>
    <p><a href="https:www.twitter.com">Twitter</a></p>
    <p><a href="https:www.LinkedIn.com">LinkedIn</a></p>
</body>
</html>

The links will appear as under in the browser.

Now let us convert an image tag or simply an image into a hyperlink. More about images in the next section.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hyperlinks</title>
</head>
<body>
    <h1>Using Image As A Hyperlink</h1>
    <p>Click on the image to visit Drona School's Home Page</p>

    <a href="https://dronaschool.com/"><img src="html5.png" alt="HTML5 Symbo" width="300" height="300"></a>
</body>
</html>

Now, the browser will convert the HTML5 Symbol or the image into a hyperlink.

The moment a visitor clicks on the image, the browser will take it to the home page of Drona School’s website.

We can also use anchors to link to an email address. In this case, we will assign mailto:example@email.com to the hypertext reference (href). The following code snippet demonstrates this kind of anchor.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hyperlinks</title>
</head>
<body>
    <p>if you want to <a href="example@example.com">contact Mr. Z</a> , click on the link and your default email client will open an email address and message to you</p>
</body>
</html>

The default email client will now open the email address and message.

In the next chapter, we will see how to add images in the HTML5 Document.