বেস্ট প্র্যাকটিস

🔖 বেস্ট প্র্যাকটিস (Best Practices)

ভালো HTML জানা আর ভালো HTML লেখা — দুটো ভিন্ন জিনিস। প্রফেশনাল ডেভেলপাররা কিছু নির্দিষ্ট নিয়ম মেনে কোড লেখেন যা কোডকে পরিষ্কার, দ্রুত এবং রক্ষণাবেক্ষণযোগ্য রাখে।

📌 কোড ফরম্যাটিং

✅ ভালো উদাহরণ


<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>পরিষ্কার HTML</title>
</head>
<body>
  <header>
    <nav>
      <ul>
        <li><a href="/">হোম</a></li>
        <li><a href="/about">সম্পর্কে</a></li>
      </ul>
    </nav>
  </header>
</body>
</html>

📌 করণীয় ও বর্জনীয়

✅ করুন	❌ করবেন না
সব ট্যাগ lowercase-এ লিখুন	`<P>`, `<DIV>` বড় হাতে লিখবেন না
অ্যাট্রিবিউটের ভ্যালু quote-এ রাখুন	`<img src=image.png>` এভাবে লিখবেন না
`<!DOCTYPE html>` দিয়ে শুরু করুন	DOCTYPE ছাড়া শুরু করবেন না
Semantic ট্যাগ ব্যবহার করুন	সব জায়গায় `<div>` ব্যবহার করবেন না
`alt` টেক্সট দিন	`<img>` তে `alt` বাদ দেবেন না
ইন্ডেন্টেশন ঠিক রাখুন	একই লাইনে সব লিখবেন না

📌 পারফরম্যান্স অপ্টিমাইজেশন

১. CSS এবং JS সঠিক জায়গায় লিখুন:


<head>
  <!-- ✅ CSS সবসময় <head>-এ -->
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <!-- কন্টেন্ট... -->
 
  <!-- ✅ JS সবসময় </body>-এর আগে -->
  <script src="main.js"></script>
</body>

২. ছবির সাইজ অপ্টিমাইজ করুন:


<!-- ✅ আধুনিক ছবি ফরম্যাট WebP ব্যবহার করুন -->
<picture>
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="ব্যাকআপ ছবি">
</picture>

৩. Lazy Loading ব্যবহার করুন:


<!-- স্ক্রিনে না আসা পর্যন্ত ছবি লোড হবে না, পেজ দ্রুত লোড হবে -->
<img src="big-image.jpg" alt="বড় ছবি" loading="lazy">

📌 HTML Validation

💡

আপনার HTML কোড সঠিক কিনা পরীক্ষা করতে W3C Markup Validation Service ব্যবহার করুন। এটি কোডের সব ভুল ধরে দেবে।

একজন প্রফেশনাল ডেভেলপার হতে হলে শুধু কাজ করলেই হবে না, পরিষ্কার ও রক্ষণাবেক্ষণযোগ্য কোড লেখার অভ্যাস তৈরি করতে হবে। এই নিয়মগুলো মেনে চললে আপনি ভবিষ্যতে অনেক সমস্যা থেকে বাঁচতে পারবেন।