In this lesson you will
- Plan a page from content to code
- Combine every element from the course in one valid page
- Test a page with a validator and the keyboard
Step 1: plan the content before the code
Pick a real or imagined business: a tailor in Sharjah, a tutor in Riyadh, a car wash in Doha. Write down, in plain words, what a visitor needs in the first ten seconds: who you are, what you sell, what it costs, where you are and how to reach you. Each answer becomes a section with a heading.
Then sketch the outline as headings only: one h1 with the business name and what it does, then h2 for Services, Prices, Location and Contact. If the outline reads well on its own, the page will too.
Step 2: build the skeleton
Start from the full page skeleton: doctype, html with lang, and a head with charset, viewport, a specific title and a description. In the body, add a header with the name and a nav of jump links to your sections, one main, and a footer with the year and address. Give each section an id that matches its nav link.
Console
- Console messages, errors, form data and clicked links appear here.
Step 3: fill the sections, then test
Services are a ul. Prices are a table with a caption and th scope="col" headers. Add one photo in a figure with real alt text and width and height. In Contact, add a tel: link in international format, a mailto: link and a short enquiry form with labelled fields, a name on every field and a submit button.
When the checks below are all green, copy your code into a file called index.html and open it in your browser. Paste it into the W3C Nu HTML Checker and fix every error. Then put your mouse away and press Tab through the page: you should reach every link and field in a sensible order and always see where the focus is.
Next step: the CSS course styles this exact page, so keep your file. If you want an Arabic version, copy it, set lang="ar" dir="rtl", translate the text and link the two with hreflang as in the previous lesson.
Console
- Console messages, errors, form data and clicked links appear here.
Prices are sample numbers. Fill the form and submit it to see the data in the console.
Common mistakes
Starting with the design
Choosing colours before you know the content leads to pages that look nice and say little. Content and structure first, CSS after.
Only an image of the price list
A photo of a printed price list cannot be read by screen readers, zoomed cleanly on phones or found in search. Use a real table.
Skipping the validator
Browsers hide your mistakes. The validator shows them in seconds, and fixing them now saves hours when the CSS does not behave later.
Exercise
Complete the business page. The checks list every part you need: head tags, landmarks, a services list, a price table, a photo with alt text, contact links and a working enquiry form.
Console
- Console messages, errors, form data and clicked links appear here.
- Head: viewport meta tag
- Head: meta description
- A header with a nav of at least two jump links
- One main with the h1 inside
- At least three sections with an id and an h2
- A services list with at least three items
- A price table with a caption
- Table headers with scope
- A photo with alt text, width and height
- A phone link in international format
- An enquiry form with labelled fields
- Every form field has a name
- A page footer
Show one possible solution
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Al Wahda Tailoring Sharjah | Kanduras and Abayas</title>
<meta name="description" content="Made-to-measure kanduras and abayas in Al Wahda, Sharjah. Ready in 5 days.">
</head>
<body>
<header>
<strong>Al Wahda Tailoring</strong>
<nav aria-label="Main">
<a href="#services">Services</a> | <a href="#prices">Prices</a> | <a href="#contact">Contact</a>
</nav>
</header>
<main>
<h1>Made-to-measure tailoring in Sharjah</h1>
<figure>
<img src="https://needmytools.com/icon.svg" alt="Our shop sign on Al Wahda Street" width="160" height="160">
<figcaption>Find us opposite the bus stop.</figcaption>
</figure>
<section id="services">
<h2>Services</h2>
<ul>
<li>Kanduras</li>
<li>Abayas</li>
<li>Alterations</li>
</ul>
</section>
<section id="prices">
<h2>Prices</h2>
<table>
<caption>Prices in AED</caption>
<thead><tr><th scope="col">Item</th><th scope="col">Price</th></tr></thead>
<tbody>
<tr><td>Kandura</td><td>150</td></tr>
<tr><td>Abaya</td><td>200</td></tr>
</tbody>
</table>
</section>
<section id="contact">
<h2>Contact</h2>
<p><a href="tel:+97160000000">Call +971 6 000 0000</a> or <a href="mailto:hello@alwahda.example">email us</a>.</p>
<form method="post">
<p><label for="n">Name</label><br><input id="n" name="name" required></p>
<p><label for="m">Message</label><br><textarea id="m" name="message" required></textarea></p>
<button type="submit">Send enquiry</button>
</form>
</section>
</main>
<footer><p>© 2026 Al Wahda Tailoring, Sharjah</p></footer>
</body>
</html>Quick quiz
Finished the lesson?
Questions people ask
How do I put my finished page online for free?
Static hosts such as GitHub Pages, Cloudflare Pages and Netlify host plain HTML files on free plans, within their usage limits. Upload your index.html and you get a public address; the deployment course covers custom domains.
Can I use this project in my portfolio?
Yes, it is your own work. It is stronger if you build it for a real local business with their permission and real content, then improve it as you learn CSS and JavaScript.
Where does the enquiry form send its data?
Nowhere yet: HTML alone cannot receive or store messages. In the Node.js and APIs courses you build the server part that receives the form and emails or saves it.
Should I use a website builder instead?
Builders are fine for a quick site. Knowing HTML still helps you fix problems, improve speed and accessibility and move away from a builder later without losing your content.
I finished the HTML course. What should I learn next?
CSS, then JavaScript. CSS makes this same page look professional and work on every screen; JavaScript makes it interactive. Both courses are on the learning path on the course page, and new lessons are added there as they are finished.
Sources
Facts in this lesson were checked against these official pages on 20 October 2026.
- W3C Nu HTML Checker
- MDN: Structuring a page of content
- W3C WAI: Easy checks, a first review of web accessibility
- GitHub Docs: What is GitHub Pages?
Code examples stay in English and run in a sandbox on your device. Arabic text is pending native review. If you spot a mistake, tell us through the contact page.