ptg16476052Inline Images in HTML: The <img> Tag 2019
The tag has many attributes that enable you to control how the image is presented
on the page. Some attributes have been deprecated in favor of Cascading Style Sheets
(CSS). There are only two required attributes of the image tag in HTML5: src and alt.
The most important attribute of the tag is src, which is the URL of the image.
There’s nothing special about image URLs, so everything you learned about absolute
and relative paths in Lesson 6, “Working with Links,” applies. To point to a file named
image.gif in the same directory as the HTML document, you can use the following tag :
For an image file one directory up from the current directory, use this tag:
Apply the same rules as for URLs in the href part of the tag.
You can also point to images on remote servers from the src attribute of an tag,
just as you can from the href attribute of a link. If you wanted to include the image
example.gif from http://www.example.com on your web page, you could use the following tag :
Just because you can use images stored on other servers for your
own web pages doesn’t mean that you should. A lot of legal, ethi-
cal, and technical issues are involved with using images on other
sites. I discuss them later in this lesson.CAUTIONAdding Alternative Text to Images
Occasionally there are cases where your images may not be displayed as intended on
your page. Maybe a user with a visual impairment visits your page with a screen reader.
Perhaps it’s a user on a mobile device with a slow connection that’s taking too long to
download your images. You can use the alt attribute of the tag to describe your
image so that some meaning is conveyed even when the image cannot be displayed.
You should enter a text description of the image in the alt attribute, like this:
The alt attribute supports a simple text description, not markup of any kind. Therefore,
you can’t use whole blocks of HTML code as a replacement for an image—just a few
words or phrases.