HTML and CSS Reference
In-Depth Information
Images and other objects
Images are embedded in
HTML
with the
<img>
element. The basic syn-
tax is extremely simple; just the element itself and a single attribute are
required:
<img src="dust-puppy.svg">
In this case, the image is much larger than the
available browser window, so only the upper-
left part of it appears on the screen.
A less obvious problem is that if the image is
unavailable for some reason, perhaps due to a
failure on the server, or because the user is
browsing without images, or because the author
misspelled the image name, then there will be
no evidence that the image is there at all.
You can correct both these issues with a couple
of common attributes,
width
(and/or
height
) and
alt
(alternative text):
<img src="dust-puppy.svg"
width="252px" height="356px"
alt="An image of Dust Puppy">
It's recommended that you always add an
alt
attribute to an
<img>
element. In cases where
the image is purely decorative or is described
textually in some other way, it's permissible to
set the
alt
attribute to an empty string:
alt=""
.
Usually you can do without
width
and
height
attributes, either because
the image is sized appropriately to start with or because the size of the
image is controlled with
CSS
(see appendix
C
). This lets you determine
how big the image should be depending on what device is used to access
the page. The main benefit of providing dimensions is that browsers
know how much space to allocate when laying out the page, which
improves performance. Notice that the image element is self closing—it
