Welcome to this HTML links and images tutorial. Here you’ll learn how to connect pages together using links, embed images the right way, and add audio, video, and embedded content to your web pages.
This is Tutorial 3 of 8 in our complete HTML series on Tutorials Ocean’s HTML category. If you missed it, check out Tutorial 2: Text Formatting & Semantic Tags first.
HTML Links: The Anchor Tag
Links are what make the web “web” — they connect pages to each other. In HTML, links are created using the anchor tag.
<a href="https://tutorialsocean.com.pk">Visit Tutorials Ocean</a>
<a href="https://tutorialsocean.com.pk" target="_blank" rel="noopener">Open in new tab</a>
<a href="#section2">Jump to Section 2</a>
<a href="mailto:info@tutorialsocean.com.pk">Email Us</a>| Attribute | Purpose |
|---|---|
| href | The destination URL (required) |
| target=”_blank” | Opens the link in a new tab |
| rel=”noopener” | Security best practice when using target=”_blank” |
| href=”#id” | Jumps to an element on the same page (anchor link) |
Any solid HTML links and images tutorial should also mention email links — using mailto: inside href opens the visitor’s default email app automatically.
HTML Images: The img Tag
Images are added using a self-closing tag with a few important attributes.
<img src="logo.png" alt="Tutorials Ocean logo" width="200" height="100">| Attribute | Purpose |
|---|---|
| src | Path or URL to the image file |
| alt | Describes the image — used for accessibility and SEO |
| width / height | Sets image dimensions, prevents layout shift while loading |
Golden rule for any HTML links and images tutorial: Never skip the alt attribute. It helps screen readers describe the image to visually impaired users, and it helps search engines understand what the image shows.
Image Optimization Basics
Before uploading images to your website, keep these points in mind:
- Compress images before upload (use TinyPNG or similar tools)
- Use descriptive file names — “html-tutorial-cover.png” instead of “IMG_2043.png”
- Prefer WebP format when possible — smaller file size, same quality
- Always set width and height to avoid layout shift (a Google Core Web Vitals factor)
For the complete official reference on image attributes, check the MDN documentation on the img element.
HTML Audio & Video
HTML5 lets you embed audio and video natively — no plugins required.
<video controls width="400">
<source src="demo.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>- controls — shows play/pause/volume UI
- source — points to the actual media file, can list multiple formats for compatibility
- The text inside is a fallback message for old browsers
Embedding Content with iframe
Want to embed a YouTube video or Google Map? Use an iframe.
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="YouTube video player"
allowfullscreen>
</iframe>This is exactly how Tutorials Ocean embeds YouTube tutorials inside blog posts — same technique you’ll use once your videos are live.
Practice Exercise
Open your index.html file from Tutorial 2 and add a new “Portfolio” section.
Requirements:
- Add an <h2> titled “My Links”
- Add a link to your favorite learning website, opening in a new tab with rel=”noopener”
- Add one image with a proper, descriptive alt attribute and set width/height
- Add an anchor link that jumps to your “My Skills” section from Tutorial 2 (use an id + href=”#id”)
- Embed one YouTube video using an iframe
Bonus challenge: Add a mailto: link so visitors can email you directly from your page.
Save your file, refresh your browser, and click through your links to make sure everything works correctly.
What’s Next?
This completes Tutorial 3 of our HTML links and images tutorial series. In Tutorial 4, we’ll cover HTML tables — rows, columns, rowspan, colspan, and building a real data table from scratch.
This HTML links and images tutorial is part of the complete HTML series on Tutorials Ocean — practical, beginner-friendly web development tutorials. Follow along and build real projects as you learn.
