Skip to main content

HTML Images

In this tutorial, you will learn how to add images to your document using the <img> tag.

HTML Images Syntax​

Images are linked to web pages rather than being put into them. The <img> element produces a placeholder for the referenced image.

The <img> element is empty; it merely includes attributes and lacks a closing tag.

The <img> tag requires two attributes:

  • src - Specifies the path/url to the image
  • alt - Specifies an alternate text for the image
Syntax
<img src="url" alt="alternatetext" />

The src attribute specifes the path or url to the image

The alt attribute gives replacement text for an image if the viewer is unable to view it for whatever reason (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

The alt property value should explain the image.

note

A screen reader is a software program that reads the HTML code, and allows the user to "listen" to the content. Screen readers are useful for people who are visually impaired or learning disabled.

Image Size - Width and Height​

The width and height of an image may be specified using the style attribute.

The width and height attributes always define the width and height of the image in pixels.

Example
<!-- Image tag syntax -->
<img
  src="/img/codinghabitslogo.png"
  alt="codingHabits Logo"
  style="height:400px; width:400px"
/>

<!-- Image tag showing alternate text -->
<img src="wrongUrl" alt="codingHabits Logo" />
Loading...