Lesson 10

HTML Images

0

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

Syntax

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

Result:

Look at this spacecraft landing

Dimensions

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:

Result:

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

HTML Basics by Jeremy Thomas is licensed under CC BY-NC-SA 4.0

Comments

icon

Be the first to comment!