24/01/2026

Semantic HTML & HTML Forms (Real Project Style)

Today we’ll learn:

1️⃣ Semantic HTML (Real-World Use)
2️⃣ HTML Forms (Real Form, Not Just Input)

<div class="header"></div>
<div class="nav"></div>
<div class="main"></div>
<div class="footer"></div>

<!DOCTYPE html>
<html>
<head>
  <title>Simple Website</title>
</head>
<body>

  <header>
    <h1>My Website</h1>
  </header>

  <nav>
    <a href="#">Home</a>
    <a href="#">About</a>
    <a href="#">Contact</a>
  </nav>

  <main>
    <section>
      <article>
        <h2>Blog Title</h2>
        <p>This is blog content.</p>
      </article>
    </section>

    <aside>
      <h3>Sidebar</h3>
      <p>Recent posts</p>
    </aside>
  </main>

  <footer>
    <p>© 2026 My Website</p>
  </footer>

</body>
</html>

🔍 Bangla Explanation (Simple Way)

🎯 কেন এটা গুরুত্বপূর্ণ?

👉 Semantic HTML ব্যবহার করলে SEO ভালো হয়, accessibility ভালো হয় এবং code professional হয়।

2️⃣ HTML Forms (Real Form, Not Just Input)

অনেকেই শুধু input শেখে। কিন্তু real project এ form structure খুব গুরুত্বপূর্ণ।

✅ Real Contact Form Example

<section>
  <h2>Contact Us</h2>

  <form action="/submit" method="POST">

    <div>
      <label for="name">Full Name</label>
      <input type="text" id="name" name="fullname" required>
    </div>

    <div>
      <label for="email">Email</label>
      <input type="email" id="email" name="email" required>
    </div>

    <div>
      <label for="message">Message</label>
      <textarea id="message" name="message" required></textarea>
    </div>

    <button type="submit">Send Message</button>

  </form>
</section>

name → backend এ ডাটা পাঠাতে প্রয়োজন
required → basic validation

Code Explain

🔹<form action="" method=""></form> [ জানা ভালো কিন্তু এটি ব্যাকএন্ডের জন্য ব্যবহার করা হয়]

• action → ডাটা কোথায় যাবে
• method="POST" → ডাটা secure ভাবে পাঠায়

🔹 label + for

    
      <label for="email">Email</label>
      <input id="email">
    
  

এটা accessibility এর জন্য খুব গুরুত্বপূর্ণ। User label এ ক্লিক করলে input focus হবে।

🔹 name attribute

  
    <input name="email"> 
  

Backend এ ডাটা পাঠাতে হলে name দরকার। name না দিলে server ডাটা পাবে না।

🔹 required

User empty রাখলে form submit হবে না। Basic validation হয়ে যায়।

🎯 Real Project Understanding

✔ Login form
✔ Contact form
✔ Registration form

সব জায়গায় এই structure ব্যবহার হয়।