In HTML, the <img> element is used to embed images on a web page.
Here's the basic syntax of the <img> element:
<img src="image-source" alt="alternative-text">
- src: The src attribute specifies the source URL (Uniform Resource Locator) of the image.
- alt: The alt attribute provides alternative text for the image. This text is displayed if the image cannot be loaded and is also used for accessibility purposes.
Here's an example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Image Example</title>
</head>
<body>
<h1>My Webpage</h1>
<img src="example.jpg" alt="An example image">
<p>This is a paragraph of text.</p>
</body>
</html>
In this example:
- The <img> element is used to display an image with the source file “example.jpg.”
- The alt attribute provides alternative text describing the content of the image.
Additional attributes that can be used with the element include:
- width: Specifies the width of the image in pixels or as a percentage.
- height: Specifies the height of the image in pixels or as a percentage.
- title: Adds a title or tooltip text that is displayed when the user hovers over the image.
- style: Allows you to apply inline CSS styles to the image.
<img src="example.jpg" alt="An example image" width="300" height="200" title="Click to enlarge" style="border: 1px solid #ddd;">
These attributes provide additional control over the presentation and behavior of the image on the web page.