back to home

HTML Images

spider

HTML Images Syntax

<img src="url" alt="alternatetext">

The src Attribute

Alternative text

The alt attribute should reflect the image content, so users who cannot see the image get an understanding of what the image contains:

luffy with hat

The alt Attribute

Alternative text

The alt attribute should reflect the image content, so users who cannot see the image get an understanding of what the image contains:

flach

Image Size

Here we use the style attribute to specify the width and height of an image:

In a bilding

Width and Height, or Style?

With/Height Attributes or Style?

The first image uses the width attribute (set to 128 pixels), but the style in the head section overrides it, and sets the width to 100%.

HTML5 Icon

The second image uses the style attribute to set the width to 128 pixels, this will not be overridden by the style in the head section:

HTML5 Icon

Images in Another Folder

It is common to store images in a sub-folder. You must then include the folder name in the src attribute:

csk vs rcb

Image on Another Server/Website

W3Schools.com

Animated Images

HTNL allows moving images

Computer man

Image as a Link

The image is a link. You can click on it.

jengj

Image Floating

Float the image to the right:

Smiley face A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.

Float the image to the left:

Smiley face A paragraph with a floating image. A paragraph with a floating image. A paragraph with a floating image.