HTML Images

HTML Images Syntax

In HTML, images are defined with the <img> tag.

The <img> tag is empty, it contains attributes only, and does not have a closing tag.

The src attribute specifies the URL (web address) of the image:

<img src="url" alt="some text">

The alt Attribute

The alt attribute specifies an alternate text for an image, if the image cannot be displayed.

The alt attribute provides alternative information for an image if a user for some reason cannot view it (because of slow connection, an error in the src attribute, or if the user uses a screen reader).

If a browser cannot find an image, it will display the alt text:

<img src="CoderDojoMallow.jpg" alt="CoderDojo Mallow">
Try it Yourself

HTML Screen Readers

A screen reader is a software programs that can read what is displayed on a screen.

Screen readers are useful to people who are blind, visually impaired, or learning disabled.

Image Floating

Use the CSS float property to let the image float.

The image can float to the right or to the left of a text:

<p>
  <img src="smiley.gif" alt="Smiley face" style="float:right;">
  The image will float to the right of the text.
</p>

<p>
  <img src="smiley.gif" alt="Smiley face" style="float:left;">
  The image will float to the left of the text.
</p>
Try it Yourself