Build: The Image Element

Step 1

Declare the Image

The image element is an empty element that only requires a single tag: the image tag.

HTML
<img />
This step lets the browser know what element to expect.
Step 2

Add the Source

The first attribute that we will need to consider is src="". Within the double-quotes you will need to include a URL source to the location of the desired image.

This will typically be a relative URL to a file stored on the same server as the web page, but can also be an absolute URL to an image anywhere on the Internet.

HTML
<img src="" />
Between the double-quotes will go the image's relative or absolute URL.
Step 3

Add Alternative Text

Proper style and accessibility standards dictate that you must always include the alternative text attribute. It is required that you provide a detailed description, especially in the case where the image is necessary to understand the content of the page.

HTML
<img src="" alt="" />
Beteen the double-quotes will go a clear description of the image.
Step 4

Add a Title

As with the alt text attribute, you should also get in the habit of always including a title attribute. Most browsers will display this text as a tooltip when a user hovers their mouse over am image.

HTML
<img src="" alt="" title="" />
Including a title will give your users more information about the image when hovering.
Step 5

Set the Size

HTML
<img src="" alt="" title="" width="" height="" />
Caption
Preview

Preview

A full image element is a combination of tag, source, alt text, title, and size:

HTML
<img src="./images/octocat-wave.gif" alt="animated GitHub Octocat logo, waving with a tentacle" title="Join Us at GitHub.com!" width="200" height="150" />
Preview
animated GitHub Octocat logo, waving with a tentacle

html elements image