Code / Web Basics: HTML & CSS / Unit 5: Final project: your own page

A page with a proper structure सही बनावट वाला पेज

Lesson 13 of 14 · about 12 minutes · header, nav, main, section and footer.

⚡ 0 XP

Step 1 of 1

Semantic tags

Real websites are divided into clear parts. HTML has semantic tags whose names say what each part is:

<header> — the top: logo or name, often with the <h1>
<nav> — the main links
<main> — the main content (one per page)
<section> — a group of related content, usually with its own heading
<footer> — the bottom: address, phone, copyright

They look like plain <div>s, but they help screen readers, search engines and you.

Example

<header>
  <h1>Meera’s Mithai Shop</h1>
</header>
<nav>
  <a href="#sweets">Sweets</a>
  <a href="#contact">Contact</a>
</nav>
<main>
  <section id="sweets">…</section>
</main>
<footer>Open 9 am – 9 pm</footer>

`href="#sweets"` jumps to the element with `id="sweets"` on the same page.

🎯 Challenge: Build the page skeleton +20 XP

Below the header, add:

a <nav> with at least 3 links (they can point to #sweets, #about, #contact)
a <main> with at least one <section> that has a heading
a <footer> with some text (address or timings)

Try twice to unlock the solution (0/2)

index.htmlCtrl ⏎

Preview

Console

Output from console.log appears here.

Checklist

Press Run to check your code.

A <header> with an <h1>
A <nav> with at least 3 links
<main> has a <section> with a heading
A <footer> with text

Lesson notes (text version)

1. Semantic tags

Real websites are divided into clear parts. HTML has semantic tags whose names say what each part is:

<header> — the top: logo or name, often with the <h1>
<nav> — the main links
<main> — the main content (one per page)
<section> — a group of related content, usually with its own heading
<footer> — the bottom: address, phone, copyright

They look like plain <div>s, but they help screen readers, search engines and you.

                <header>
  <h1>Meera’s Mithai Shop</h1>
</header>
<nav>
  <a href="#sweets">Sweets</a>
  <a href="#contact">Contact</a>
</nav>
<main>
  <section id="sweets">…</section>
</main>
<footer>Open 9 am – 9 pm</footer>

Challenge: Build the page skeleton

Below the header, add:

a <nav> with at least 3 links (they can point to #sweets, #about, #contact)
a <main> with at least one <section> that has a heading
a <footer> with some text (address or timings)