HTML ফরম্যাটার ও বিউটিফায়ার
অগোছালো HTML পেস্ট করে সেটিকে গুছিয়ে নিন (পরিষ্কার ইনডেন্ট, প্রতি লাইনে একটি ট্যাগ) অথবা ছোট করুন (সবকিছু এক লাইনে)। স্ট্যাটাস লাইন জানিয়ে দেয় কোনো ট্যাগ খোলা রয়ে গেছে কি না বা ভুল জায়গায় বন্ধ হয়েছে কি না, আর সঙ্গে লাইন নম্বরও দেয়। সবকিছু আপনার নিজের ডিভাইসেই চলে — আপনি যা পেস্ট করেন তা কখনো আপনার ব্রাউজারের বাইরে যায় না।
এই HTML ফরম্যাটার কীভাবে কাজ করে
টুলটি আপনার HTML একটি একটি করে অক্ষর পড়ে এবং সেটিকে টুকরোয় ভাগ করে: খোলার ট্যাগ, বন্ধের ট্যাগ, খালি ট্যাগ, সাধারণ টেক্সট, নোট, ডকটাইপ লাইন, আর সেই চারটি ব্লক যাদের ভেতরের সবকিছু হুবহু কপি করা হয়। তারপর টুকরোগুলো আবার লিখে ফেলে — প্রতিবার কোনো ট্যাগ খুললে এক ধাপ ডানে সরে যায় আর বন্ধ হলে এক ধাপ ফিরে আসে, তাই একটি লাইন বাঁ দিক থেকে কতটা দূরে আছে তা দেখেই বোঝা যায় সেটি কতটা গভীরে নেস্টেড। যেহেতু এটি কিছু ফেলে না দিয়ে এই টুকরোগুলো নিয়েই কাজ করে, আপনার ফাইলের কিছুই হারায় না — আপনার অ্যাট্রিবিউটগুলোর ক্রম, উদ্ধৃতিচিহ্ন আর স্পেসিং অটুট থাকে, আর আপনার নোটগুলো অক্ষত অবস্থায় বেরিয়ে আসে। মিনিফাই ঠিক উল্টো কাজ করে: ট্যাগগুলোর মাঝের স্পেস আর লাইন ব্রেক বাদ দিয়ে ফাইলটিকে একটি ছোট লাইনে পরিণত করে, তবে দর্শক আসলে দেখতে পান এমন প্রতিটি স্পেস রেখে দেয়।
বিউটিফাই বনাম মিনিফাই বনাম গঠন যাচাই
| বোতাম | এটি কী করে | কখন ব্যবহার করবেন… |
|---|---|---|
| বিউটিফাই | লাইন ব্রেক আর ইনডেন্ট যোগ করে (2 স্পেস, 4 স্পেস বা একটি ট্যাব)। | যখন এক লম্বা লাইনে আসা HTML পড়তে বা ঠিক করতে হবে। |
| মিনিফাই | ট্যাগগুলোর মাঝের স্পেস সরিয়ে দেয়; মানুষ যে স্পেস দেখতে পান তা রেখে দেয়। | যখন পাঠানো বা সংরক্ষণের জন্য সবচেয়ে ছোট ফাইল চান। |
| গঠন যাচাই | প্রতিবার টাইপ করলেই চলে এবং প্রথম ট্যাগ-সমস্যাটি তার লাইন নম্বরসহ জানায়। | যখন কোনো ট্যাগ জায়গামতো নেই আর কোনটা তা খুঁজে পাচ্ছেন না। |
যাচাইটি নিজে থেকেই চলে, তাই দুই মোডেই এটি পাবেন। এটি শুধু দেখে আপনার ট্যাগগুলো ঠিক ক্রমে খোলে আর বন্ধ হয় কি না — এটি পূর্ণাঙ্গ HTML ভ্যালিডেটর নয়, এবং কোনো অ্যাট্রিবিউটের নাম আসল কি না বা আপনার পেজ স্ট্যান্ডার্ডের প্রতিটি নিয়ম মানে কি না, তা বলবে না।
ধাপে ধাপে একটি উদাহরণ
এই যে একটি ছোট মেনু, ঠিক যেভাবে কোনো বিল্ড টুল সেটিকে রেখে যায় — সবকিছু এক লাইনে, একটুও বাড়তি স্পেস নেই:
<ul class="menu"><li><a href="/">Home</a></li><li><a href="/tools/">Tools</a></li></ul>2 স্পেস ইনডেন্ট বেছে বিউটিফাই চাপুন, পাবেন এটি:
<ul class="menu">
<li><a href="/">Home</a></li>
<li><a href="/tools/">Tools</a></li>
</ul>তিনটি জিনিস লক্ষ করুন। প্রতিটি লিস্ট আইটেম নিজের আলাদা লাইনে আছে এবং লিস্ট থেকে দুই স্পেস ভেতরে বসেছে, তাই বোঝা যায় এটি লিস্টের অংশ। লিংকটি তার লিস্ট আইটেমের লাইনেই থেকে যায়, কারণ সেটিকে ভাঙলে তৈরি পেজে এমন একটি স্পেস চলে আসত যা আগে ছিল না। আর বন্ধের ট্যাগগুলো তাদের খোলার ট্যাগের ঠিক নিচে সারিবদ্ধ থাকে — এ কারণেই কোনো হারানো ট্যাগ সঙ্গে সঙ্গে চোখে পড়ে। গোছানো সংস্করণে মিনিফাই চাপুন, প্রথম লাইনটি আবার ফিরে পাবেন, অক্ষরে অক্ষরে:
<ul class="menu"><li><a href="/">Home</a></li><li><a href="/tools/">Tools</a></li></ul>HTML ট্যাগ রেফারেন্স
সব ট্যাগের সঙ্গে একই রকম আচরণ করা হয় না, আর সেটা ইচ্ছে করেই। প্রতিটি ধরনের ট্যাগ নিয়ে ফরম্যাটার কী করে, তার পুরো তালিকা এটি।
| ট্যাগের ধরন | কোনগুলো | ফরম্যাটার কী করে |
|---|---|---|
| খালি ("void") ট্যাগ | area, base, br, col, embed, hr, img, input, link, meta, param, source, track, wbr | এই 13টি ট্যাগ এবং পুরোনো হয়ে যাওয়া param-এর ভেতরে কিছুই থাকে না। টুলটি এগুলোর জন্য কখনো বন্ধের ট্যাগ যোগ করে না এবং এগুলোর নিচে কখনো কিছু ইনডেন্ট করে না। |
| হুবহু কপি হওয়া ব্লক | <script>, <style>, <pre>, <textarea> | খোলার আর বন্ধের ট্যাগের মাঝের সবকিছু ঠিক যেমন আছে তেমনই কপি হয়। ভেতরের স্পেস, ট্যাব আর লাইন ব্রেক কখনো ছোঁয়া হয় না, কারণ সেগুলো বদলালে আপনার কোড বা আপনার পেজ বদলে যাবে। |
| শব্দের লাইনের মধ্যে বসে থাকা ট্যাগ | <a>, <b>, <br>, <code>, <em>, <img>, <small>, <span>, <strong>, <sub>, <sup> | এগুলো আশপাশের শব্দের সঙ্গে একই লাইনে থাকে। এগুলোকে আলাদা লাইনে সরালে তৈরি পেজে একটি স্পেস যোগ হয়ে যেত, তাই টুলটি তা করে না। |
| সাধারণ ট্যাগ | <div>, <p>, <ul>, <table>, <section>, <header>, <form> | প্রতিটি ট্যাগ একটি নতুন লাইনে শুরু হয়, আর তার ভেতরের সবকিছু এক ধাপ ডানে সরে যায়। এ থেকেই পেজের গড়নটা সহজে বোঝা যায়। |
| মানুষের জন্য নোট | <!-- a note --> | নোটগুলো হুবহু কপি হয় — পুরনো <!--[if IE]> ধরনের নোটও, যেগুলো শুধু Internet Explorer পড়ত। |
| প্রথম লাইন | <!DOCTYPE html> | ব্রাউজারকে জানায় যে এটি একটি আধুনিক HTML পেজ। এটি হুবহু কপি হয় এবং সবসময় নিজের আলাদা প্রথম লাইনে থাকে। |
| যে ট্যাগ খোলা রেখে দিতে পারেন | li, p, tr, td, th, dt, dd, option, thead, tbody | HTML এগুলোর বন্ধের ট্যাগ বাদ দিতে দেয়, তাই সেটি না থাকা স্বাভাবিক এবং কখনো ভুল হিসেবে জানানো হয় না। |
গঠন যাচাই আপনাকে কী জানাবে
- যে ট্যাগ কখনো বন্ধ হয়নি — ট্যাগের নাম আর যে লাইনে সেটি খোলা হয়েছিল, তা পাবেন।
- ভুল জায়গায় বন্ধের ট্যাগ — যেমন, কোনো বোল্ড ট্যাগ খোলা থাকতেই একটি অনুচ্ছেদ বন্ধ করে দেওয়া। দুটো লাইন নম্বরই পাবেন।
- এমন বন্ধের ট্যাগ যার বন্ধ করার কিছু নেই — সাধারণত কপি-পেস্টের পর থেকে যাওয়া অবশিষ্ট অংশ।
- হুবহু কপি হওয়া এমন ব্লক যা কখনো শেষ হয় না — বন্ধের ট্যাগ ছাড়া একটি script বা style ব্লক পেজের বাকি সবটুকু গিলে ফেলে, আর এটি ধরার এটাই সবচেয়ে দ্রুত উপায়।
শুধু প্রথম সমস্যাটিই দেখানো হয়, কারণ HTML-এ একটি ভুল জায়গার ট্যাগ সাধারণত তার পরের প্রতিটি সতর্কবার্তার কারণ হয়। প্রথমটি ঠিক করুন, বাকিগুলো সাধারণত নিজে থেকেই মিলিয়ে যায়।
সাধারণ ব্যবহার
- "view source" থেকে সংরক্ষণ বা কপি করা একটি পেজ পড়া, যা প্রায় সবসময় এক লাইনে আসে।
- একটি ই-মেল টেমপ্লেট বা CMS ব্লক ভার্সন কন্ট্রোলে জমা দেওয়ার আগে গুছিয়ে নেওয়া, যাতে পরের পরিবর্তনটি একটি ছোট, পড়ার মতো পার্থক্য হিসেবে দেখা যায়।
- আকারের সীমা আছে এমন জায়গায় পেস্ট করার আগে একটি স্নিপেট ছোট করা, তারপর পরে কাজ করার জন্য আবার গুছিয়ে নেওয়া।
- সেই একটি বন্ধ-না-হওয়া
divখুঁজে বের করা, যা আপনার লেআউটের অর্ধেকটা ভুল জায়গায় ঠেলে দিয়েছে।
গোপনীয়তা
ফরম্যাটারটি পুরোপুরি আপনার নিজের ডিভাইসে চলে। আপনার HTML আপনার নিজের ব্রাউজারের ভেতরেই পড়া হয় এবং আবার লেখা হয়, কখনো কোনো সার্ভারে পাঠানো হয় না, এবং সংরক্ষণ বা লগও করা হয় না — তাই কাজের ফাইল আর যেকোনো ব্যক্তিগত জিনিসের জন্য এটি নিরাপদ, আর পেজ লোড হয়ে যাওয়ার পর নেটওয়ার্ক বন্ধ থাকলেও এটি কাজ করে যায়।
প্রায়ই জিজ্ঞাসিত প্রশ্ন
- HTML ফরম্যাটার বা বিউটিফায়ার কী করে?
- এটি আপনার HTML-কে আবার এমন চেহারায় ফিরিয়ে আনে যা একজন মানুষ পড়তে পারেন। বিল্ড টুল, টেমপ্লেট ইঞ্জিন বা "view source" থেকে কপি করা পেজ প্রায়ই একটিমাত্র খুব লম্বা লাইনে ঠাসা থাকে, যেখান থেকে প্রতিটি স্পেস সরিয়ে ফেলা হয়েছে। ফরম্যাটার প্রতিটি ট্যাগকে তার নিজের লাইনে বসায় এবং একটি ট্যাগের ভেতরের ট্যাগগুলোকে এক ধাপ ডানে সরিয়ে দেয়, যাতে এক নজরে দেখতে পান কোন অংশ কোনটির ভেতরে। এটি আপনার কনটেন্ট বদলায় না: ট্যাগের নাম, অ্যাট্রিবিউট, উদ্ধৃতিচিহ্ন, নোট আর টেক্সট সবই ঠিক যেমন লিখেছিলেন তেমনই আসে। শুধু ট্যাগগুলোর মাঝের স্পেস আর লাইন ব্রেক নতুন করে লেখা হয়, আর সেগুলো 2 স্পেস, 4 স্পেস নাকি একটি ট্যাব হবে, তা আপনিই বেছে নেন।
- HTML গুছিয়ে নিলে বা ছোট করলে কি আমার পেজ দেখতে বদলে যাবে?
- এটি এমনভাবে তৈরি যাতে তা না হয়। ব্রাউজার পেজের ভেতরে স্পেস, ট্যাব আর লাইন ব্রেকের যেকোনো ধারাকে একটিমাত্র স্পেস হিসেবে ধরে, তাই ট্যাগগুলোকে নতুন লাইনে সরানো সাধারণত নিরাপদ। শুধু একটি জায়গায় এটি নিরাপদ নয়: শব্দের লাইনের মধ্যে বসে থাকা ট্যাগগুলোর মাঝে, যেমন একটি লিংকের পাশে একটি বোল্ড ট্যাগ — সেখানে লাইন ব্রেক যোগ করলে তৈরি পেজে একটি বাড়তি স্পেস দেখা দেবে। এই টুল এমন ট্যাগের পুরো ধারাটিকে এক লাইনে একসঙ্গে রাখে, আর যেখানে আপনি স্পেস রেখেছিলেন সেখানে একটি আসল স্পেস রেখে দেয়। এটি script, style, pre ও textarea ব্লকের ভেতরের স্পেসিংও কখনো ছোঁয় না, কারণ সেই স্পেসিং ওই ব্লকগুলোর অর্থেরই অংশ।
- script, style, pre ও textarea-র ভেতরের কোড কেন ছোঁয়া হয় না?
- কারণ এই চারটি ব্লকে স্পেসিংয়ের অর্থ আছে, আর এগুলো নতুন করে ইনডেন্ট করলে আপনার পেজ ভেঙে যেতে পারে। pre ব্লক টেক্সটকে ঠিক যেমন টাইপ করা হয়েছে তেমনই দেখায়, তাই সেখানে দেখা প্রতিটি স্পেস ইচ্ছাকৃত; আর textarea তার কনটেন্ট একটি সম্পাদনযোগ্য বাক্সে দেখায়, তাই একটি বেখেয়ালি ট্যাব সেই বাক্সে দেখা দেবে। style ব্লক হলো CSS আর script ব্লক হলো JavaScript, যার কোনোটিই আদৌ HTML নয়, তাই একটি HTML টুলের এগুলো নতুন করে সাজানোর কোনো কারণ নেই। এই টুল খোলার ট্যাগটি পড়ে, মিলে যাওয়া বন্ধের ট্যাগ পর্যন্ত সবকিছু অক্ষরে অক্ষরে কপি করে, তারপর এগিয়ে যায়। এ কারণেই আপনার JavaScript-এর ভেতরের "এর চেয়ে ছোট" চিহ্ন একে কখনো বিভ্রান্ত করে না।
- গঠন যাচাই কী কী দেখে, আর এটি কি একটি ভ্যালিডেটর?
- এটি একটি দ্রুত প্রাথমিক যাচাই, পূর্ণাঙ্গ ভ্যালিডেটর নয়। আপনি টাইপ করার সঙ্গে সঙ্গে এটি আপনার ট্যাগগুলোর মধ্য দিয়ে যায় এবং কোনগুলো এখনও খোলা আছে তার হিসাব রাখে। এটি আপনাকে তিনটি জিনিস জানায়: যে ট্যাগ খোলা হয়েছে কিন্তু কখনো বন্ধ হয়নি, যে বন্ধের ট্যাগ যে ট্যাগটি বন্ধ করার কথা তার সঙ্গে মেলে না, আর যে বন্ধের ট্যাগের সঙ্গে মেলানোর মতো কিছুই খোলা নেই। প্রতিটি সমস্যা লাইন নম্বরসহ জানানো হয়, যাতে সোজা সেখানে যেতে পারেন। এটি জানে যে br আর img-এর মতো খালি ট্যাগের বন্ধের ট্যাগ লাগে না, এবং HTML আপনাকে li, p, tr আর td খোলা রাখতে দেয়, তাই এগুলো নিয়ে সতর্ক করবে না। আপনার অ্যাট্রিবিউটের নাম আসল কি না বা আপনার পেজ পূর্ণাঙ্গ HTML স্ট্যান্ডার্ড মানে কি না, তা এটি পরীক্ষা করে না।
- br আর img-এর মতো খালি ট্যাগে কি বন্ধের স্ল্যাশ লাগে?
- না। HTML-এ 13টি খালি ট্যাগ — area, base, br, col, embed, hr, img, input, link, meta, source, track ও wbr, সঙ্গে পুরোনো হয়ে যাওয়া param — নিজের ভেতরে কিছু রাখতে পারে না, তাই বন্ধ করার কিছু নেই। ক্লোজিং ব্র্যাকেটের আগে একটি স্ল্যাশ লেখা চলে এবং প্রতিটি ব্রাউজার সেটি উপেক্ষা করে, সেজন্যই পুরনো কোডে এটি এত বেশি দেখা যায়: এটি এসেছে XHTML থেকে, যেখানে স্ল্যাশ বাধ্যতামূলক ছিল। দুই ধরনই কাজ করে, তাই আপনি যেটা লিখেছেন এই টুল সেটাই হুবহু রেখে দেয়। যা এটি কখনো করবে না তা হলো এগুলোর কোনোটির জন্য নিজে থেকে একটি বন্ধের ট্যাগ বানিয়ে ফেলা, কারণ একটি খালি এলিমেন্টের বন্ধের ট্যাগ সত্যিকারের ভুল, যা নিয়ে কিছু টুল আপত্তি জানায়।
- আমার HTML কি কোথাও পাঠানো হয়?
- না। পুরো টুলটি সাধারণ JavaScript-এর একটি ছোট অংশ, যা আপনার নিজের ডিভাইসে চলে। আপনি যা পেস্ট করেন তা আপনার সামনের পেজেই থাকে: কোনো আপলোড নেই, পেছনে কোনো সার্ভার নেই, কিছুই সংরক্ষণ করা হয় না এবং কিছুই লগে লেখা হয় না। তাই কাজের ফাইল, আধাআধি তৈরি পেজ, ই-মেল টেমপ্লেট আর এমন যেকোনো কিছু যাতে কোনো গ্রাহকের নাম বা কোনো গোপন চাবি আছে — সবকিছুর জন্য এটি নিরাপদ। এর মানে এটাও যে পেজ একবার লোড হয়ে গেলে নেটওয়ার্ক বন্ধ থাকলেও এটি কাজ করে চলে, আর খুব বড় একটি ফাইলের সীমা শুধু আপনার নিজের ডিভাইস, কোনো আপলোড সীমা নয়।