HTML Free Section Starter Challenge 15 min

1. Modern HTML5 Document Anatomy & Semantic Tags

Overview: Learn the standard HTML5 doctype, head metadata, and core semantic layout tags.

Concept & Syntax Guide

Every modern webpage starts with `<!DOCTYPE html>`. Semantic tags like `<header>`, `<main>`, `<section>`, and `<footer>` describe their meaning to both the browser and search engines, creating accessible and SEO-friendly web architecture.

Hands-On Practice Exercise

Create a Semantic Website Header & Hero

Add a `<header>` containing an `<h1>` with text "Welcome to Stro Hafta" and a `<p>` with text "Discover website templates". Wrap both in a `<main>` container.

Target Output: Welcome to Stro Hafta

Need a hint? Click here to reveal

Hint: Check syntax carefully and make sure your code contains: Welcome to Stro Hafta

HTML Code Editor

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
<head>
  <title>My First Page</title>
</head>
<body>
  <!-- Write your semantic HTML below -->
  <main>
    
  </main>
</body>
</html>