HTML and CSS Reference
In-Depth Information
An inline image behaves on a web page as if it were a large character of text.
his is the key to understanding how to use images on a Web page. It not only
means that anywhere a text character can go, an inline image can go; it also
means that inline images are bound to adjacent characters (or other inline
images) the same way as letters are bound into words. his sequence of image
elements:
<img src="..." alt=""/>
<img src="..." alt=""/>
<img src="..." alt=""/>
is not the same as this sequence:
<img src="..." alt=""/><img src="..." alt=""/><img src="..." alt=""/>
In the former case, the carriage returns ending each line in the HTML
source are treated as white space between the images. If the images together
are wider then the containing element, it word-wraps on those spaces. In the
latter case, there are no spaces between the images. hey are like the charac-
ters in a three-letter word. If the containing element is narrower than the total
width of the three images, horizontal scrolling may be enabled. Or depending
on the properties of the containing element, the images can either be clipped
or allowed to overlow into adjacent content.
A large image, especially one that is wider than it is high, should be placed
by itself by enclosing it in an HTML block element that can take the
align
attribute, such as a division, heading, or paragraph. For example, the following
HTML centers an image over a caption:
<div align="center"><img src="images/300-8.gif" alt="book
cover"/><br/>
Cover of the First Edition
</div>
here is even an element for enclosing an image: the igure element, which
can supply a caption with the
igcaption
child element.
<figure>
<img src="images/300-8.gif" alt="book cover"/><br/>
<figcaption>
Cover of the First Edition
</figcaption>
</figure>
