<!-- Links — <a> is "anchor" -->
<!-- Absolute URL -->
<a href="https://example.com">Visit Example.com</a>
<!-- Relative URL — links within your site -->
<a href="about.html">About page</a>
<a href="../index.html">Go up one directory</a>
<a href="#section2">Jump to section 2 on this page</a>
<!-- Open in new tab (with security attributes) -->
<a href="https://example.com" target="_blank" rel="noopener noreferrer">
External link
</a>
<!-- Email link -->
<a href="mailto:alice@example.com">Email Alice</a>
<!-- Phone link (useful on mobile) -->
<a href="tel:+15551234567">Call us</a>
<!-- Images -->
<!-- src: image path; alt: description for screen readers and broken images -->
<img src="cat.jpg" alt="A tabby cat sitting on a keyboard">
<!-- Image with dimensions (helps browser lay out page before image loads) -->
<img src="logo.png" alt="Company Logo" width="200" height="100">
<!-- Image from URL -->
<img src="https://via.placeholder.com/300x200" alt="Placeholder image">
<!-- Responsive image (described in srcset) -->
<img
src="photo-800.jpg"
srcset="photo-400.jpg 400w, photo-800.jpg 800w, photo-1200.jpg 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
alt="A responsive photo"
>
<!-- Image as a link -->
<a href="https://example.com">
<img src="logo.png" alt="Go to homepage">
</a>