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 displayed used as a text substitute. Note that the the content of the image is also indicated in the file name.
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.
alt="" or, in HTML5, simply
alt, with no value).
<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 image within the paragraph changes how and where the text wraps around it. For this reason, the same approach (images inside block tags) is recommended for HTML5, although it is not required by the specification.
Images do not have to be floated, but without CSS, text will 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:
- As a general rule, images that are floated to the
leftwithin body text should have
marginapplied to their
right, and vise-versa, to provide a visual “gutter” between text and illustrations.
- Inline styles are often used on images, as the size, orientation and position of pictures on a web page 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 borders 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)