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.
Example Picture Code
Attributes
The <img> tag accepts the attributes in the following table (as well as the HTML global attributes and HTML event handler content attributes).
| Attribute | Description | ||||||
|---|---|---|---|---|---|---|---|
alt | Alternate text. This specifies text to be used in case the browser/user agent can't render the image. | ||||||
src | Location of the image. | ||||||
crossorigin | This 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:
If this attribute is not specified, CORS is not used at all. An invalid keyword and an empty string will be handled as the |
||||||
ismap | For image maps. See the <map> element. |
||||||
usemap | For image maps. See the <map> element. |
||||||
width | Specifies the width of the image. | ||||||
height | Specifies the height of the image. |
Background Image Code
You can also add a picture to the background, so that text and other elements appear in front of the image. You can do many things with background images, such as make it tile/repeat, change its position, change its size, and more.
Background images are defined differently to foreground images (as in the above example). Background images are defined using the CSS background-image property and can be applied to any HTML element.
Here's a basic example of a background image.
You can also use the background shorthand property to set the background image and other background properties.
More Picture Codes
Here are links to more picture codes. You can do things like hyperlink images or add a border around your picture.
- 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.
- Image Borders - Adds a border around your picture.
- All about the
<img>element. - Background Image Code.
HTML Reference
-
HTML Tutorial
Free HTML tutorial that explains how to code in HTML.
This tutorial explains what HTML elements and attributes are, and how to use them.
I explain the basics, such as what you need in order to write HTML and how to create your first web page.
I then cover other HTML topics including tables, adding color, images, forms, image maps, iframes, meta tags, and more.
I also explain the difference between HTML and CSS (and when to use each one).
Go to HTML Tutorial -
HTML Tags
Full list of all HTML elements.
This is an alphabetical list of HTML elements, linking to a full page of details for each element.
All elements are based on the official HTML5 specification, and include usage notes, full attribute list, as well as links to the various specifications for each element (i.e. HTML4 spec, HTML5 spec, WHATWG spec).
Go to HTML Tags -
CSS Properties
Full list of CSS properties.
Alphabetical list of CSS properties as per the W3C specifications.
CSS stands for Cascading Style Sheets. CSS is the standard way to style web pages.
You can use CSS to set the style for a whole website in one place. CSS allows you to set colors, fonts, widths, heights, margins, padding, and much more.
Go to CSS Properties