0
0
HTMLmarkup~30 mins

Why semantic HTML matters - See It in Action

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Why Semantic HTML Matters
📖 Scenario: You are creating a simple webpage for a local community event. You want to make sure the page is easy to understand for everyone, including people using screen readers and search engines.
🎯 Goal: Build a basic webpage using semantic HTML elements to organize the content clearly and accessibly.
📋 What You'll Learn
Use semantic HTML5 elements like
,
Include a heading and navigation menu inside the header.
Add a main section with at least one article describing the event.
Include a footer with contact information.
Ensure the HTML structure is clear and meaningful.
💡 Why This Matters
🌍 Real World
Semantic HTML is used in all professional websites to make content clear and accessible to everyone, including people with disabilities and search engines.
💼 Career
Web developers must write semantic HTML to build accessible, SEO-friendly websites that meet modern web standards and legal accessibility requirements.
Progress0 / 4 steps
1
Create the basic HTML structure
Write the basic HTML5 skeleton with lang="en" in the <html> tag and include <head> with <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1.0">. Add an empty <body> tag.
HTML
Need a hint?
Start with the basic HTML5 document structure including language and meta tags for character set and viewport.
2
Add semantic header with navigation
Inside the <body>, add a <header> element. Inside it, add an <h1> with the text "Community Event" and a <nav> element containing an unordered list with three links: "Home", "About", and "Contact".
HTML
Need a hint?
Use
for the top section,

for the main title, and

3
Add main content with an article
Below the header, add a <main> element. Inside it, add a <section> with an <article>. The article should have an <h2> with the text "Event Details" and a paragraph describing the event: "Join us for a fun day of community activities and food!"
HTML
Need a hint?
Use
for the main content,
to group content, and
for the event description.
4
Add a footer with contact info
At the bottom of the <body>, add a <footer> element. Inside it, add a paragraph with the text "Contact us at info@community.org".
HTML
Need a hint?
Use
for the bottom section and add a paragraph with the contact email.