Chapter 4.1☕ 15 min read

Restaurant Menu Page

Build a complete restaurant menu page — semantic HTML, responsive layout, accessible tables. This is what freelance clients actually build.

01Restaurant Menu Page — Project Overview

Imagine a client comes to you: "Build me a restaurant website — like Paradise Biryani." Menu with categories (Starters, Main Course, Desserts), pricing tables, food images, contact info, online ordering. This is real client work — ₹50K to ₹2L projects in India alone.

Restaurant website differs from blog/course sites. Menu needs categories, pricing tables, food images, contact info, location map, online ordering. It's a PRODUCT, not a tutorial. But HTML principles are the same — semantic structure, accessibility, responsive layout.

🍛

Real Project Tip: This is ₹50K-₹2L freelance work. Build it right here and you're ready for real clients. Don't skip accessibility — clients with requirements will reject your code.

02HTML Elements for Restaurant Pages

Key HTML elements for restaurant pages:

<main>, <header>, <footer> — Every page needs these three. <main> wraps visible content — screen reader jumps here.
<section>, <article> — <section> for categories (Starters, Main Course). <article> for individual dishes.
<figure>, <figcaption> — Image + caption as one unit. Screen reader knows they're related.
CSS Grid for menu cards — display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) responsive card grid.
Flexbox for nav — display: flex; gap: 16px; flex-wrap: wrap; for simple nav links.
<th scope="col"> — Column headers on pricing tables for accessibility.
alt text on images — Food photos need descriptions for Google Images ranking.
<label for="id"> — Form accessibility + bigger mobile click target.
loading="lazy" — Below-fold images lazy load. WebP format — 25-35% smaller than JPG.

<!-- Restaurant menu structure -->
<main>
  <header>
    <h1>🍛 Paradise Biryani</h1>
    <nav>
      <a href="#starters">Starters</a>
      <a href="#main">Main Course</a>
      <a href="#desserts">Desserts</a>
    </nav>
  </header>

  <section id="starters">
    <h2>Starters</h2>
    <div class="menu-grid">
      <article class="menu-card">
        <figure>
          <img src="images/tikka.jpg"
               alt="Chicken Tikka on skewers with mint chutney"
               width="300" height="200" loading="lazy">
          <figcaption>Served with mint chutney</figcaption>
        </figure>
        <h3>Chicken Tikka</h3>
        <p>Tender chicken marinated in spices, grilled in tandoor</p>
        <span class="price">₹250</span>
        <button aria-label="Add Chicken Tikka to cart">Add to Cart</button>
      </article>
    </div>
  </section>

  <footer>
    <p>© 2025 Paradise Biryani. All rights reserved.</p>
    <address>Shop No. 12, Charminar, Hyderabad - 500002</address>
  </footer>
</main>

<main>Visible content wrapper — screen reader jump point

<section>Content categories — starters, main course, desserts

<article>Self-contained content — each dish is one article

<figure>Image + caption as one unit

grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))Responsive card grid

<th scope="col">Column headers for screen readers

loading="lazy"Below-fold lazy load — save bandwidth

width + height attrsPrevent CLS on image load

03Semantic Structure & Grid Layout

Choose the right approach for your restaurant page:

Feature Best Practice

📐 CSS Grid Layout Responsive card grid with auto-fill/minmax Learn → 💲 Pricing Table th scope="col", proper table structure Learn → ⚡ Image Optimization WebP format, lazy loading, responsive images Learn →

04How to Build a Restaurant Menu Page

HTML Structure Set Karomain, header, nav, section, article, footer

→

Menu Categories & Datasection for categories, article for each dish

→

Responsive Grid Layoutauto-fill, minmax(280px, 1fr) - Instagram jaisa grid

→

Accessibility Checkalt text, th scope, label for, heading hierarchy

→

Performance Optimizelazy loading, WebP, width/height attributes

Restaurant website = real client work. ₹50K-₹2L project. Get it right here and you're ready for real freelance work.

05Exercise — Paradise Restaurant Menu Page

Paradise Biryani jaisi complete restaurant menu page banao from scratch. Semantic HTML, responsive layout, accessible tables.

Open VS Code. Create restaurant-menu.html.

Use the starter code below and complete the restaurant page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Paradise Restaurant Menu</title>
</head>
<body>
  <!-- TODO: main, header, nav, sections, footer -->
</body>
</html>

Build these features:

Semantic HTML — main, header, nav, footer, section, article Navigation — links to all menu categories Menu items in proper lists with prices Food images with descriptive alt text Pricing table with th scope for column headers Contact form with label-for/id connected inputs CSS Grid layout for responsive menu card grid Viewport meta tag for mobile responsiveness

💡

Pro tip: Restaurant website = ₹50K-₹2L project. Build it right and you're ready for real freelance work. Use placeholder images from placehold.co.

Done — Key Points:

✅ Semantic HTML — main, header, nav, footer, section, article
✅ CSS Grid = responsive card grid — Instagram jaisa layout
✅ th scope="col" = table column headers for screen readers
✅ label for="id" = form accessibility + bigger mobile target
✅ loading="lazy" = below-fold lazy load, save bandwidth
✅ WebP format = 25-35% smaller than JPG with same quality
✅ width/height = prevent CLS (layout shift penalty)

Previous3.5 — SEO Basics 📋 All Chapters Next Chapter4.2 — Chai Ki Dukaan Landing Page →