HTML Image Links - HTML Tutorial

Image Links are clickable images that act as hyperlinks, just like text links. Instead of clicking on a piece of texxt, users can click on an image to navigate to another webpage or section within the same page.

HTML Image Links Syntax

Explanation of Syntax:

<a href="URL">: This tag creates a hyperlink. The href attribute specifies the destination URL.
<img src="image_source.jpg" alt="Description of the Image">: This tag embeds an image within the link. The src attribute points to the image source, and the alt attribute provides a description for accessibility.

<a href="URL">
  <img src="image_source.jpg" alt="Description of the Image">
</a>

HTML
​x
 
<a href="URL">  <img src="image_source.jpg" alt="Description of the Image"></a>

HTML Image Links Example Code

Explanation of Code:

The code begins with the <!DOCTYPE html> declaration, followed by the opening <html> tag, which contains the entire document.
The <head> section includes metadata about the document, such as character set and viewport settings for responsive design, as well as the title of the page.
The <body> section contains the visible content of the webpage:
- An <h1> tag introduces the page with a welcoming message.
- A <p> tag provides context for the image link.
- The <a> tag creates a hyperlink pointing to https://example.com.
- The <img> tag inside the anchor element embeds an image sourced from https://via.placeholder.com/200, with a defined alt text for accessibility, ensuring that users understand what the image represents.
When users click on the image, they are directed to the specified URL, effectively using the image as a link.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Links Example</title>
</head>
<body>
    <h1>Welcome to My Website</h1>
    <p>Click the image below to visit Example.com:</p>
    <a href="https://example.com">
        <img src="https://via.placeholder.com/200" alt="Placeholder Image" width="200" height="100">
    </a>
</body>
</html>

HTML
 
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Image Links Example</title></head><body>    <h1>Welcome to My Website</h1>    <p>Click the image below to visit Example.com:</p>    <a href="https://example.com">        <img src="https://via.placeholder.com/200" alt="Placeholder Image" width="200" height="100">    </a></body></html>

HTML Image Links Syntax

HTML Image Links Example Code

HTML Labs