0
0
HTMLmarkup~30 mins

Semantic elements and screen readers in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Using Semantic Elements for Screen Reader Accessibility
📖 Scenario: You are creating a simple webpage for a local community center. The page should be easy to navigate for everyone, including people who use screen readers. Using semantic HTML elements helps screen readers understand the page structure better.
🎯 Goal: Build a basic webpage layout using semantic HTML elements like , , , , and so that screen readers can easily identify the page parts.
📋 What You'll Learn
Use semantic HTML5 elements to structure the page
Include a header with a page title
Add a navigation menu with links
Create a main content area with two sections
Add a footer with contact information
Ensure the HTML is valid and accessible
💡 Why This Matters
🌍 Real World
Many websites need to be accessible to people with disabilities. Using semantic HTML elements is a simple way to improve accessibility and usability for screen readers.
💼 Career
Web developers must create accessible websites. Understanding semantic HTML and screen reader support is essential for front-end development jobs.
Progress0 / 4 steps
1
Create the basic HTML skeleton with semantic elements
Write the basic HTML5 structure including <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8"> and <title> 'Community Center'. Then add the main semantic elements inside <body>: <header>, <nav>, <main>, and <footer>.
HTML
Need a hint?
Start by typing the HTML5 document structure and add the main semantic elements inside the body.
2
Add content inside header and navigation
Inside the <header>, add an <h1> with the text 'Welcome to the Community Center'. Inside the <nav>, add an unordered list <ul> with three links: <a href="#home">Home</a>, <a href="#events">Events</a>, and <a href="#contact">Contact</a>.
HTML
Need a hint?
Put the page title inside the header as an h1. Then create a list of links inside nav.
3
Add two sections inside the main content
Inside the <main> element, add two <section> elements. The first section should have an <h2> with text 'Upcoming Events' and a paragraph <p> with 'Check out our latest events and activities.'. The second section should have an <h2> with text 'About Us' and a paragraph <p> with 'Learn more about our community center and services.'.
HTML
Need a hint?
Add two section elements inside main, each with an h2 and a paragraph describing the content.
4
Add contact info inside the footer
Inside the <footer>, add a paragraph <p> with the text 'Contact us at info@communitycenter.org or call 123-456-7890.'.
HTML
Need a hint?
Add a paragraph inside the footer with the contact email and phone number.