Practical lab: build an event page
Combine structure, media context and form semantics into one page.
- Compose a complete semantic page section
- Combine heading, figure and signup form
- Produce stable readable content output
Real pages combine multiple HTML fundamentals at once. In this lab you will build an event page section with a heading, descriptive media context, and a small signup form. This mirrors a typical content + conversion flow.
1<main>
2 <h1>Community robotics night</h1>
3 <figure>
4 <img src="robotics.jpg" alt="Students testing line-following robots">
5 <figcaption>Hands-on demo stations open from 6 pm.</figcaption>
6 </figure>
7 <form>
8 <label for="name">Name</label>
9 <input id="name" name="name" required>
10 <button type="submit">Reserve a spot</button>
11 </form>
12</main>Community robotics night Students testing line-following robots Hands-on demo stations open from 6 pm. Name Reserve a spot
Keep reading order logical: intro first, supporting media second, action area next. Consistent structure improves readability for everyone and gives assistive tools predictable landmarks.
Key takeaways
Build pages by composing semantic building blocks.
Keep heading, media context and actions in a clear order.
Small structural choices have big usability impact.
Lesson quiz
5 questions · pass with 4 correct · up to 50 XP
Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.
Practice: write HTML
Write the markup, preview it in a sandboxed browser frame, and check the visible text against the requirements.
Build the event section
Create a main section with heading Community robotics night, a figure image alt Students testing line-following robots, figcaption Hands-on demo stations open from 6 pm., a label Name, and a submit button Reserve a spot.
- Event section text
Your markup is previewed in a sandboxed frame. Run tests to check the visible page text.
Questions about this lesson
Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.
Loading posts…