Learn how to create links that connect web pages and how to insert images.
1. Link Tag (a - Anchor)
The <a> tag creates a hyperlink that navigates to another page, to a specific location on the same page, to a file, or to an email address.
Basic Usage
<a href="address to navigate to">link text</a>
href Attribute (Hypertext Reference)
<!-- Link to an external website -->
<a href="https://www.naver.com">Naver</a>
<!-- Another HTML file in the same folder -->
<a href="about.html">About Page</a>
<!-- A file in the parent folder -->
<a href="../index.html">Back to Home</a>
<!-- A specific location on the page (anchor link) -->
<a href="#section2">Go to Section 2</a>
<h2 id="section2">Section 2</h2>
<!-- Email link -->
<a href="mailto:[email protected]">Send an Email</a>
<!-- Phone link (opens the phone app when tapped on a mobile device) -->
<a href="tel:+15551234567">+1 (555) 123-4567</a>
target Attribute - How the Link Opens
<!-- Open in the current tab (default) -->
<a href="https://www.google.com" target="_self">Google (current tab)</a>
<!-- Open in a new tab -->
<a href="https://www.google.com" target="_blank">Google (new tab)</a>
rel Attribute - Declaring the Link Relationship
<!-- When opening in a new tab, rel="noopener noreferrer" is recommended for security -->
<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
Google (opened safely in a new tab)
</a>
Security note: When you use
target="_blank", always userel="noopener noreferrer"together with it.
If you leave it out, the page you opened may be able to manipulate the original page, which creates a security vulnerability.
2. Image Tag (img)
The <img> tag inserts an image. It is a void element, so it has no closing tag.
Basic Usage
<img src="image path" alt="image description">
Key Attributes
<!-- src: path to the image file (required) -->
<!-- alt: alternative text describing the image (required) -->
<img src="photo.jpg" alt="Photo of Namsan Tower in Seoul">
<!-- width, height: image size (pixels or percentages) -->
<img src="logo.png" alt="Company logo" width="200" height="100">
<!-- If you set only the width, the height is adjusted automatically to keep the aspect ratio -->
<img src="banner.jpg" alt="Banner image" width="800">
Why the alt Attribute Matters
<!-- alt matters in three situations -->
<!-- 1. When the image fails to load: the alt text is shown instead -->
<img src="missing-file.jpg" alt="Photo description">
<!-- 2. Screen readers: the tools used by visually impaired people read the alt text aloud -->
<img src="chart.png" alt="Graph showing revenue growth in the first quarter of 2026">
<!-- 3. SEO: search engines understand what the image shows from the alt text -->
<!-- For purely decorative images, leave alt empty -->
<img src="decoration.png" alt="">
3. Absolute Paths vs Relative Paths
Absolute Path
<!-- Internet URL (external image) -->
<img src="https://www.example.com/images/photo.jpg" alt="External image">
<!-- Path starting from the server root -->
<img src="/images/logo.png" alt="Logo">
Relative Path
The path is calculated from the location of the current HTML file.
project/
├── index.html ← current file
├── about.html
├── images/
│ ├── logo.png
│ └── banner.jpg
└── pages/
└── contact.html
<!-- An image in the images folder, referenced from index.html -->
<img src="images/logo.png" alt="Logo">
<img src="images/banner.jpg" alt="Banner">
<!-- A file in the same folder, referenced from index.html -->
<a href="about.html">About</a>
<!-- A file in a subfolder, referenced from index.html -->
<a href="pages/contact.html">Contact</a>
<!-- An image in the parent folder, referenced from pages/contact.html -->
<img src="../images/logo.png" alt="Logo">
<!-- ../ means the parent folder -->
4. figure and figcaption
These tags group an image and its caption (description) in a meaningful way.
<figure>
<img src="https://picsum.photos/400/300" alt="Random landscape photo">
<figcaption>Photo 1: A beautiful natural landscape (source: Lorem Picsum)</figcaption>
</figure>
<!-- You can also group several images into a single figure -->
<figure>
<img src="before.jpg" alt="Before the change">
<img src="after.jpg" alt="After the change">
<figcaption>Website redesign: before and after comparison</figcaption>
</figure>
<!-- You can group code in a figure as well -->
<figure>
<pre><code>
function hello() {
console.log("Hello!");
}
</code></pre>
<figcaption>Example 1: An example of a JavaScript function declaration</figcaption>
</figure>
5. Creating Image Links
If you put an <img> inside an <a> tag, it becomes a clickable image link.
<!-- Clicking the image navigates to that page -->
<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
<img src="google-logo.png" alt="Go to the Google homepage">
</a>
Summary
| Tag/Attribute | Description |
|---|---|
<a> |
Hyperlink |
href |
Destination (URL, file path, #id, mailto:, tel:) |
target="_blank" |
Open in a new tab |
rel="noopener noreferrer" |
Security setting for new tabs |
<img> |
Inserts an image (void element) |
src |
Image path |
alt |
Alternative text for the image |
width, height |
Image size |
<figure> |
Groups an image or other media with its caption |
<figcaption> |
The caption of a figure |
| Absolute path | Starts with / or https:// |
| Relative path | Based on the current file location (./, ../) |
Next Steps
- Example file - Portfolio gallery example
- Check the assignment - Build a bookmarks page
- Next lesson: Tables