Inline Images in HTML: The ![]()
Tag
After you have an image ready to go, you can include it on your web page. Inline images are placed in HTML documents using the <img> tag. This tag, like the <hr> and <br> tags, has no closing tag in HTML.
The <img> 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 <img> 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 :
<img src=”image.gif”>
For an image file one directory up from the current directory, use this tag:
<img src=”../image.gif”>
Apply the same rules as for URLs in the href part of the <a> tag.
You can also point to images on remote servers from the src attribute of an <img> tag, just as you can from the href attribute of a link. If you wanted to include the image example.gif from www.example.com on your web page, you could use the following tag :
<img src=”http://www.example.com/example.gif”>
