HTML — Lesson 3
Links & Images
Adding hyperlinks and images to your pages.
Links & Images
Links and images are what make the web interconnected and visual. Let's explore how to use them.
Anchor Links (<a>)
The <a> tag creates hyperlinks. The href attribute specifies the destination URL.
<!-- External link -->
<a href="https://example.com">Visit Example</a>
<!-- Internal link -->
<a href="/about.html">About Us</a>
Link Attributes
- target="_blank" - Opens the link in a new tab
- rel="noopener" - Security measure when using target="_blank"
- title - Tooltip text shown on hover
<a href="https://example.com"
target="_blank"
rel="noopener"
title="Go to Example">
Open in New Tab
</a>
Images (<img>)
The <img> tag embeds images. It is a self-closing tag. The src attribute specifies the image path, and alt provides alternative text.
<img src="photo.jpg"
alt="A description of the image"
width="400">
Image Best Practices
- Always include the
altattribute for accessibility - Use descriptive alt text (e.g., "A red apple on a wooden table")
- Optimize images for web (JPEG for photos, PNG for graphics, WebP for modern)
- Specify width and height to prevent layout shifts
Tip: Use relative paths for your own images (e.g.,
images/photo.jpg) and absolute URLs for external images hosted elsewhere.
Practice what you learned in the Deoit Editor — a free, browser-based code editor.
Open Editor →