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:
.gif (animated or not),
.png (transparent or not),
Images use the
<img> element, which is a self-closing element (it only has an opening tag).
src attribute defines the location of the image. As with links, you can either use relative or absolute URLs.
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
This inline behavior can have unexpected results:
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.