Module 3 of 10 · 8 lessons
HTML Links and Images Tutorial: Paths, Media, iframe
Links between pages, file paths, images, figures, audio, video, embeds.
Links turn a pile of pages into a web. Images, audio and video give people a reason to stay. In this module you connect pages to each other and add media the right way.
You start with links: the <a> element and its href attribute. Relative and absolute paths covers pointing to a page on your own site and to a page somewhere else. Beginners get this wrong more than anything else, and the result is a broken link. Both kinds are a URL (opens in a new tab), the address format of the web. New tabs and page jumps deals with target="_blank" and with linking to a section of the same page through an id.
Then you add images with <img>, giving each one a width, a height and alt text that says something. Figures and captions keep an image and its caption together. Audio and video uses the players built into the browser, with controls and fallback sources. Embedding with iframe shows how a map or a video from another site ends up on your page. An iframe and image code generator (opens in a new tab) such as htmlcheatsheet.com is handy for checking the attributes.
Missing alt attributes and wrong paths turn up on real websites every day. Text alternatives are also the very first requirement in WCAG 2.2 Non-text Content (opens in a new tab). Get them right and your pages work for screen reader users, load faster and make more sense to search engines.
The module finishes with a travel postcard project: a figure, a caption, a few links and a jump link. Plan about an hour.
What you will learn
- Link to other pages, other sites, email addresses and sections of a page
- Pick a relative or an absolute path and repair broken links
- Open a link in a new tab safely, and only when the user gains something
- Add images with width, height and alt text that helps
- Pair media with a caption using figure and figcaption
- Embed audio, video and outside content with controls and fallbacks
Lessons
- Links Make links with the a element, and give them link text that makes sense.
- Relative and Absolute Paths Pick relative or absolute paths, and write both without mistakes.
- New Tabs and Page Jumps Link to a spot on the same page, and open links in a new tab.
- Images Fix the bugsShow an image with img, the right src and helpful alt text.
- Figures and Captions Tie an image to its caption with figure and figcaption.
- Audio and Video Add video and audio with controls, several sources and fallback text.
- Embedding with iframe Embed another page in an iframe, with a title and a size.
- Project: Travel Postcard ProjectBuild a postcard page that has a captioned image, media, page jumps and links.
Frequently asked questions
How do I make a link in HTML?
Use the <a> element. Its href attribute holds the address, and the clickable text goes between the tags: <a href="https://example.com">Visit Example</a>. For pages on your own site, a relative path like about.html is enough. Write link text that says where the link goes. "Click here" tells nobody anything.
What is the difference between a relative and an absolute path?
An absolute path is the full address with protocol and domain, such as https://example.com/images/cat.jpg. A relative path starts from the current file, such as images/cat.jpg or ../index.html. Use absolute paths for other websites and relative paths inside your own site. Then your internal links still work if the domain ever changes.
Why is alt text important for images?
The alt attribute describes an image for people who cannot see it: screen reader users, and anyone whose image failed to load. Search engines read it too, as Google explains in its image SEO best practices (opens in a new tab). Describe what the image shows or does in a short phrase. A decorative image gets an empty alt="", and screen readers skip it.