Images in HTML Language
Images are an essential component of web development. They can convey information, enhance the aesthetics of a webpage, and engage users. In
Images in HTML Language
The ‘img’ Element:
To display an image on a webpage, we use the ‘img’ (short for image) element. The ‘img’ element is an empty, self-closing tag, meaning it doesn’t have a closing tag. It has several attributes, with ‘src’ (source) being the most crucial one, as it specifies the path to the image file.
Example 1: Adding a basic image to a webpage
<!DOCTYPE html>
<html>
<head>
<title>Image Example</title>
</head>
<body>
<img src="image.jpg" alt="A beautiful sunset">
</body>
</html>In this example, we’ve added an image with the source attribute (‘src’) set to “image.jpg.” The ‘alt’ attribute provides alternative text for the image, which is essential for accessibility and SEO.
Image File Types:
HTML supports various image file formats, such as JPEG, PNG, GIF, and SVG. The choice of format depends on the type of image and its purpose. JPEG is ideal for photographs, PNG for images with transparency, GIF for simple animations, and SVG for vector graphics.
Example 2: Using different image formats
<img src="photo.jpg" alt="A beautiful photograph"> <!-- JPEG -->
<img src="logo.png" alt="Company logo"> <!-- PNG -->
<img src="animation.gif" alt="Simple animation"> <!-- GIF -->
<img src="vector.svg" alt="Vector graphic"> <!-- SVG -->Image Dimensions:
You can control the dimensions of an image using the ‘width’ and ‘height’ attributes. These attributes define the image’s width and height in pixels. Be careful when specifying dimensions to maintain the image’s aspect ratio for a visually pleasing result.
Example 3: Setting image dimensions
<img src="product.jpg" alt="Product" width="300" height="200">Image Alignment:
To align images within your content, you can use the ‘align’ attribute, although it’s considered outdated in HTML5. Instead, it’s recommended to use CSS for alignment.
Example 4: Aligning images (HTML4 style)
<img src="left.jpg" alt="Left-aligned image" align="left">
<img src="right.jpg" alt="Right-aligned image" align="right">
Discover more from PiEmbSysTech
Subscribe to get the latest posts sent to your email.
