HTML Images
In HTML, images are defined with the <img> tag.
The <img> tag is empty, it contains attributes only, and does not have a closing tag.
The src attribute specifies the URL (web address) of the image:
<img src=”url“>
| Attribute | Value | Description |
| align | top bottom middle left right | Not supported in HTML5. Specifies the alignment of an image according to surrounding elements |
| alt | text | Specifies an alternate text for an image |
| border | pixels | Not supported in HTML5. Specifies the width of the border around an image |
| crossorigin | anonymous use-credentials | Allow images from third-party sites that allow cross-origin access to be used with canvas |
| height | pixels | Specifies the height of an image |
| hspace | pixels | Not supported in HTML5. Specifies the whitespace on left and right side of an image |
| ismap | ismap | Specifies an image as a server-side image-map |
| longdesc | URL | Specifies a URL to a detailed description of an image |
| sizes | Specifies image sizes for different page layouts | |
| src | URL | Specifies the URL of an image |
| srcset | URL | Specifies the URL of the image to use in different situations |
| usemap | #mapname | Specifies an image as a client-side image-map |
| vspace | pixels | Not supported in HTML5. Specifies the whitespace on top and bottom of an image |
| width | pixels | Specifies the width of an image |
HTML <map> Tag
The <map> tag is used to define a client-side image-map. An image map is an image with clickable areas.
The required name attribute of the <map> element is associated with the <img>’s use map attribute and creates a relationship between the image and the map.
The <map> element contains a number of <area> elements, that define the clickable areas in the image map.
<!DOCTYPE html>
<html>
<body>
<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">
<map name="planetmap">
<area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
<area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
<area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>
</body>
</html>
HTML <frame> Tag.
The <frame> tag is not supported in HTML5.
The <frame> tag defines one particular window (frame) within a <frameset>.
Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to resize, etc.
Optional Attributes
| Attribute | Value | Description |
| frameborder | 0 1 | Not supported in HTML5. Specifies whether or not to display a border around a frame |
| longdesc | URL | Not supported in HTML5. Specifies a page that contains a long description of the content of a frame |
| marginheight | pixels | Not supported in HTML5. Specifies the top and bottom margins of a frame |
| marginwidth | pixels | Not supported in HTML5. Specifies the left and right margins of a frame |
| name | text | Not supported in HTML5. Specifies the name of a frame |
| noresize | noresize | Not supported in HTML5. Specifies that a frame is not resizable |
| scrolling | yes no auto | Not supported in HTML5. Specifies whether or not to display scrollbars in a frame |
| src | URL | Not supported in HTML5. Specifies the URL of the document to show in a frame |
<!DOCTYPE html>
<html>
<frameset cols="25%,*,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
HTML <link> target Attribute
Syntax
<link target=”_blank|_self|_parent|_top|framename”>
Attribute Values
| Value | Description |
| _blank | Load in a new window |
| _self | Load in the same frame as it was clicked |
| _parent | Load in the parent frameset |
| _top | Load in the full body of the window |
| framename | Load in a named frame |
<head>
<link rel="parent" href="wildcats.htm" target="_blank">
</head>