HTML Links and Images - Complete Reference

🔗 HTML Links Overview

What are HTML Links?

HTML links (hyperlinks) allow users to navigate between web pages and resources. They are created using the <a> (anchor) element and can link to other pages, sections, files, or external resources.

Basic Link Structure

<a href="destination">Link Text</a>

The href attribute specifies the destination URL or location.

🌐 Types of Links

External Links

Visit Google

<a href="https://www.google.com">Visit Google</a>

Use for: Linking to other websites

Internal Links

About Us

<a href="about.html">About Us</a>
<a href="pages/contact.html">Contact</a>
                    

Use for: Linking to pages within your site

Anchor Links

Go to Section 1

<a href="#section1">Go to Section 1</a>
<h2 id="section1">Section 1</h2>
                    

Use for: Linking to sections within the same page

Email Links

Send Email

<a href="mailto:contact@example.com">Send Email</a>
<a href="mailto:user@example.com?subject=Hello">Email with Subject</a>
                    

Use for: Opening email client

Phone Links

Call Us

<a href="tel:+1234567890">Call Us</a>
<a href="tel:+1-234-567-8900">Formatted Phone</a>
                    

Use for: Making phone calls on mobile devices

Download Links

Download PDF

<a href="document.pdf" download>Download PDF</a>
<a href="file.zip" download="my-file.zip">Download File</a>
                    

Use for: Triggering file downloads

⚙️ Link Attributes

Important Link Attributes

Attribute	Description	Example
href	Link destination URL	<a href="page.html">
target	How to open the link	<a target="_blank">
rel	Relationship to target	<a rel="noopener">
download	Force download of file	<a download>
title	Tooltip text	<a title="More info">

Target Attribute Values

Value	Description	Use Case
_self	Same window/tab (default)	Internal navigation
_blank	New window/tab	External links
_parent	Parent frame	Framed content
_top	Full window	Breaking out of frames

<!-- Link Attributes Examples -->
<a href="https://example.com" 
   target="_blank" 
   rel="noopener noreferrer" 
   title="Visit Example Website">
    External Link
</a>

<a href="document.pdf" download="my-document.pdf">
    Download Document
</a>

<a href="mailto:contact@example.com?subject=Hello&body=Hi there">
    Send Email
</a>
            

🖼️ HTML Images Overview

What are HTML Images?

HTML images are displayed using the <img> element. Images enhance web pages by providing visual content, icons, diagrams, and photographs.

Basic Image Structure

<img src="image.jpg" alt="Description">

The src attribute specifies the image source, and alt provides alternative text.

🖼️ Image Attributes

Essential Image Attributes

Attribute	Description	Required	Example
src	Image source URL	Yes	src="photo.jpg"
alt	Alternative text	Yes	alt="Beautiful sunset"
width	Image width in pixels	No	width="300"
height	Image height in pixels	No	height="200"
title	Tooltip text	No	title="Click to enlarge"
loading	Loading behavior	No	loading="lazy"

Image Examples

Sample Image

Demo image placeholder

<!-- Basic Image -->
<img src="photo.jpg" alt="Beautiful landscape">

<!-- Image with Size -->
<img src="logo.png" alt="Company Logo" width="200" height="100">

<!-- Image with Loading Optimization -->
<img src="large-image.jpg" 
     alt="Large image" 
     width="800" 
     height="600" 
     loading="lazy">

<!-- Image with Title -->
<img src="chart.png" 
     alt="Sales Chart" 
     title="Click to view full size">
                

📁 Image Formats

Common Web Image Formats

Format	Extension	Best For	Features
JPEG	.jpg, .jpeg	Photos, complex images	Lossy compression, small file size
PNG	.png	Graphics, logos, transparency	Lossless compression, transparency
GIF	.gif	Simple animations, icons	Animation, limited colors
WebP	.webp	Modern web images	Better compression than JPEG
SVG	.svg	Vector graphics, icons	Scalable, small file size

📱 Responsive Images

Picture Element for Responsive Images

<picture>
    <source media="(min-width: 800px)" srcset="large-image.jpg">
    <source media="(min-width: 400px)" srcset="medium-image.jpg">
    <img src="small-image.jpg" alt="Responsive image">
</picture>
                

Provides different images for different screen sizes.

Srcset Attribute for High-DPI Displays

<img src="image.jpg" 
     srcset="image.jpg 1x, image-2x.jpg 2x, image-3x.jpg 3x" 
     alt="High-resolution image">
                

Provides different resolution images for different pixel densities.

📊 Figure and Figcaption

Semantic Image with Caption

<figure>
    <img src="chart.png" alt="Sales growth chart">
    <figcaption>
        Figure 1: Sales growth from 2020 to 2025 showing a 150% increase.
    </figcaption>
</figure>
                

Use <figure> and <figcaption> for images with captions or diagrams.

✅ Best Practices

                ✅ Link Best Practices:
                Descriptive Link Text: Use meaningful text, not "click here"
External Links: Use target="_blank" with rel="noopener"
Accessibility: Ensure links are keyboard accessible
Visual Indicators: Make links visually distinct
Broken Links: Regularly check and fix broken links

            

                ✅ Image Best Practices:
                Always Use Alt Text: Required for accessibility
Optimize File Sizes: Compress images for web
Use Appropriate Formats: JPEG for photos, PNG for graphics
Responsive Images: Use srcset and picture elements
Lazy Loading: Use loading="lazy" for below-fold images
Descriptive Alt Text: Describe the image content

            

❌ Common Mistakes:

Missing Alt Text: Always provide alternative text
Generic Link Text: Avoid "click here" or "read more"
Large Image Files: Optimize images before uploading
Missing Images: Provide fallback for missing images
Broken Links: Test all links regularly

📚 Complete Example

Real-World Links and Images Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Links and Images Example</title>
</head>
<body>
    <header>
        <nav>
            <a href="#home">Home</a>
            <a href="#about">About</a>
            <a href="#contact">Contact</a>
            <a href="https://github.com" target="_blank" rel="noopener">GitHub</a>
        </nav>
    </header>
    
    <main>
        <section id="home">
            <h1>Welcome to Our Website</h1>
            <img src="hero-image.jpg" alt="Beautiful landscape" width="800" height="400">
            
            <figure>
                <img src="product-chart.png" alt="Product performance chart">
                <figcaption>Figure 1: Our product performance over the last year</figcaption>
            </figure>
        </section>
        
        <section id="contact">
            <h2>Contact Us</h2>
            <p>Email us at <a href="mailto:contact@example.com">contact@example.com</a></p>
            <p>Call us at <a href="tel:+1234567890">(123) 456-7890</a></p>
            <p>Download our <a href="brochure.pdf" download>company brochure</a></p>
        </section>
    </main>
    
    <footer>
        <p><small>© 2025 Company Name. All rights reserved.</small></p>
    </footer>
</body>
</html>
                

🔗 HTML Links and Images

Complete Guide to Links and Images in HTML