3.4 HTML Images

The major media on the Web

Images are the first non-textual content to have appeared on the Web. Most image formats you can find on your computer can also be displayed in your browser: .jpg, .gif (animated or not), .png (transparent or not), .bmp


Images use the <img> element, which is a self-closing element (it only has an opening tag).

The src attribute defines the location of the image. As with links, you can either use relative or absolute URLs.

  • my-first-website
    • home.html
    • soyuz-spacecraft.jpg
  Look at this spacecraft landing!
  <img src="soyuz-spacecraft.jpg">

Look at this spacecraft landing!


Every image has 2 dimensions: a width and a height. The previously shown spacecraft image is 394 pixels wide and 284 high.

When inserting an image in HTML, you don’t need to specify its dimensions: the browser will automatically display it in full size.

If you want to alter the dimensions of an image, although it is possible in HTML, it’s recommended to use CSS, as we’ll see in later chapters.

Block or inline?

Although an image has a width and a height, and is visually a big rectangle, an image is not an HTML block element but actually an inline element.

This is due to the <img> element being a self-closing element: it can’t technically contain any other HTML element, and is thus considered an inline element, like <a>, <strong> or <em>.

This inline behavior can have unexpected results:

  There is a frog
  <img src="frog.jpg">
  in the middle of the paragraph!

There is a frog in the middle of the paragraph!

Because in HTML the content is king, images will be displayed regardless of the quirky layout it might induce, and thoughtfully so.

Back to top

Learn CSS with my ebook

This ebook is a step by step guide in which I teach you how to build your own personal webpage from scratch, line by line, with HTML5, CSS3, and even JS.

CSS in 44 minutes book cover
Get it now