Beginner level · Module 1: HTML for Structured Web Pages · Lesson 3 of 3
Links, Images and Forms
Link pages together, add images with meaningful alternative text and build forms whose fields are properly labelled.
In this lesson you will
- Write absolute and relative links and add accessible images
- Build forms with labels, input types and basic validation
Key concepts
relative and absolute URLsalt text<label for>input types and required
The lesson
Links use <a href>. Relative paths such as about.html or images/logo.png point within your site; absolute URLs such as https://example.org point elsewhere. Link text should say where it goes — 'View our timetable', not 'click here'.
Every <img> needs an alt attribute describing the image's purpose for people who cannot see it; decorative images get alt="". Set width and height so the page does not jump while images load.
Each form field needs a <label> linked with for and id, so clicking the label focuses the field and screen readers announce it. Input types such as email, tel and number bring suitable phone keyboards and basic checks; required marks mandatory fields.
Step by step
- Link the home page to an about page and back.
- Add an image with alt text, width and height.
- Build a contact form with labelled name, phone and message fields.
- Add input types and required attributes and test on a phone.
Practice activity
Complete the organisation profile with navigation links, two images and a contact form.
Expected result: All links work, every image has suitable alt text and every form field has a label.
Check your understanding
-
What should alt text describe?
Show answer
The purpose or content of the image for someone who cannot see it.
-
How is a label connected to an input?
Show answer
The label's for attribute matches the input's id.
Taught live by an instructor — online or in person. Free course lessons are for self-study and do not lead to a certificate — see registration options.