Learning Resources
 

Image Links

Image links are constructed as you might expect, by embedding an tag inside of an anchor element . Like HTML text links, image links require opening and closing anchor tags, but instead of placing text between these opening and closing tags, the developer needs to place an image tag -- with a valid source attribute value of course.


HTML Image Link Code:


 

The tag is used to incorporate in-line graphics (typically icons or small graphics) into an HTML document. This element is NOT intended for embedding other HTML text. For large figures with captions and text flow see FIG element.

Example:

Browsers that cannot display in-line images ignore the IMG element unless it contains the ALT attribute. Note that some browsers can display (or print) linked graphics but not in-line graphics. If the graphic is essential, you may want to create a link to it rather than to put it in-line. If the graphic is essentially decorative, then IMG is appropriate.

Permitted Attributes

ID

An SGML identifier used as the target for hypertext links or for naming particular elements in associated style sheets. Identifiers are NAME tokens and must be unique within the scope of the current document.

LANG

This is one of the ISO standard language abbreviations, e.g. "en.uk" for the variation of English spoken in the United Kingdom. It can be used by parsers to select language specific choices for quotation marks, ligatures and hypenation rules etc. The language attribute is composed from the two letter language code from ISO 639, optionally followed by a period and a two letter country code from ISO 3166.

CLASS

This a space separated list of SGML NAME tokens and is used to subclass tag names. By convention, the class names are interpreted hierarchically, with the most general class on the left and the most specific on the right, where classes are separated by a period. The CLASS attribute is most commonly used to attach a different style to some element, but it is recommended that where practical class names should be picked on the basis of the element's semantics, as this will permit other uses, such as restricting search through documents by matching on element class names. The conventions for choosing class names are outside the scope of this specification.

SRC (Source)

The SRC attribute specifies the URI for the image to be embedded. Its syntax is the same as that of the HREF attribute of the tag. SRC is mandatory.

MD

Specifies a message digest or cryptographic checksum for the associated graphic specified by the SRC attribute. It is used when you want to be sure that the image is indeed the same one that the author intended, and hasn't been modified in any way. For instance, MD="md5:jV2OfH+nnXHU8bnkPAad/mSQlTDZ", which specifies an MD5 checksum encoded as a base64 character string. The MD attribute is generally allowed for all elements which support URI based links.

WIDTH

Optional suggested width for the image. By default, this is given in pixels.

HEIGHT

Optional suggested height for the image. By default, this is given in pixels.

UNITS

This optional attribute specifies the units for the width and height attributes. It is one of: units=pixels (the default) or units=en (half the point size).

ALIGN

Take values TOP or MIDDLE or BOTTOM, defining whether the top or middle or bottom of the graphic should be aligned with the baseline for the text line in which the IMG element appears.

With ALIGN=LEFT, the graphic will float down and over to the current left margin, and subsequent text will wrap around the right hand side of the graphic. Likewise for ALIGN=RIGHT, the graphic aligns with the current right margin and, and text wraps around the left. It is inappropriate to use this feature for larger graphics as these are best represented with the FIG element.

ALT (Alternate text)

Optional alternative text as an alternative to the graphics for display in text-only environments. The alt text can contain entities e.g. for accented characters or special symbols, but it can't contain markup. The latter is possible, however, with the FIG element.

ISMAP

An image map is a graphical map by which users can navigate transparently from one information resource to another. The ISMAP attribute identifies an image as an image map. The IMG element can then be used as part of the label for a hypertext link (see the anchor element). When the user clicks on the image the location clicked is sent to the server designated by the hypertext link.

For example: