Images are an important part of most web pages. To add an image in HTML, you use the img element. This is an inline element that's coded as an empty tag. In this tutorial, you will learn how to add images in HTML.
Attributes of the <img> Element
|src||Specifies the relative or absolute URL of the image to display.|
|alt||Specifies alternate text to display in place of the image. This text is read aloud by screen readers for users with disabilities. It is required.|
|height||Specifies the height of the image in pixels.|
|width||Specifies the width of the image in pixels.|
The src (source) attribute of an img element specifies the URL of the image you want to display, and it is required. The alt attribute should also be coded for img elements. You typically use this attribute to provide information about the image. For the SEO point of view, it is required.
HTML Add Image Example Using img Element
<img src="https://3.bp.blogspot.com/-lYesVEvGLSo/XLAgqUnaLjI/AAAAAAAAG3E/xdOd1UsMLTAtTUaQ60QrfpCgEPJl2yVjgCLcBGAs/s1600/html5.jpg" alt="Java" height="200" width="200"></img>
Notes on Images in HTML
- For images with useful content, always code an alt attribute that describes the image.
- For images that are used for decoration, code the alt attribute with no value ("").
- The img element is an inline element that is used to display an image that's identified by the src attribute.
- The height and width attributes can be used to indicate the size of an image so the browser can allocate the correct amount of space on the page. These attributes can also be used to size an image, but it's usually better to use an image editor to do that.
<!DOCTYPE html> <html lang="en"> <body> <h1>HTML Images</h1> <img src="https://3.bp.blogspot.com/-lYesVEvGLSo/XLAgqUnaLjI/AAAAAAAAG3E/xdOd1UsMLTAtTUaQ60QrfpCgEPJl2yVjgCLcBGAs/s1600/html5.jpg" alt="Java" height="200" width="200"></img> </body> </html>
As shown in the featured image of this article.