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. Thehrefattribute specifies the destination URL.<img src="image_source.jpg" alt="Description of the Image">: This tag embeds an image within the link. Thesrcattribute points to the image source, and thealtattribute provides a description for accessibility.
<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 tohttps://example.com. - The
<img>tag inside the anchor element embeds an image sourced fromhttps://via.placeholder.com/200, with a definedalttext for accessibility, ensuring that users understand what the image represents.
- An
- 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>