HTML and CSS Reference
In-Depth Information
Inserting Images
We can place all kinds of images on our web page, from logos to photographs. Web images
appear automatically when the visitor jumps to our page, as long as the browser is con-
figured to view them.
To place an image in a web document, we use the <img> element. The image does not reside
in the web page. It is stored as a separate file, and the HTML code points to its location.
Technically, an image element is an empty element, as it will be replaced by the actual ref-
erenced image content. As an empty element, it consists only of attributes and is opened and
closed in a single tag.
To point to the actual image that we want to display, we use the src attribute to insert the
relative or absolute path to the image.
<img src="images\cv_picture.jpg">
When a browser reads this <img> element, it sends out a request for the cv_picture.jpg file
from the images folder. After retrieving the file, the browser will insert that picture into the
page in the location of the <img> tag.
We are also strongly encouraged to use the alt attribute along with the <img> attribute. Short
for alternate text, this attribute is used to describe the image and its meaning in words in or-
der to give it context in the document.
<img src="images\cv_picture.jpg" alt="Scott Johnson profile picture">
Usually, alternate text doesn't show up on the web page with the image, but it provides sev-
eral important features. First, in keeping with the semantic importance of markup, it lets the
image provide some meaning to the document. Without the alternate text in the <img> ele-
ment, the image would be essentially “meaningless,” and the document would lose some of
its semantic value. Second, from a more functional perspective, the browser will display the
alternate text if it can't display the image itself for any reason. Finally, and most importantly,
the alternate text acts as an accessibility tool for visitors who are visually impaired and use
a screen-reading program to access our website.
Search WWH ::
Custom Search