Python JavaScript HTML CSS C Java C# / .NET C++ TypeScript Dart

HTML Image Link

Utilizing HTML images can enhance the organization of a webpage, making it more visually engaging and attractive. It is also possible to utilize HTML images as hyperlinks, enabling users to navigate to another page by clicking on the image.

In this tutorial, we will delve deeper into the concept of HTML image links. Understanding HTML images is crucial before diving into HTML image links, so let's explore HTML images initially.

HTML Images

In the past, HTML was primarily utilized for incorporating plain text onto web pages, resulting in a lackluster reading experience that failed to captivate users. To address this issue, developers introduced the <img> tag, enabling the inclusion of images on web pages to enhance visual appeal and engage visitors.

Syntax:

Example

<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="image_related_text">

We can witness in the above syntax that there is <img> tag and two attributes which are "src" and "alt" .

  • ✅ <img>: It is a self-closing tag, which does not require separate opening and closing tags.
  • ✅ "src": The "src" attribute adds the URL or path of your desired image.
  • ✅ "alt": The "alt" attribute is used to add some text related to the image, which can be the name of the image.

There are two ways to incorporate images into a webpage:

  1. The initial approach involves specifying a URL to retrieve the image from the internet.
  2. Alternatively, the second method entails specifying a file path relative to the current webpage's location.

    3. First Approach: Providing URL

Code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML image Example - First Approach</title>
</head>
<body>
    <h1>Welcome to our tutorial</h1>
    <p>It is the example of HTML &lt;img&gt; tag using first approach - providing URL of the image</p>
    <img src="https://placehold.co/400x300/34495e/ffffff?text=Logo" alt="C# Tutorial image">
</body>
</html>

Output:

We can witness the image on the web page.

Second Approach: Providing the Path of the Image

Code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>HTML image Example - Second Approach</title>
</head>
<body>
    <h1>Welcome to our tutorial</h1>
    <p>It is the example of HTML &lt;img&gt; tag using second approach - providing path of the image</p>
    <img src="https://placehold.co/400x300/34495e/ffffff?text=Logo" alt="C# Tutorial Logo">
</body>
</html>

Output:

We can witness the image on the web page.

Having grasped the concept of inserting images into a webpage, it is now essential to explore how these images can be utilized as hyperlinks.

It is easy to create an HTML image link . We have to use <a> tag to add the link in combination with the <img> tag. We have already understood the <img> tag . Let us now understand the <a> tag .

<a> Tag:

The <a> tag is utilized as an anchor in web development to create hyperlinks that enable users to navigate between different pages on a website.

Syntax of <a> tag:

Some Text about the link

We can see the following in the above syntax:

  • ✅ <a>: It is the opening tag of the anchor.
  • ✅ </a>: It is the closing tag of the anchor
  • ✅ href: It is the attribute that is used to create a hyperlink. The link could be to any web page on the same page, etc.

    • Example of <a> Tag:

Code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example of &lt;a&gt; tag</title>
</head>
<body>
    <h1>Welcome to our tutorial</h1>
    <p>It is the example of &lt;a&gt; element of HTML. </p>
    <a href="https://logic-practice.com/">Click on this link to open C# Tutorial Website</a>
</body>
</html>

Output:

Clicking on the hyperlink in the output will lead you to the Example website.

Let's explore the <a> tag in combination with the <img> tag to create an HTML hyperlink with an image.

Syntax for HTML image link:

Example

<a href = "link"><img src = "https://placehold.co/400x300/3498db/ffffff?text=Sample+Image" alt = "Some text about the image"></a>

The <img> element is enclosed within the <a> element, as illustrated in the syntax provided above.

Demonstration of Creating HTML Image Link

We will explore a few examples showcasing HTML image hyperlinks.

Demo 1:

In this tutorial, we will create an HTML hyperlink that includes an image.

Code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>The representation for forming the HTML image link</title>
</head>
<body>
    <h1>Welcome to our tutorial</h1>
    <p>
        It is an illustration of forming the HTML image link.
    </p>
    <a href="https://logic-practice.com/"><img src = "https://placehold.co/400x300/3498db/ffffff?text=Logo" alt = "C# Tutorial Logo Image"></a>
</body>
</html>

Output:

Upon tapping the image in the result displayed, the Example website will open.

Demo 2:

We will apply a specific style to enhance the visual appeal of the image we include on the webpage using the "style" attribute.

The style attribute is utilized to apply styling to HTML elements. In this example, we will demonstrate modifying the appearance of an image by adjusting properties such as width, height, and border.

Code:

Example

<!DOCTYPE html>
<html lang="en">
<head>
    <title>The illustration for forming the HTML image link by styling an HTML image</title>
</head>
<body>
    <h1>Welcome to our tutorial</h1>
    <p>
        It illustrates creating the HTML image link by styling an HTML image.
    </p>
    <a href="https://logic-practice.com/"><img src = "https://placehold.co/400x300/3498db/ffffff?text=Logo" alt = "C# Tutorial Logo" style = "width: 350px; height: 100px; border-radius: 15px; border: 1px solid rgb(70, 76, 71)"></a>
</body>
</html>

Output:

The styled image can be observed. By clicking on the image displayed in the result below, it will redirect to the Example website.

Browser Compatibility

Here are the browsers that support the <a> and <img> tags:

  • ✅ Opera
  • ✅ Google Chrome
  • ✅ Firefox
  • ✅ Safari
  • ✅ Internet Explorer

    • Conclusion

In this tutorial, we have explored the process of generating HTML image links. We have examined the utilization of the <a> and <img> elements for embedding an image within a hyperlink.

Input Required

This code uses input(). Please provide values below: