Working with images
The img element is used to display images in HTML . This element presents us with two important attributes:
- src: path to the image. This can be a relative or absolute path in the file system or an Internet address.
- alt: textual description of the image. If the browser for some reason cannot display the image (for example, if the path is incorrectly specified for the src attribute), then the browser displays this text description instead of the image itself.
The attribute is altalso important in that search engines can index the image by text description.
For example, let’s put an image file in the same folder where we have the index.html file. And then display it on the web page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Working with images in HTML5</title>
</head>
<body>
<img src="events.jpg" alt="Tell something about image" />
</body>
</html>
In my case, the image file is called events.jpg and it is located in the same folder as the index.html web page. In this case, one must take into account what imgis an empty element, that is, not the content of the closing tag.
By using styling features such as padding and wrapping, you can combine images with text. For example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Working with images in HTML5</title>
</head>
<body>
<div>
<img src="events.jpg" alt="Tell something about image" style="float:left; margin-right:20px;" />
<h1>Section Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin lobortis euismod. Sed maximus nulla at ligula aliquet interdum. In hac habitasse platea dictumst. Suspendisse egestas diam vel tristique ullamcorper. Duis ultricies lobortis nisl, quis porta lorem eleifend sit amet. Proin vel est quis ipsum condimentum ullamcorper eget vel dui. Ut pretium, tellus nec tincidunt convallis, tortor mi fringilla sem, tincidunt maximus odio felis nec sapien. Proin et fermentum est. Donec dignissim vitae lacus et vehicula. Maecenas lectus ipsum, vestibulum eget augue vitae, tristique aliquam velit. Vestibulum tortor elit, vestibulum ut erat ut, luctus pulvinar lorem.
</p>
</div>
</body>
</html>
