At a minimum, an image placed in an HTML document needs the following information:
<img src="xs-shirt.png" alt= Extra-Small Shirt" />
In the example above the image will display on the web page at its native or natural size. If the image cannot be seen for any reason, the
alt attribute value will be used used as a text substitute. Note that the file name also indicates the content of the image.
If the image is used for purely decorative purposes and has no semantic intent,
alt must still be set, but should be equal to null (i.e.
<p><img src="xs-shirt.png" alt="Extra-Small Shirt" style="width: 200px; height: 200px; float: right; margin-left: 2em;" />Shirts from the TightWaist Company are made using 100% natural cotton in a manufacturing process that avoids the harsh chemical treatments and waste of traditional techniques.</p>
Note that the position of the
<img /> code inside the paragraph matters: moving the
<img /> within the paragraph changes where the text wraps around the image.
Images do not have to be floated, but without applying CSS text does not wrap around the image: instead, the lower edge of the image lines up with the baseline of the text in the block.
A few final hints and tips:
- Inline styles are often used on images, as the size, orientation and position of images is often unique. Images that share the same display properties can be addressed more efficiently via an embedded or linked style by using a
classor descendant selector.
- Unless you are building a responsive web page, the
widthvalues for the image should be set to the actual height and width of the image in pixels. Do not try to use CSS to create “thumbnails” of images – use PhotoShop or another bitmap editor to create new versions of the image instead.
- Don’t use PhotoShop to create borders on images. Doing so inevitably increases the number of pixels in an image, increasing file size; borders added in PhotoShop also mean that you must return to the application in order to make any changes. It is far more efficient to create border effects with CSS.
- Images that are inside an
<a>tag will automatically have a blue border applied in older browsers. To remove this, set the
borderstyle for the image to an value of
none. (This is often done as part of a CSS Reset)