Menu • Contact • Reservation Form
(HTML5 – Semantic – Real Project Mindset)
Hello digital chef! 👨🍳💻
Today, there’s no saying “I know the tags.”
Today, we’re using HTML well enough to open a restaurant.
No HTML, no website.
Good HTML, real customers 😎
🧠 1. Before Starting the Project: How Should You Think?
The biggest mistake beginners make is this:
❌ “Which tag should I use?”
✅ “What will the user do on this site?”
In this project, the user will:
- Enter the website
- Recognize the brand
- Check the menu
- Make a reservation
- View contact information
📌 We write HTML according to this flow.
🧱 2. HTML5 Skeleton – No Solid Foundation, No Upper Floors
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="description" content="Lezzet Durağı - Restaurant and Cafe Website">
<meta name="keywords" content="restaurant, cafe, menu, reservation">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lezzet Durağı | Restaurant & Cafe</title>
</head>
<body>
</body>
</html>
🔍 In-Depth Tips
lang="tr"→ Accessibility + SEOmeta description→ Text shown in Google search resultskeywords→ Old but still usefulviewport→ The mobile user’s lifesaver 📱
🏠 3. Header – The Brand Takes the Stage 🎭
Header = the restaurant’s signboard
Good sign → more people walk in 😄
<header>
<h1>🍕 Lezzet Durağı</h1>
<p>Where flavor and pleasure meet</p>
<nav>
<ul>
<li><a href="#menu">Menu</a></li>
<li><a href="#reservation">Reservation</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
</header>
🧠 Professional Details
- Menus should be inside lists (
ul) → semantic structure <nav>is only for main navigation<h1>= brand name (use only once!)
🎯 SEO rule:
Even if the page is closed, the <h1> should stay in mind.
🍽️ 4. Menu Section – Hunger Management 🤤
The menu is the most critical part of the site.
Lose the user here… game over.
<section id="menu">
<h2>🍽️ Our Menu</h2>
<article>
<h3>🍔 Hamburger</h3>
<p>Grilled patty, cheddar cheese, special sauce</p>
<p><strong>120₺</strong></p>
</article>
<article>
<h3>🍕 Pizza</h3>
<p>Mozzarella, tomato sauce, basil</p>
<p><strong>150₺</strong></p>
</article>
<article>
<h3>☕ Latte</h3>
<p>Freshly ground coffee, milk foam</p>
<p><strong>60₺</strong></p>
</article>
</section>
🔥 Why <article>?
Because:
- Each product is independent content
- Search engines love it
- Can be filtered with JavaScript
📌 Tip:
For future categories, using <article> inside <section> is ideal.
📅 5. Reservation Form – HTML Showing Its Muscles 💪
HTML forms are often underestimated, but:
HTML form = mini backend 😎
<section id="reservation">
<h2>📅 Make a Reservation</h2>
<form>
<label>
Full Name:
<input type="text" placeholder="Enter your name" required>
</label><br><br>
<label>
Email:
<input type="email" placeholder="example@mail.com" required>
</label><br><br>
<label>
Date:
<input type="date" required>
</label><br><br>
<label>
Number of Guests:
<input type="number" min="1" max="20">
</label><br><br>
<button type="submit">Make Reservation</button>
</form>
</section>
🧠 Form Mastery Tips
type="email"→ automatic validationrequired→ no empty submissionsmin / max→ prevents nonsense inputlabel→ accessibility ⭐⭐⭐
📞 6. Contact – The Trust Zone 🔐
People trust brands they can reach.
<section id="contact">
<h2>📍 Contact</h2>
<address>
<p>📌 Istanbul / Kadıköy</p>
<p>📞 +90 555 123 45 67</p>
<p>📧 info@lezzetduragi.com</p>
</address>
</section>
🎯 Why Is <address> Important?
- Semantic tag
- Search engines understand location
- Provides a professional look
👋 7. Footer – HTML’s Signature ✍️
<footer>
<p>© 2025 Lezzet Durağı. All rights reserved.</p>
</footer>
Footer =
“This website is complete” 😄
🚀 8. Level Up the Project (Secret Roadmap)
🟢 Beginner
- Semantic HTML structure
- Basic forms
🔵 Intermediate
- Design with CSS
- Responsive menu
🔴 Advanced
- Reservation validation with JavaScript
- Menu filtering
- Dark mode 🌙
🎯 Mini Challenge (Real Learning Happens Here!)
Using the same structure, create:
- ☕ Café website
- 🍔 Fast-food site
- 🌱 Vegan restaurant
- 🍰 Bakery
📌 Rule:
Same HTML structure → different content.
🧠 FINAL WORD
If you completed this project with understanding:
- You know HTML ✅
- You think semantically ✅
- You have a portfolio-ready project ✅
🚀
