Images and Links

Web pages often contain links and images. Both are items that come externally, meaning you have a separate file that has the link or image in it. In HTML, links use the <a> tag, and images use the <img> tag. Note: an easy mistake to make is to mistype your image or link, so it doesn’t load or link correctly.

Links with the <a> Tag

A link allows users to navigate to another page or website by clicking text or an image. Most links appear as blue, underlined text, but you can style them differently with CSS.

The <a> (anchor) tag requires an href attribute (short for “Hyperlink Reference”), which defines the destination when the link is clicked. You can also use the target attribute to open the link in a new tab: if the value of target is _blank, the link will be opened in a new browser tab or window.

Example: Text Link

<p>
    Visit the <a href="https://www.ncsu.edu">NC State homepage</a>.
</p>

This displays: Visit the NC State homepage.

Opening in a New Tab: Add target="_blank" to the anchor tag.

<a href="https://www.ncsu.edu" target="_blank">NC State</a>

Images with the <img> Tag

The <img> tag embeds an image into a web page. It is self-closing and requires two attributes:

• src: the source (path or URL) to the image file
• alt: a description of the image, used for accessibility. The alt attribute in images is important for accessibility. Screen readers use this to describe the image to users who cannot see it. For more information, visit Mozilla’s HTML Accessibility Guide.

Example: Relative Image URL

<img src="images/ncsu.png" alt="NC State Logo" />

This loads an image called ncsu.png from a folder named images located in the same directory as your HTML file.

Example: Absolute Image URL

<img src="https://www.ncsu.edu/images/ncsu.png" alt="NC State Logo" />

Note: Direct links to images on other websites are discouraged. The file might be moved, deleted, or changed unexpectedly.

Combining Links and Images

You can wrap an <img> inside an <a> tag to make the image a clickable link.

<a href="https://www.ncsu.edu" target="_blank">
    <img src="images/ncsu.png" alt="NC State Homepage" />
</a>

Email Links

You can also link to an email address using the mailto: format in the href attribute. This will launch the user’s email client.

<a href="mailto:jshmoe@ncsu.edu">Email Joe Schmoe</a>

Note: If the user doesn’t have a default email app set up, this link may not work.

Absolute vs. Relative URLs

Like the src in images, href values in links can be absolute (full web address) or relative (based on current file location).

• Absolute URL: https://www.ncsu.edu/index.html
• Relative URL: about.html or images/ncsu.png

Quick Reference Table