HTML Links and Images - Make Your Page Interactive

Links connect pages; images add visuals. Essential for engaging websites.

This tutorial covers <a> for hyperlinks and <img> for pictures.

1. HTML Links (<a> Tag)

The anchor tag creates clickable links.

              
HTML

          External and internal links
        
<a href="https://codecrown.in">Visit CodeCrown</a>
<a href="about.html">About Page</a>
<a href="#section1">Jump to Section</a>

Attributes: href (destination), target="_blank" (new tab).

2. HTML Images (<img> Tag)

Embed images with src (path) and alt (description for accessibility).

              
HTML

          Image example
        
<img src="logo.png" alt="CodeCrown Logo" width="200" height="100">
<img src="https://example.com/photo.jpg" alt="Sample Image">

Supported formats: JPG, PNG, GIF, SVG.

3. Image as Link

              
HTML

          Clickable image
        
<a href="https://codecrown.in">
    <img src="logo.png" alt="Home" width="150">
</a>

4. Complete Example

              
            
HTML

          Page with links and images
        
<!DOCTYPE html>
<html>
<head>
    <title>Links & Images</title>
</head>
<body>
    <h1>My Portfolio</h1>
    <p>Check my <a href="projects.html">projects</a>.</p>
    <img src="profile.jpg" alt="Profile Photo" width="300">
    <p><a href="https://github.com">GitHub</a></p>
</body>
</html>

5. Important Attributes

Links: href, title (tooltip), rel="nofollow".

Images: src, alt (required), width/height, loading="lazy".

6. Best Practices

- Always use alt text for images (SEO/accessibility).

- Use relative paths for local files: src="images/pic.jpg".

- Open external links in new tab: target="_blank".

7. Common Errors

- Broken images (wrong src path).

- No alt attribute.

- Missing href in <a>.

8. Next Steps

- Lists (<ul>, <ol>)

- Tables (<table>)

- Forms (<form>)

Conclusion

Links and images bring your page to life.

Test links and optimize images for faster loading.