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
<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
Search WWH ::

Custom Search