HTML: Learn How to Add Images

HTML: Learn How to Add Images

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • HTML
  • 2 mins read

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

AttributeDescription
srcSpecifies the relative or absolute URL of the image to display.
altSpecifies alternate text to display in place of the image. This text is read aloud by screen readers for users with disabilities. It is required.
heightSpecifies the height of the image in pixels.
widthSpecifies 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>

Output

Java

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.

Complete Example

<!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>

Output

As shown in the featured image of this article.

See also: