HTML ফরম্যাটার

ওয়েবসাইট বানাতে গেলে HTML লিখতে হয় প্রতিদিন। কিন্তু কপি করা কোড, পুরোনো টেমপ্লেট বা অন্যের লেখা কোড প্রায়ই এক লাইনে জট পাকানো থাকে। কোন div-এর ভেতরে কোন অংশ আছে, কোন তালিকার আইটেম কোথায় শেষ হয়েছে, কোন ট্যাগ বন্ধ হয়নি — এসব বোঝা তখন কঠিন হয়ে যায়। ভুল খুঁজে বের করতে গিয়ে অনেক সময় নষ্ট হয়। HTML ফরম্যাটার এই সমস্যার সহজ সমাধান। এটি এলোমেলো HTML কোডকে সুন্দরভাবে সাজিয়ে দেয়, যাতে প্রতিটি ট্যাগের ধাপ চোখে পড়ে। সাজানো কোড পড়া সহজ, ভুল ধরা সহজ, আর অন্যকে দেখানোও সহজ। শিক্ষার্থী, ওয়েব ডেভেলপার, ব্লগার — যারা HTML নিয়ে কাজ করেন, সবারই এই টুলটি কাজে লাগে।

কীভাবে ব্যবহার করবেন

1. উপরের বড় বাক্সে আপনার HTML কোড লিখুন বা পেস্ট করুন। কোডটি এক লাইনে থাকলেও চলবে, আবার এলোমেলোভাবে ভাঙা থাকলেও চলবে।
2. ফরম্যাট করুন বোতামে ক্লিক করুন। সঙ্গে সঙ্গে সাজানো কোড নিচে দেখা যাবে।
3. কোডটি ছোট করতে চাইলে মিনিফাই করুন বোতামে ক্লিক করুন। তখন সব অপ্রয়োজনীয় ফাঁকা জায়গা মুছে এক লাইনে কোডটি দেখা যাবে।
4. ফলাফল কপি করুন বোতামে ক্লিক করে সাজানো কোডটি কপি করুন। তারপর আপনার এডিটরে বসান।
5. নতুন কোড সাজাতে চাইলে রিসেট করুন বোতামে ক্লিক করুন। পুরোনো লেখা মুছে যাবে।
6. প্রথমবার ব্যবহার করলে উদাহরণ বসান বোতামে ক্লিক করুন। একটি ছোট HTML কোড বসবে এবং সঙ্গে সঙ্গে সাজানো ফলাফল দেখা যাবে।

একটি বাস্তব উদাহরণ

ধরুন, আপনার কাছে একটি এক লাইনের HTML কোড আছে, যাতে একটি কার্ডের ভেতরে শিরোনাম, অনুচ্ছেদ ও তালিকা আছে। ইনপুটটি হলো:

<div class="card"><h1>স্বাগতম</h1><p>এটি একটি উদাহরণ।</p><ul><li>প্রথম</li><li>দ্বিতীয়</li></ul></div>

এই টুলে বসিয়ে ফরম্যাট করলে ফলাফল হবে:

<div class="card">
  <h1>স্বাগতম</h1>
  <p>এটি একটি উদাহরণ।</p>
  <ul>
    <li>প্রথম</li>
    <li>দ্বিতীয়</li>
  </ul>
</div>

এখন এক নজরেই বোঝা যাচ্ছে কোডের গঠন। div-এর ভেতরে তিনটি অংশ আছে, আর ul-এর ভেতরে দুটি li আছে। h1, p ও li ট্যাগগুলো এক লাইনে আছে, কারণ এগুলোতে ছোট লেখা আছে। আর ul ট্যাগটি আলাদা লাইনে খুলেছে ও বন্ধ হয়েছে, কারণ এর ভেতরে আরও ট্যাগ আছে। ইনপুটটি ছিল ১০৩ অক্ষরের, আর আউটপুটটি হয়েছে ১২৬ অক্ষরের। মিনিফাই করলে আবার ইনপুটের মতোই ১০৩ অক্ষরের এক লাইনের কোড পাওয়া যাবে।

ফলাফল বুঝবেন কীভাবে

ফলাফলের প্রতিটি লাইনের ইন্ডেন্ট বা ভেতরের ফাঁকা জায়গাই গঠনটি বুঝিয়ে দেয়। যে ট্যাগ যত ভেতরে, তার লাইন তত বেশি ডানে থাকে। যেমন li লাইনগুলো ul-এর চেয়ে দুই স্পেস বেশি ভেতরে, কারণ li, ul-এর ভেতরে আছে। বন্ধ হওয়া ট্যাগ, যেমন /ul, তার খোলা ট্যাগের সমান জায়গায় থাকে। এতে এক নজরে বোঝা যায় কোন ট্যাগ কোথায় বন্ধ হয়েছে। br, hr, img, input, meta, link-এর মতো ট্যাগের কোনো বন্ধ ট্যাগ নেই, তাই এগুলো আর ভেতরে যায় না। মন্তব্য, যেমন নোট লেখা অংশ, নিজের জায়গায় অক্ষত থাকে। নিচে ইনপুট ও আউটপুটের অক্ষর সংখ্যা দেখানো হয়, যাতে বুঝতে পারেন ফরম্যাট করতে গিয়ে কোড কতটা বড় হলো।

সাধারণ ভুল

প্রথম ভুল হলো ফরম্যাট করা কোড দেখে ভাবা যে কোডটি সম্পূর্ণ সঠিক। এই টুল শুধু সাজায়, পুরোপুরি যাচাই করে না। বন্ধ না হওয়া ট্যাগ বা ভুলভাবে নেস্ট করা ট্যাগ থাকলেও টুলটি সাজিয়ে দেবে। তাই ব্রাউজারে খুলে দেখে নিন। দ্বিতীয় ভুল হলো মিনিফাই করা কোড এডিট করা। মিনিফাই করা কোড পড়া কঠিন, তাই এডিট করার আগে সবসময় ফরম্যাট করা সংস্করণ ব্যবহার করুন। মিনিফাই শুধু শেষ ধাপে, ওয়েবসাইটে দেওয়ার সময় ব্যবহার করুন। তৃতীয় ভুল হলো বড় কোড একবারে বসিয়ে ফলাফল না দেখা। অনেক বড় পেজের কোড হলে ছোট ছোট অংশে ভাগ করে সাজানো ভালো। চতুর্থ ভুল হলো ফরম্যাট করা কোড কপি না করে হাতে লিখে নেওয়া। এতে আবার ভুল হওয়ার ঝুঁকি থাকে, তাই সবসময় কপি বোতাম ব্যবহার করুন।

সতর্কতা

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

FAQ

প্রশ্ন: এই টুল কি আমার HTML কোড যাচাই করে যে সেটি সঠিক কি না?
উত্তর: না, এই টুল শুধু কোডটিকে সুন্দরভাবে সাজায়। কোডটি পুরোপুরি সঠিক কি না, তা যাচাই করে না। ব্রাউজারে খুলে দেখে নিন।

প্রশ্ন: মিনিফাই মানে কী?
উত্তর: মিনিফাই মানে অপ্রয়োজনীয় ফাঁকা জায়গা ও নতুন লাইন মুছে কোডটিকে এক লাইনে ছোট করা। এতে ফাইল ছোট হয় ও পেজ দ্রুত লোড হয়। তবে মিনিফাই করা কোড পড়া কঠিন, তাই এডিট করার সময় ফরম্যাট করা সংস্করণ ব্যবহার করুন।

প্রশ্ন: HTML মন্তব্য কি মুছে যাবে?
উত্তর: না, মন্তব্য যেমন আছে তেমনই থাকবে। ফরম্যাট করলে মন্তব্যটি শুধু ঠিক জায়গায় সাজানো হবে।

প্রশ্ন: আমার কোড কি সার্ভারে পাঠানো হয়?
উত্তর: না, সব কাজ আপনার ব্রাউজারেই হয়। কোডটি কোথাও পাঠানো বা সংরক্ষণ করা হয় না।