HTML, CSS & JavaScript · Chapter 1.7 · Intermediate level

Modern Semantic HTML5 (Mini Portfolio Project!)

मॉडर्न HTML5 और अपना पहला पोर्टफोलियो पेज!

Congratulations on reaching the final HTML chapter! Professional developers organize a full webpage just like the human body: Head at the top (<header> for logo & title) + Navigation menu (<nav> for top links) → Main body in the middle (<main> for real content) → Feet at the bottom (<footer> for copyright info). These meaningful tags are called Semantic HTML5!

बधाई हो, आप HTML के आख़िरी चैप्टर पर आ गए! असली प्रोफेशनल वेबसाइट्स इंसान के शरीर की तरह तीन हिस्सों में सजती हैं: सबसे ऊपर सिर (<header> लोगो और टाइटल के लिए + <nav> मेन्यू बार) → बीच में मुख्य हिस्सा (<main> असली कंटेंट के लिए) → सबसे नीचे पैर (<footer> कॉपीराइट जानकारी के लिए)। इन्हें Semantic HTML5 कहते हैं!

Open this chapter in the live classroom HTML, CSS & JavaScript course outline

In the classroom you can run and edit this code in your browser, get hints and mark the chapter as done. क्लास में यह code ब्राउज़र में चलाकर बदल सकते हो।

Words and symbols in this chapter

<header>: Top banner of the website (holds site title, logo, and menu).; वेबसाइट का सबसे ऊपरी हिस्सा (जहाँ नाम, लोगो और मेन्यू होता है)।
<nav>: Navigation bar holding menu links (Home, Projects, Contact).; नेविगेशन मेन्यू पट्टी (जहाँ Home, Projects जैसे लिंक्स होते हैं)।
<main>: Main content area where your primary bio, skills, and articles live.; वेबसाइट का मुख्य भाग जहाँ असली जानकारी और प्रोजेक्ट्स रहते हैं।
<footer>: Bottom strip of the webpage (copyright © 2026, contact note).; वेबसाइट की सबसे निचली पट्टी (जहाँ © 2026 कॉपीराइट लिखा होता है)।

Ready example

<header>
  <h1>🚀 Aarav's Developer Portfolio</h1>
  <nav>
    <a href="#about">About Me</a> | <a href="#skills">My Skills</a>
  </nav>
</header>

<main>
  <h3>About Me</h3>
  <p>Namaste! Main ek student aur future <b>AI Engineer</b> hun.</p>
  <h3>My Skills</h3>
  <ul>
    <li>HTML5 Website Design</li>
    <li>Python & AI Learning</li>
  </ul>
</main>

<footer>
  <p>© 2026 Built at TrueVacancy Coding Academy</p>
</footer>

What you will see: A complete, structured personal portfolio webpage renders live — you are officially an HTML Master!

आपका पूरा प्रोफेशनल पोर्टफोलियो वेबपेज तैयार होकर दिखेगा — अब आप HTML मास्टर बन गए!

Line by line

<header> ... <nav>...</nav> </header>: Builds the top website header with title and navigation bar.; ऊपर का हेडर और मेन्यू बार तैयार करता है।
<main> ... </main>: Contains the main About Me paragraph and Skills bullet list.; बीच के मुख्य हिस्से में परिचय और स्किल्स की लिस्ट रखता है।
<footer> ... </footer>: Adds a clean professional copyright footer at the bottom.; सबसे नीचे कॉपीराइट फ़ूटर जोड़ता है।

Common mistake

✗ Wrong

<head><h1>My Website</h1></head>

✓ Right

<header><h1>My Website</h1></header>

<header> is the visible top banner of your page, whereas <head> is only for invisible browser metadata!

<header> वेबपेज का दिखने वाला ऊपरी बैनर होता है, जबकि <head> में सिर्फ़ ब्राउज़र की छुपी सेटिंग्स रहती हैं!

Your task

Build your complete Mini Portfolio using <header>, <main>, and <footer> tags!

<header>, <main>, और <footer> तीनों टैग्स का उपयोग करके अपना खुद का मिनी पोर्टफोलियो पेज बनाओ!

Put your portfolio title inside <header>...</header>.
<header>...</header> में अपने पोर्टफोलियो का टाइटल लिखो।
Write about yourself or your hobbies inside <main>...</main>.
<main>...</main> में अपने बारे में या अपनी हॉबीज़ लिखो।
Add copyright text inside <footer>...</footer> and click ▶ Run & Preview!
<footer>...</footer> में कॉपीराइट लिखकर ▶ Run & Preview दबाओ!

Starter code for the task

<header>
  <h1>🌟 Mera Portfolio Page</h1>
</header>

<!-- TODO 1: main tag banao, andar h3 "Mere Baare Mein" aur ek p paragraph likho -->

<!-- TODO 2: footer tag banao jisme copyright line ho: © 2026 Apna Naam -->

Do this task in the classroom: your code is checked automatically and you get hints if something is missing.

Recap

Semantic tags describe their meaning: <header>, <nav>, <main>, <footer>.
<header> = top (title, menu), <main> = the real content, <footer> = bottom (copyright).
<head> holds page settings, <header> is the visible top part — do not mix them up.

Semantic टैग अपना मतलब बताते हैं: <header>, <nav>, <main>, <footer>।
<header> = ऊपर (टाइटल, मेन्यू), <main> = असली content, <footer> = नीचे (copyright)।
<head> में पेज की सेटिंग्स होती हैं, <header> दिखने वाला ऊपरी हिस्सा है — दोनों में गड़बड़ मत करो।

Quick quiz

Which semantic HTML5 tag belongs at the very bottom of a webpage (for copyright/links)?

वेबपेज के सबसे निचले हिस्से (कॉपीराइट/संपर्क) के लिए कौन-सा HTML5 टैग है?

<header>
<nav>
<main>
<footer>

Show the answer

Answer: D (<footer>)

<footer> represents the bottom section of a modern HTML5 page.

<footer> वेबसाइट की सबसे निचली पट्टी बनाता है।

Practice problems for this chapter

School Website Layout (semantic HTML5) · Intermediate · Write the code
स्कूल वेबसाइट का ढाँचा (semantic HTML5)

Solve them in the Practice Zone, where each answer is checked automatically and two hints are available.