Images

The Image Tag

The image tag is used to embed a digital photograph or visual graphic into a webpage. This tag is self-closing. Images, by default, are placed in-line with text.

The image tag has two required attributes. The value of the src (short for “source”) attribute is a path to the image file which should be displayed; this can be an absolute URL. An Absolute URL is a direct web address to the image file, beginning with “http://” or “https://” – this is useful when embedding an image that is hosted on another website. A Relative URL is a path to the image file relative to the current webpage – this is useful when embedding an image that is hosted on your website.

The value of the alt attribute (short for “alternative”) is a plain-text string which provides a human-readable description of the image. This text will be displayed by the browser if the image fails to load, or if the user has images disabled. This text can also be read aloud by screen-reading software.

Example: Using a Relative URL

The following code:

<p>
    This is a paragraph. There is an image below this text.<br/>
    <img src="images/ncsu.png" alt="NCSU Logo" />
</p>

Would produce the following result:

This is a paragraph. There is an image below this text.

Note: For this example to work, you would need an image file called “ncsu.png” to be inside of a folder called “images”, and the folder called “images” would need to be in the same folder that your webpage is stored in.

Example: Using an Absolute URL

The following code:

<p>
    This is a paragraph. There is an image below this text.<br/>
    <img src="https://www.ncsu.edu/images/ncsu.gif" alt="NCSU Logo" />
</p>

Would produce the following result:

This is a paragraph. There is an image below this text.

Note: Direct linking to images and other resources on other sites is generally discouraged. Because you don’t have control over the resource, it is likely to be deleted, moved, or changed unexpectedly.