Why a Mini Project Now
Learning tags one at a time is necessary, but it doesn't show you how they fit together. Today's project is a checkpoint — a chance to build one small, real page using headings, text formatting, links, images, lists, tables, forms, and semantic structure, all in the same document.
- ✓No new tags today — this lesson is entirely about combining what Days 1–14 covered.
- ✓The result is a single, self-contained static page: no CSS yet, just clean, well-structured HTML.
- ✓This same page becomes the foundation you'll style once CSS starts on Day 16.
What You're Building
A simple one-page profile or small-business site — pick whichever feels more natural to you. It needs a header with navigation, a hero introduction, a content section with a list or table, an image, a contact form, and a footer.
<header>, <nav>, <ul>/<li>, <a>
<section>, <h1>, <p>, <img>
<main>, <article>, <h2>, lists or a <table>
<form>, <label>, <input>, <textarea>, <button>
<footer>, <p>, <a>
Sketch the Page Before You Code It
Before opening the editor, map the page as an outline. This is the same shape your finished HTML will follow — semantic sections nested in a logical order, each with one clear job.
Header & Navigation
Start from the top of the document. The header holds the site identity and the main navigation, wrapped in semantic tags rather than generic divs.
<header> <h1>Riya's Bakery</h1> <nav> <ul> <li><a href="#hero">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#contact">Contact</a></li> </ul> </nav> </header>
Introduction, Image & a List
Inside <main>, the hero introduces the page, and the about section backs it up with real content — here, a short list of highlights.
<main> <section id="hero"> <h2>Fresh bakes, every morning</h2> <p>Small-batch bread and pastries baked daily in Haridwar.</p> <img src="bakery.jpg" alt="Fresh loaves cooling on a wooden shelf"> </section> <section id="about"> <h2>Why people come back</h2> <ul> <li>Baked fresh before 7am, daily</li> <li>No preservatives, ever</li> <li>Local wheat, sourced weekly</li> </ul> </section>
Every <img> needs a meaningful alt attribute — you covered this back on Day 5 and again in Day 13's accessibility lesson. Today's project is where that habit actually has to stick.
A Real, Labeled Form
Close the main content with a form. Every input needs a matching <label> — this is one of the most common mistakes beginners skip, and one of the easiest to get right.
<section id="contact"> <h2>Get in touch</h2> <form> <label for="name">Name</label> <input type="text" id="name" name="name" required> <label for="message">Message</label> <textarea id="message" name="message"></textarea> <button type="submit">Send</button> </form> </section> </main> <footer> <p>© 2026 Riya's Bakery</p> </footer>
What It Looks Like, Unstyled
With zero CSS, the page won't look polished — but it should already be readable, navigable, and correctly structured. That's the whole point: good HTML stands on its own before any styling touches it.
Fresh bakes, every morning
Small-batch bread and pastries baked daily in Haridwar.
Check the Page, Not Just Write It
Breaking Down What You Just Built
Semantic structureheader, nav, main, section, and footer replace generic divs for every major region.
Working navigationIn-page links using href="#id" jump straight to matching section IDs.
Accessible imagesEvery img carries a meaningful alt describing what it actually shows.
Labeled form fieldsEvery input and textarea is paired with a label using matching for/id.
Valid, checked HTMLThe page was reloaded and validated along the way, not just written once.
Try It Yourself
Swap the bakery example for your own idea — a personal portfolio, a study group, a local shop. Keep the same section shape (header, hero, about, contact, footer) but write every line of content yourself.
Build Your Complete Static Page
Bringing Module 01 and 02 together
Create day15.html as a full, standalone document — this is the file you'll style starting Day 16.
- Set up the full document shell — doctype, html, head with a title, and body.
- Build a header with a site name and a nav linking to at least three in-page sections.
- Add a hero section with a heading, a paragraph, and one image with proper alt text.
- Add a content section with either a list or a table of at least four items.
- Add a contact form with at least two labeled inputs and a submit button.
- Close with a footer, then open the page in a browser and check every link and tag.
Recap
Sketching the page as an outline before coding keeps the structure clean and intentional.
header, main, section, and footer give the page meaning that a div never could.
Alt text and form labels aren't extras — they're part of writing the tag correctly.
This page carries forward as the base you'll style starting with Day 16's CSS module.
Key Takeaways
- A mini project is where scattered tag knowledge turns into one coherent, working page.
- Semantic elements — header, nav, main, section, footer — describe the page's structure, not just its appearance.
- In-page navigation links pair an href="#id" with a matching id attribute on the target section.
- Every image needs alt text, and every form input needs a properly linked label — no exceptions.
- Reload and validate as you build, rather than writing the whole page before checking it once.