🎁 Exclusive offer: Get EXTRA Bits and Celebrate Bybit's 6th Birthday With $2.2M Prize Pool. Act Now!

Code has been added to clipboard!

HTML Image Tag

Reading time 2 min
Published Jun 29, 2017
Updated Jan 21, 2020

HTML Image Tag: Main Tips

  • HTML <img> tag defines an image in an HTML page.
  • To link an image to another document, use the <img> inside <a> tags.

Use and Purpose of img

HTML <img> tag sets an area for an image. The img scr attribute is required (usually a link).

Tip: the img element only needs an opening tag.

Example
<img src="image.png" alt="Space Doggo" width="50" height="50">

HTML image tag

This image above was added with the following code, including the HTML image tag.

Example
<img src="image.png" alt="Doggo" width="205" >

Note: images are not inserted into an HTML page, but linked to the HTML page.

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
edX
Pros
  • A wide range of learning programs
  • University-level courses
  • Easy to navigate
  • Verified certificates
  • Free learning track available
Main Features
  • University-level courses
  • Suitable for enterprises
  • Verified certificates of completion

Attributes to Use

alt

It indicates an alternative text for an image when it cannot be displayed.

Example
<img src="image.png" alt="Space Doggo" width="50" height="50">

crossorigin

It specifies that images are from third-party websites, allowing cross-origin access.

Example
<img src="image.png" alt="Lemon" crossorigin="anonymous">

height

It defines image height in pixels.

Example
<img src="image.png" alt="Doggo" height="60">

longdesc

It adds an URL to a detailed description of an image.

Example
<img src="image.png" alt="Doggo" width="205" height="205" longdesc="#description">

src

img src sets the URL of an image.

Example
<img src="image.png" alt="Doggo" width="205">

width

It defines image width in pixels.

Example
<img src="image.png" alt="Doggo" width="100">

Deprecated Attributes

align

It defines the alignment of an image according to surrounding elements. Not supported in HTML5.

You should use CSS instead. Learn how to position elements in the Horizontal & Vertical Align tutorial.

Example
<img src="image.png" alt="Doggo" align="middle">

border

It defines border width around an image. Not supported in HTML5.

Instead, use CSS border property. Learn how in the CSS Borders tutorial.

Example
<img src="image.png" alt="Doggo with a 5 pixels border" border="5">

hspace

It creates a whitespace on the left and the right side of an image. Not supported in HTML5.

Instead, use CSS margin property. Learn how in the CSS Margins tutorial.

Example
<img src="image.png" alt="Doggo" hspace="20">

vspace

It creates a whitespace on top and bottom of an image. Not supported in HTML5.

Instead, use CSS margin property. Learn how in the CSS Margins tutorial.

Example
<img src="image.png" alt="Doggo" vspace="50">

Browser support

Browser image
Chrome
All
Browser image
Edge
All
Browser image
Firefox
All
Browser image
IE
All
Browser image
Opera
All
Browser image
Safari
All

Mobile browser support

Browser image
Chrome
All
Browser image
Firefox
All
Browser image
Opera
All
Browser image
Safari
All