HTML Links & Images Guide
Links and images are fundamental components of the web. This guide covers how to create hyperlinks and add images to your HTML documents, as well as other basic media elements.
1. Creating Links
The <a> element (anchor) creates a hyperlink to web pages, files, email addresses, locations on the same page, or anything else a URL can address.
<a href="https://www.example.com">Visit Example.com</a>
Link Attributes
| Attribute | Value | Description |
|---|---|---|
href |
URL or path | Specifies the destination of the link (required) |
target |
_blank, _self, _parent, _top | Specifies where to open the linked document |
download |
filename (optional) | Specifies that the target will be downloaded when clicking the link |
rel |
nofollow, noopener, noreferrer, etc. | Specifies the relationship between the current document and the linked document |
title |
text | Provides additional information about the link (shown as a tooltip) |
Link Types
<!-- External link -->
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">External Link</a>
<!-- Internal link (to another page in the same site) -->
<a href="about.html">About Page</a>
<!-- Link to a specific section on the same page -->
<a href="#section1">Go to Section 1</a>
<!-- Email link -->
<a href="mailto:example@example.com">Send an email</a>
<!-- Phone link -->
<a href="tel:+1234567890">Call us</a>
<!-- Download link -->
<a href="files/document.pdf" download="custom-filename.pdf">Download PDF</a>
Security Tip: When using
target="_blank" to open links in a new tab, always include rel="noopener noreferrer". This prevents the new page from accessing the window.opener property, which can be a security risk.
2. Creating Anchor Points
You can create anchor points (bookmarks) within a page to link to specific sections:
<!-- Creating the target anchor -->
<h2 id="section1">Section 1</h2>
<!-- Linking to the anchor -->
<a href="#section1">Jump to Section 1</a>
You can also link to specific sections on other pages:
<a href="another-page.html#section2">Jump to Section 2 on Another Page</a>
3. Adding Images
The <img> element is used to embed images in an HTML document.
<img src="image.jpg" alt="Description of the image">
Image Attributes
| Attribute | Value | Description |
|---|---|---|
src |
URL or path | Specifies the path to the image (required) |
alt |
text | Provides alternative text for the image (required for accessibility) |
width |
pixels or percentage | Specifies the width of the image |
height |
pixels or percentage | Specifies the height of the image |
loading |
eager, lazy | Specifies if the image should be loaded immediately or deferred |
title |
text | Shows additional information as a tooltip when hovering |
Image Examples
<!-- Basic image -->
<img src="mountain.jpg" alt="Mountain landscape">
<!-- Image with width and height -->
<img src="mountain.jpg" alt="Mountain landscape" width="500" height="300">
<!-- Lazy-loaded image -->
<img src="large-image.jpg" alt="Large panorama" loading="lazy">
<!-- Responsive image -->
<img src="image.jpg" alt="Responsive image" style="max-width: 100%; height: auto;">
Example of an image with width 500px and height 300px
Best Practice: Always include the
alt attribute with descriptive text. It helps users with screen readers and displays if the image fails to load. If an image is purely decorative, use an empty alt attribute (alt="") but don't omit it.
4. Images as Links
You can make an image function as a link by wrapping the <img> element with an <a> element:
<a href="https://www.example.com">
<img src="logo.jpg" alt="Company Logo">
</a>
5. Image Maps
Image maps allow you to define clickable areas within an image:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">
<map name="workmap">
<area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.html">
<area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.html">
<area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.html">
</map>
The <map> element defines an image map with clickable areas. The <area> element specifies the clickable areas and their associated links.
| Shape Value | Coords Format | Description |
|---|---|---|
rect |
x1,y1,x2,y2 | Defines a rectangular region (top-left and bottom-right coordinates) |
circle |
x,y,r | Defines a circular region (center coordinates and radius) |
poly |
x1,y1,x2,y2,...,xn,yn | Defines a polygon (all coordinates of the polygon) |
default |
N/A | Defines the entire region |
6. Responsive Images
Basic Responsive Image
<img src="image.jpg" alt="Responsive image" style="max-width: 100%; height: auto;">
The simplest way to make an image responsive is to set its maximum width to 100% of its container and let the height adjust automatically to maintain the aspect ratio.
Using the picture Element
<picture>
<source media="(min-width: 1200px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" alt="Responsive image using picture element">
</picture>
The <picture> element gives more control by allowing you to specify different image sources for different screen sizes or device capabilities.
Using srcset and sizes
<img
src="small.jpg"
srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
sizes="(max-width: 600px) 500px, (max-width: 1200px) 1000px, 1500px"
alt="Responsive image using srcset">
The srcset and sizes attributes allow the browser to choose the most appropriate image based on the viewport size and device resolution.
Note: For
srcset, the w unit represents the intrinsic width of the image in pixels. The browser uses this information along with the sizes attribute to determine which image to load.
7. Figure and Figcaption
The <figure> and <figcaption> elements provide semantic way to associate captions with images:
<figure>
<img src="mountain.jpg" alt="Mountain landscape">
<figcaption>Fig.1 - View from Mount Rainier.</figcaption>
</figure>
Usage: The
<figure> element represents self-contained content, referenced as a single unit from the main content. The <figcaption> element provides a caption or legend for the figure.
8. Audio and Video
Adding Audio
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
Your browser does not support the audio element.
</audio>
Adding Video
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.webm" type="video/webm">
Your browser does not support the video tag.
</video>
Common Audio and Video Attributes
| Attribute | Value | Description |
|---|---|---|
controls |
N/A | Displays playback controls |
autoplay |
N/A | Starts playing automatically (often blocked by browsers) |
loop |
N/A | Plays the media again when finished |
muted |
N/A | Mutes the audio output |
preload |
auto, metadata, none | Specifies if/how the media should be loaded when the page loads |
poster |
URL | Specifies an image to be shown while the video is downloading (video only) |
Accessibility: Always provide alternative content inside the
<audio> and <video> elements for browsers that don't support these elements. Consider adding captions or transcripts for videos to make them accessible to everyone.
9. Favicon
A favicon is a small icon associated with a website, displayed in the browser tab, bookmarks, and other areas.
<!-- Basic favicon -->
<link rel="icon" href="favicon.ico">
<!-- Multiple favicon sizes and formats -->
<link rel="icon" href="favicon.ico" sizes="32x32">
<link rel="icon" href="icon.png" type="image/png">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
Tip: Modern websites often provide multiple favicon sizes and formats for different devices and contexts. The
favicon.ico file should be placed in the root directory of your website for older browsers that look for it there automatically.
10. Best Practices
Links
- Make link text descriptive and indicate where the link goes
- Avoid generic phrases like "click here" or "read more"
- Use
rel="noopener noreferrer"withtarget="_blank" - Style links to make them visually distinct from regular text
- Consider how links appear when tabbing through a page
- Use title attributes sparingly and don't rely on them for critical information
Images
- Always include descriptive
alttext for images - Use appropriate image formats (JPEG for photos, PNG for transparency, SVG for icons/logos, WebP for better compression)
- Optimize images for web (compress them without significant quality loss)
- Specify width and height attributes to reduce layout shifts during loading
- Use responsive image techniques for different screen sizes
- Consider using
loading="lazy"for images below the fold - Use CSS for decorative images instead of HTML
Media
- Provide multiple formats for audio and video to ensure compatibility
- Include captions or transcripts for videos
- Don't set
autoplayfor videos with sound (consider user preferences) - Optimize media files for web delivery
- Consider bandwidth usage for mobile users