Challenge · hard
Build a Restaurant Website in HTML: Menu Challenge
Goal: Build a whole restaurant page: a full head, landmarks and a menu with real structure.
Learn
Half the work on a real page is stuff nobody sees. The head holds the character set, the viewport, a title that includes the site name, a favicon via <link rel="icon"> and a stylesheet via <link rel="stylesheet">. You will find both rel values in the link types section of the HTML standard (opens in a new tab).
A menu is names paired with descriptions. That is the job of a description list (opens in a new tab), with <dt> for the dish and <dd> for what it is and what it costs. Put each price inside <data value="6"> so a program can read the number.
Give each part of the menu its own section and <h2>. The photo goes in a <figure> with a caption, and the contact details in an <address> in the footer. For more on these, see the favicon lesson and the address reference.
The short version
- A finished head has charset, viewport, a title with the site name, a favicon and a stylesheet link.
- The page body splits into header, nav, main and a footer with an
<address>in it. - Dishes go in
<dl>,<dt>and<dd>; prices go in<data value>. - The photo sits in a
<figure>with a<figcaption>under it.
Example
<dl>
<dt>Tomato soup</dt>
<dd>With basil and bread. <data value="5">$5</data></dd>
</dl>Your task
Mountain Kitchen's page is two paragraphs and a title. Rebuild it:
- Leave the doctype on the first line. Add
lang,<meta charset>and the viewport tag. - Make the title contain 'Mountain Kitchen'.
- Link
favicon.svgas the icon andstyle.cssas the stylesheet. - Add a
<header>holding the page's only<h1>and a<nav>with 3 or more links. - Inside
<main>, add a<figure>showingmountains.svgwith alt text, plus a<figcaption>. - Split the menu into 2 or more
<section>elements that each open with an<h2>. - List the dishes in description lists: 4 or more
<dt>dishes, each with a<dd>whose price is in<data value>. - Finish with a
<footer>containing an<address>.
Ctrl+Enter checks your code. Try Visual edit to change the page directly, DOM tree to see how the browser reads it, and Outline to hear it like a screen reader.
Quick quiz
Frequently asked questions
How do I add a favicon to my website?
Put a <link> in the head: <link rel="icon" href="favicon.svg" type="image/svg+xml">. An SVG icon stays sharp at every size. PNG and ICO files also work, and the encyclopedia entry on the favicon (opens in a new tab) explains where those older formats came from. Many browsers check for /favicon.ico at the site root without being told, but writing the link yourself means you pick the file.
Should a restaurant menu use a table or a list in HTML?
Usually a list. When each dish has a name, a description and a price, use a description list, with <dt> for the dish and <dd> for the details. A table is better when you compare the same properties in columns, like prices for small, medium and large. And please do not post a photo of the menu as the only copy. Text can be read aloud, searched and translated.