8️⃣ Common HTML Mistakes

🔹 1. Wrong Nesting (Structure Breaks)

👉 Nesting মানে একটি element-এর ভিতরে অন্য element সঠিকভাবে রাখা।

❌ Wrong Example

          <p>Learn HTML
            <div>Today</div>
          </p>
        

এখানে div কে p-এর ভিতরে রাখা হয়েছে, যা valid HTML না।

✅ Correct Example

          <p>Learn HTML</p>
          <div>Today</div>
        

⚠️ কেন সমস্যা?

• Browser unexpected result দেখাতে পারে
• Layout break হতে পারে
• HTML validation error আসে

---

🔹 2. Block vs Inline Misuse

👉 সব HTML element একইভাবে behave করে না।

Block Elements

নতুন line থেকে শুরু হয়।

Examples:

          <div></div>
          <p></p>
          <h1></h1>
          <section></section>
        

Inline Elements

যেখানে থাকে সেখান থেকেই শুরু হয়।

Examples:

          <span></span>
          <a></a>
          <strong></strong>
        

❌ Common Mistake

          <span>
            <h1>HTML Tutorial</h1>
          </span>
        

Inline element-এর ভিতরে block heading রাখা ভালো practice না।

✅ Better

          <div>
            <h1>HTML Tutorial</h1>
          </div>
        

সহজ নিয়ম:
✅ Block → Inline = সাধারণত OK
❌ Inline → Block = সাধারণত Avoid

---

🔹 3. Non-Semantic HTML Usage

👉 অনেক beginner সবকিছু div দিয়ে তৈরি করে।

❌ Example

            <div>
              <div>Logo</div>
              <div>Menu</div>
              <div>Main Content</div>
            </div>
          

✅ Better Example

            <header>Logo</header>
            <nav>Menu</nav>
            <main>Main Content</main>
          

✅ Benefits

• Better SEO
• Better accessibility
• Easier maintenance
• Cleaner code

---

🔹 4. Beginner Mistakes That Hurt Real Projects

❌ Missing Alt Attribute

            <img src="logo.png">
          

✅ Better

            <img src="logo.png" alt="Company logo">
          

❌ Using Headings for Styling

ভুল (শুধু text বড় করার জন্য heading ব্যবহার)

<h5>By Mahamuda Nesa</h5>

Author name কোনো heading না।

✅ ভালো:

            <p>By Mahamuda Nesa</p>
          

❌ Skipping Heading Structure

            <h1>HTML Tutorial</h1>
            <h4>Introduction</h4>
          

✅ Better

            <h1>HTML Tutorial</h1>
            <h2>Introduction</h2>
          

---

🔹 Why These Mistakes Matter?

👉 Small project-এ হয়তো সমস্যা দেখা যাবে না।

কিন্তু real project-এ:

• SEO খারাপ হতে পারে
• Accessibility কমে যায়
• Code maintain করা কঠিন হয়
• Team project-এ confusion তৈরি হয়
• Bugs খুঁজে পাওয়া কঠিন হয়

Conclusion

HTML-এর সবচেয়ে common mistakes হলো:

• Wrong nesting
• Block vs inline confusion
• Non-semantic HTML usage
• Missing alt text
• Missing form labels
• Poor heading structure

ভালো HTML মানে শুধু browser-এ page দেখানো না, বরং এমন code লেখা যা SEO-friendly, accessible এবং maintainable।