HTML Picture Codes

You can use the following HTML code to embed a picture into your HTML document. The code uses the <img> tag, which is the official tag to use for embedding pictures on web pages.

You can also check out the HTML images section of the HTML Tutorial.

Example Picture Code

CodeResult

Milford Sound in New Zealand

Attributes

The <img> tag accepts the attributes in the following table (as well as the HTML 5 global attributes and HTML 5 event handler content attributes).

AttributeDescription
altAlternate text. This specifies text to be used in case the browser/user agent can't render the image.
srcLocation of the image.
crossoriginThis attribute is a CORS settings attribute. CORS stands for Cross-Origin Resource Sharing. The purpose of the crossorigin attribute is to allow you to configure the CORS requests for the element's fetched data. The values for the crossorigin attribute are enumerated.

Possible values:

ValueDescription
anonymousCross-origin CORS requests for the element will not have the credentials flag set. In other words, there will be no exchange of user credentials via cookies, client-side SSL certificates or HTTP authentication.
use-credentialsCross-origin CORS requests for the element will have the credentials flag set.

If this attribute is not specified, CORS is not used at all.

An invalid keyword and an empty string will be handled as the anonymous value.

ismapFor image maps. See HTML map tag
usemapFor image maps. See HTML map tag
widthSpecifies the width of the image.
heightSpecifies the height of the image.

More Picture Codes

Here are links to more picture codes. You can do things like hyperlink images or add a border around your picture. You can even create a rollover effect whenever you hover over the image.

  • Image Links - Opens a web page whenever the user clicks on your picture.
  • Image Maps - These are "clickable" hotspots on your image. One picture can link to many different web pages.
  • Picture Borders - Adds a border around your picture.
  • Image Rollovers - Creates that "Hover over" effect. Easier than you might think!
  • All about the <img> element.