Image Codes
This page contains copy/paste HTML image codes. You can take these codes and modify them for your own use.
To add an image to a web page, you first need to have the image. This image needs to be uploaded to your web server (or another web server) so that it has its own URL (eg, http://www.mysite.com/images/myimage.jpg). You need to be able to view this image by visiting this URL. If you can't see the image via your own browser, you won't be able to embed it into your web page.
You can see by the code below that you insert the image URL into the code.
HTML <img> Tag
In HTML, you can embed an image into a web page using the <img> tag. When you use this tag, you insert the image URL. You should also provide other details such as width, height, and alternative text. Alternative text is the text that is displayed in the event that your image can't be displayed. This can be very helpful for blind users who need to use a screenreader to view websites. It is also useful in the event that someone views your website with images disabled in their web browser.
Here's an example of embedding an image into a web page using the <img> tag:
| Source Code | Result |
|---|---|
|
Image Borders
You can add a border to your image by using the CSS border property. You can specify the width, style, and color of the border. For example, border:1px solid black; would create a border that's one pixel wide, solid and black in color.
Here's an example of an image border.
| Source Code | Result |
|---|---|
|
|
Also see our HTML Image Borders page for more image border codes.
Background Images
Another way to add an image to a web page is to add the image as a background image.
Linked Images
You can also have linked images on your web page. These are images that, when clicked on, open another web page or URL. To create a linked image, see our HTML Links page.