Project: build a real business site in plain HTML
A client sends you their words and their prices. You build the whole site: the page, the menu, the prices and pictures, the enquiry form, and the part that search engines read. No CSS, no JavaScript.
By the end you can
- Turn a page of plain words into a proper web page
- Build a menu that works with a keyboard
- Show prices, pictures and questions in the right tags
- Build an enquiry form whose answers actually reach you
- Finish a page so Google and WhatsApp understand it
step 1 of 5
The job, and the page
This is how the work really arrives. A client sends their words in a message, and you turn them into a web page. Nothing on the right is marked up. Every tag is yours.
No CSS and no JavaScript in this project, on purpose. A page that is right in plain HTML is what everything else is built on. A page that is wrong here cannot be rescued by making it pretty later.
Here is what this page needs. A title and a description in the head. A header holding the business name and its tagline. A main area with two sections, each with a heading. The dishes as a list. A footer with a phone number that dials when tapped.
Choose each tag by what the words are, not by how you imagine them looking. The business name is the one h1. Each section gets an h2. The dishes are an unordered list, because the order of the dishes means nothing.
Work in order: the head first, then the three big regions, then fill them in.
the shape you are aiming for
<title>...</title>
<meta name="description" content="..." />
<header>
<h1>...</h1>
<p>...</p>
</header>
<main>
<h2>...</h2>
<p>...</p>
</main>
<footer>
<p>... <a href="tel:...">...</a></p>
</footer>What these words mean
- landmark
- A named region of the page: header, main, footer, nav.
- one h1
- The name of the page. Everything else is h2 or smaller.
- tel: link
- A link that starts a phone call. Keep the number in full international form.
- description
- One sentence about the page, shown under your Google result.
Easy to get wrong
Wrapping each line in a div and planning to style it later
Choosing the tag that matches the words
Divs say nothing, so the page is invisible to search engines and unusable by anyone not looking at the screen. You also throw away every behaviour HTML would have given you free.
A phone number as plain text
<a href="tel:+233200000000">020 000 0000</a>
Most of your visitors are on a phone. A tel link turns the number into one tap, instead of copying, switching apps and pasting.
What we check
- The page has a real title
- There is a description for search results
- The business name is the h1, inside the header
- Main holds two sections, each with a heading
- The About paragraph is a paragraph
- The dishes are an unordered list
- The footer's phone number dials
- Nothing fell back to a div