Milestone: a restaurant menu

What are you building, and why a menu?

You are building the menu page for Juniper Corner Cafe, a small place with a breakfast list, a drinks list and a few notes about allergens. Real cafes publish exactly this page, and people open it on a phone while standing outside deciding whether to go in. That gives you a clear test: can a hungry stranger find a dish, see its price and get directions in under ten seconds?

A menu is a good first milestone because it uses almost everything from the Text and Links and media groups without needing forms or layout tricks. Headings give it shape. Lists hold the dishes. Entities handle the pound sign and the ampersand in "Fish & Chips". Formatting marks the vegan dishes. An image shows the food, and links send people to a map or let them ring the cafe.

The course stops handing you every line from here. The task describes the result, the hints point to the lesson to reread, and the checker accepts any reasonable answer. Two people can build two different menus and both pass.

How should you plan the page before typing?

Write the outline as plain words first, on paper or in a comment. A cafe menu usually comes out like this: the cafe name, a one-line description with opening hours, a photo, then one block per menu section, then practical details such as address, phone and allergen notes. Each block becomes a heading, and the order of the headings is the order people scan.

Next, decide what each dish needs. Most menus show a name, a short description and a price. Some dishes carry a tag such as vegan or contains nuts. Writing this down stops you from inventing a new structure halfway through the drinks list.

Finally, list the things that must work: the image must have alt text, the price must be readable by a screen reader, and the directions link must open something useful. These become your own checklist at the end.

<!--
  Juniper Corner Cafe
  - intro + hours
  - photo
  - Breakfast (list)
  - Drinks (list)
  - Find us: address, map link, phone
-->

Which earlier lessons does each part use?

Every part of the menu maps to a lesson you have already done. If one part feels shaky, go back to that lesson before you write more code. The list below is also a useful order to build in, from the outline down to the details.

• Headings: one <h1> for the cafe name and an <h2> for each menu section. Sub-groups such as Hot drinks and Cold drinks become <h3>.
• Headings and paragraphs: the intro line, opening hours and allergen notes are paragraphs.
• Lists: each section is a <ul> with one <li> per dish. A description list (<dl>) also works, with the dish in <dt> and the description and price in <dd>.
• Text formatting: <strong> for the dish name if you want it to stand out with meaning, <em> or <small> for notes such as "(vegan)", and <s> for a dish that has sold out today.
• Entities: £ or € for prices, & in names like "Fish & Chips", and   to keep a price from wrapping away from its number.
• Images: one <img> with src, a descriptive alt, and width and height so the page does not jump while it loads.
• Links: a directions link to a map, a tel: link for bookings and a mailto: link for events.

How should each dish be marked up?

Keep every dish in one list item so the name, description and price travel together. A screen reader announces "list, 5 items", which tells the listener how long the section is before they start. Splitting a dish across a heading and a separate paragraph breaks that count and makes the page harder to scan.

Put the price in plain text with its currency symbol. A price inside an image or produced by CSS alone is invisible to search engines and to some assistive tech. Use a non-breaking space between the symbol and the number only if your design puts a space there; otherwise £8.50 stays together on its own.

Use <strong> for the dish name when the name is the most important part of the line. If you only want it bold for looks, a class and CSS is the honest choice, which you will meet later in the course. Either way, the dish name should come first so people reading down the list see names before prices.

<li>
  <strong>Fish &amp; chips</strong>, mushy peas
  <small>(contains gluten)</small> &pound;12.00
</li>

What makes the image and links useful?

The photo is there to make people hungry, so the alt text should say what the food is. "A bowl of shakshuka with bread on a wooden table" helps someone who cannot see the picture decide. "Food photo" or the file name tells them nothing. If you add a purely decorative image, such as a leaf divider, give it alt="" so screen readers skip it.

Write link text that makes sense on its own. Screen reader users often pull up a list of every link on a page, and a list of "click here" entries is useless. "Directions to Juniper Corner Cafe" and "Call 0113 496 0123" say exactly what will happen.

A tel: link should contain the number without spaces in the href, while the visible text can keep spaces for reading. If you open a map in a new tab with target="_blank", modern browsers apply noopener by default, but adding rel="noopener" makes the intent clear to the next reader.

<p>
  <a href="https://maps.example.com/?q=Juniper+Corner+Cafe">Directions to Juniper Corner Cafe</a><br>
  <a href="tel:+441134960123">Call 0113 496 0123</a>
</p>

How do you check your own work?

Run the checker first, then do the checks it cannot do. A machine can count headings and look for alt text. It cannot tell whether your alt text is honest or your outline reads well.

• Outline test: read only the headings, top to bottom. They should read like a table of contents with no skipped levels.
• List test: in DevTools, open the Elements panel and confirm each dish is one <li> inside a <ul> or <ol>, with no stray text between items.
• Price test: search the page source for each price. If a price only exists in an image or a CSS content rule, move it into the HTML.
• Image test: change the src to a wrong file name and reload. The alt text appears in its place. Read it and ask whether it still sells the dish.
• Link test: press Tab through the page. Every link should get focus in a sensible order, and its text alone should say where it goes.
• Validator test: paste the page into the W3C Nu validator and fix anything it flags, such as a stray & that should be &.

Where do menu pages usually go wrong?

The most common problem is using headings for size. A dish name marked up as <h4> because it looks right makes the outline a mess of dozens of headings. Headings are for sections; dishes belong in lists.

The second is fake structure. People line up dishes and prices with rows of   or with a table they do not need. A table is fine when the menu really has columns, such as Small and Large prices for each drink, but it needs <th> headers then. For a plain name and price, a list is simpler and works better on a narrow phone screen.

The third is the raw ampersand. Writing "Fish & Chips" usually renders fine, which is why people miss it, but & is the safe habit and the validator will point out any ambiguous ones. AI tools also tend to add a whole <table> for the menu, generic alt text such as "delicious food" and links that say "here", so read their output with this list in mind.

What can you add once the basics pass?

Each stretch idea below reuses a lesson from earlier in the course. Pick one or two and try them without looking back at the lesson first, then check your answer against it.

• Add <h3> sub-groups inside Drinks, such as Hot and Cold, and check the outline still reads cleanly.
• Wrap the photo in <figure> with a <figcaption> that names the dish of the week.
• Mark a sold-out dish with <s> and add the word "sold out" in text so the meaning is not carried by the line-through alone.
• Add <abbr title="vegan">VG</abbr> and <abbr title="gluten free">GF</abbr> tags, and explain them once in a key under the menu.
• Add opening hours with <time> elements, for example <time>08:00</time> to <time>15:00</time>.
• Add a mailto: link for private bookings and a link to a downloadable PDF menu with the download attribute.
• Embed a map with an <iframe> that has a title, as you did in the embeds lesson.

Field notes

• Plan the outline in plain words before you start writing tags.
• Use h2 headings for menu sections like Breakfast and Drinks.
• Keep each dish's name, description and price in one list item.
• Write alt text that says what the food in the photo is.

Easy to get wrong

Dishes are items in a list. Turning every dish into a heading floods the outline and splits the name from its price.

Generic alt text tells a screen reader user nothing about the food. Describe what is on the plate.

Link text should make sense alone, because people scanning a list of links never see the words around it.

Spacing with rows of non-breaking spaces breaks on narrow screens and is read as silence. Leave visual alignment to CSS.

Questions people ask

Should a restaurant menu use a table or a list?

Use a list when each dish has one price. Use a table with header cells when the menu really has columns, such as small and large sizes for each drink.

How do I write a pound or euro sign in HTML?

Type the symbol directly in a UTF-8 page, or use the entities £ and €. Both render the same.

Can I put the menu in a PDF instead?

You can link to a PDF as an extra, but keep the menu in HTML. HTML works on any phone, can be read by screen readers and is indexed by search engines.

How many headings should a menu page have?

One h1 for the cafe name and one h2 per menu section, with h3 only for sub-groups. Individual dishes should not be headings.

How do I make a phone number clickable?

Use a link with the tel: scheme, such as <a href="tel:+441134960123">. Phones open the dialler when it is tapped.