Links & Images in HTML
Links and images are two of the most common elements in HTML. Links connect one page to another, while images add visual content.
HTML Links
Links are created using the <a> (anchor) tag. Use the href attribute to define the destination.
<a href="https://www.example.com">Visit Example</a>
This creates a clickable link to Example.com.
Absolute vs Relative Links
- Absolute link: Points to a full URL (e.g.,
https://example.com/page.html). - Relative link: Points to a file in your project (e.g.,
about.html).
HTML Images
Images are added using the <img> tag. It uses the src attribute for the file path and alt for alternative text.
<img src="images/logo.png" alt="Website Logo">
Tip: Always include alt text for accessibility and SEO.
Linking Images
You can also wrap an image inside a link to make it clickable:
<a href="index.html">
<img src="images/home.png" alt="Home">
</a>
Practice Exercise
Try it yourself 🚀
👉 Create a file named links-images.html. Inside, add:
- A link to your favorite website.
- A relative link to another HTML file in your project.
- An image of your choice with proper
alttext. - A clickable image that links to another page.