Adding Images and Links
Making webpages interactive with images and hyperlinks
Introduction
Images and links are what make the web visual and interconnected. The img tag embeds pictures, while the a tag creates hyperlinks that connect pages together, forming the web's structure.
Adding images makes content more engaging and helps communicate ideas visually. Links allow users to navigate between pages, download files, and interact with web applications.
In this chapter, you will learn how to add images with proper attributes, create hyperlinks, open links in new tabs, and use images as clickable links.
How It Works
The img tag is a void element that uses the src attribute to specify the image file path and the alt attribute to provide alternative text. The a tag wraps content and uses the href attribute to specify the destination URL. When clicked, the browser navigates to the linked address.
Everyday Object Analogy
Think of images as photographs pinned to a bulletin board. The src attribute tells you which photo to pin, and alt text is the caption written below it for people who cannot see. Links are like doors between rooms — each Anchor tag is a door handle that opens the path to another page.
Image Attributes
src (Source)
Specifies the path or URL to the image file. This can be a Relative Path to a local file or an Absolute URL to an external image.
alt (Alternative)
Provides a text description of the image for screen readers and when the image fails to load. Essential for accessibility.
width & height
Define the display dimensions of the image in pixels. Setting these helps the browser reserve space before the image loads.
Link Types
Internal Links
Point to other pages on the same website using Relative Path. Example: a href="about.html" links to about page within the same site.
External Links
Point to pages on other websites using full URLs. Use target="_blank" to open in a new tab for external links.
Deeper Dive
The alt attribute is not optional — it is required for valid HTML and critical for accessibility. Screen readers announce alt text so blind users understand the image content. If an image is purely decorative, use alt="" (empty) so the screen reader skips it.
Image file formats matter: JPEG for photographs (small file size, lossy compression), PNG for graphics with transparency (lossless), GIF for simple animations, SVG for scalable vector graphics, and WebP for modern high-compression web images.
Key Insight
Always provide meaningful alt text for informative images. Decorative images should have alt="" to be ignored by screen readers. Never leave the alt attribute out.
Advanced
Image optimization is crucial for performance. Large images slow down page loading. Techniques include responsive images with the srcset attribute (serving different sizes for different screen widths), Lazy Loading with loading="lazy", and using next-gen formats like WebP with fallback via picture elements.
Links can point to email addresses (mailto:), phone numbers (tel:), and specific sections on a page using Anchor fragments (#id). The rel attribute controls relationship metadata — rel="noopener noreferrer" is recommended for external links opened in new tabs for security reasons.
Vocabulary Table
| Term | Definition |
|---|---|
| img | An HTML void element used to embed images in a webpage. |
| src | The attribute that specifies the file path or URL of an image. |
| alt | Alternative text that describes an image for accessibility and fallback. |
| Anchor | The a element that creates hyperlinks to other pages or resources. |
| href | The attribute that defines the destination URL of a hyperlink. |
| target | An attribute that specifies where to open a linked page, e.g. _blank for a new tab. |
| Relative Path | A file path specified relative to the current document's location. |
| Absolute URL | A complete web address including the protocol and domain name. |
| Lazy Loading | A technique that delays loading images until they are about to appear on screen. |
| srcset | An attribute that provides multiple image files for different screen resolutions. |
Fun Facts
The first image ever uploaded to the web was a photo of the all-female comedy band Les Horribles Cernettes in 1992.
JPEG stands for Joint Photographic Experts Group, the committee that created the format.
SVG images are written in XML code and can be scaled to any size without losing quality.
The a tag was part of the original HTML specification written by Tim Berners-Lee in 1991.
The rel="nofollow" attribute on links tells search engines not to pass ranking credit to the linked page.
Interactive Diagram
Launch the interactive diagram to see this in action.
Open Interactive DiagramThe interactive diagram for this chapter demonstrates Adding Images and Links. It shows image tags (img) and anchor tags (a) with attributes for src, href, alt text.
What to explore:
- click to add an image; change the alt text; create a link and set its destination; click the link to navigate
- images use the img tag with a source attribute, while links use the anchor (a) tag with an href attribute pointing to the destination
Knowledge Check
1. Which attribute of the img tag provides alternative text for accessibility?
Answer: alt
2. What attribute should you add to a link to open it in a new browser tab?
Answer: target="_blank"
3. What is the best image format for a photograph on the web?
Answer: JPEG