HTML Image Code

This page contains HTML image code. Feel free to copy and paste the HTML image code into your own website, blog, MySpace page, or other HTML document. And feel free to modify the code as you wish.

Also, please consider keeping the link back to this website - if you do it will be very much appreciated!

The image codes on this page are the HTML image codes. That is, these are the codes that use an HTML tag to create the image. You can also use CSS (Cascading Style Sheets) to create CSS image code but this is limited to background images. HTML-specific codes.

About HTML Image Code

The HTML method of adding an image to a web page is by using the img tag. Using this method embeds the image into the HTML document. Well, it doesn't embed the actual image, rather, it embeds a reference to the image. This results in the image appearing to be embedded into the web page.

Example:

Source Code	Result
<!-- Codes by HTMLcodes.me --> <img src="http://www.htmlcodes.me/images/image-codes/city-skyline.gif" width="150" height="106" alt="Cartoon drawing of city skyline" /> <p><a style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/image-codes/html-image-code.cfm">HTML image code</a></p>

Things to Remember

The img tag requires an image to be located on a server available on the internet. You enter the URL of the image into the src attribute. It doesn't have to be on the same server, it can be anywhere on the internet (as long as "Hot Linking" isn't enabled).

HTML image code requires the dimensions of the image to be specified. In other words, you should always use the width and height attributes (as the above code does).

You should also use the alt attribute (as the above code does). The alt attribute, which stands for "Alternative Text", is used to describe what the image is. This is useful for those who can't view the image (such as blind people who use a screen reader). The alt attribute can also be handy for search engine optimization too.

HTML Image Maps

You can use the HTML img tag along with the map and area tags to create an image map. An image map is an image with clickable areas that link to other webpages when clicked.

Here's an example:

Source Code

Result

<!-- Codes by HTMLcodes.me -->
            <img src ="http://www.htmlcodes.me/images/image-codes/mueller-hut.jpg"
            width="225" height="151" border="0"
            alt="Photo of Mueller Hut, Mount Cook, and myself"
            usemap ="#muellermap" />
            <map id ="muellermap"
            name="muellermap">
            <area shape ="rect" coords ="90,80,120,151"
            href ="javascript:alert('Me');"
            alt="Me" />
            <area shape ="poly" coords ="55,55,120,80,90,80,90,100,70,100,20,80,55,55"
            href ="http://en.wikipedia.org/wiki/Mount_Cook" target="_blank"
            alt="Mount Cook" />
            <area shape ="poly" coords ="145,80,145,100,215,90,215,80,180,60,145,80"
            href ="http://www.natural-environment.com/places/mueller_hut.php" target="_blank"
            alt="Mueller Hut" />
            </map>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/image-codes/html-image-code.cfm">HTML image code</a></p>

Photo of Mueller Hut, Mount Cook, and myself

Background Image Code

Strictly speaking, HTML doesn't enable you to create background images. HTML image code is limited to embedding an image within the normal flow of the document. In other words, the image will appear within the content, where ever you choose for it to appear.

To create a background image, you need to use CSS. Since CSS and HTML work perfectly together, this doesn't really cause much of a problem.

To create a background image, see these articles: