The HTML Language - HTML Manual of Style - page 92

he igure element is not limited to images. It can be used with any con-
tent that can in some way be separated from the main part of the document,
including tables and code samples. he igcaption element is optional. here
should not be more than one in any igure. he igure element aids search
engine optimization by distinguishing images that are part of the content
from images that are purely decorative. he igure and igcaption elements also
make it possible to compile a “list of igures” for a document.
When images are taller than they are wide, text and other content can be
directed to low around the image, either on the right or let side by giving the
value "left" or "right" , respectively, to the image element's align attribute. But,
when the align attribute has one of the values: "top" , "middle" , or "bottom" , it
speciies how the image should be aligned with the adjacent text. he default is
to align the bottom of an image with the baseline of the text. A value of "top"
aligns the top of the image with the top of the tallest character in the current
line, as illustrated in Figure 2.22. he value of "middle" aligns the middle of
the image with the baseline of the text.
Two additional attributes, hspace and vspace , can be used to control the
amount of horizontal and vertical space around a loating image. However,
using the CSS padding property provides more control. he image element's
border attribute applies only when the image is inside an anchor tag. Its value
is the size of the border in pixels. A value of 0 turns of the border. his is use-
ful when it is otherwise obvious that the image represents a hypertext link.
he image element can also be speciied with height and width attributes.
hese attributes can have values in pixels. heir function in the image tag is
performance-related. If speciied, the height and width attributes allow the
browser to reserve a space of that size in the appropriate place on the page.
his allows the browser to continue formatting the page while the image is
being downloaded, speeding up the process for the reader. If the height and
width attribute values are not the same as the corresponding dimensions of
the image, the browser scales the image to that size. However, this has its
limitations. Scaling up reduces an image's quality, and scaling down wastes
resources because it takes the same amount of time to download the image,
regardless of its displayed size.
Fun efects can be achieved by setting an image's height or width to a per-
centage value. he HTML code in Example 2.23 creates a colorful bar (trust
me, it has all the colors of the rainbow), as shown in Figure 2.23. In reality it is
a square 16-by-16-pixel image that has been scaled up with height and width
attributes in its image element.