5.2 A Basic Look at an HTML Image Element

After watching J. David Eisenberg’s LinkedIn class on “HTML: Images and Figures,” I found myself pondering how the images in presented in any given blog looked as an HTML element. The obvious answer would be to use the inspect function on my blogs, but I still felt it was helpful to look for a resource that presented and organized the intricacies of an HTML element in one concise page. This tutorial, “Practical HTML for Bloggers – Images,” by Marie Mosley (posted on “Code it Pretty” ) proved to be the very resource I was looking for. In one page Mosley instructs the reader of the anatomy of an element, the placement of links, and some common attributes for the image.

The Anatomy of an Image Element and the Link

The author first provides an image element at its bare minimum as an example.

She then lists the three primary pieces of the preceding element. The first being the IMG piece, which stands for “image.” In the context of an element, these three letters communicate to the browser that the element as a whole is an unequivocal image. The next piece being SRC, or “source.” The source serves as the image’s URL in the file system. Finally, the third piece of our example element or ALT, which stands for “alternative text.” The fundamental purpose of alt text is to describe the image as succinctly as possible for users with visual impairments. Then Mosley provides three different elements as examples for clickable images, link changes to other posts and new windows or tabs.

The first example serves as a clickable image and is deafferented by its href attribute. The href attribute serves a link to a larger image within the element tag.

The second example shows the user how to link to another post by using the href attribute. In the first example you can the difference between “larger-image.jpg” attribute and the second example’s “a-different-blog.html” attribute.

This third example shows the unpopular attribute, target=”_blank,“ which will link this image to another window.

Some Common Attributes for Image Elements

1. Width and Height: These attributes let the user crop their image to a more desirable size. Which appears in the tag as height=”500″ width=”500″
2. Alt: As described in the anatomy section above, the alt attribute is indented for visually impaired users. It’s common because the W3C or “the rule makers of HTML” set a moral precedent and necessity for accessible coding.
3. Title: This attribute might look this title=”advisory information” in the tag, but it will appear as a clean rectangle when the user hovers over the image.
4. Class: The styling attribute that is limited by the coder’s imagination. There are millions of ways to style a image, but in the tutorial Mosley demonstrates how to rotate images with the class attribute or class=”rotate”>.