ToolDeck-এর বিনামূল্যে অনলাইন HTML টুলগুলি আপনাকে সরাসরি ব্রাউজারে HTML ফরম্যাট, মিনিফাই, এস্কেপ এবং রূপান্তর করতে দেয় — কোনো ইনস্টল বা সাইনআপ ছাড়াই। HTML Formatter দিয়ে কনফিগারযোগ্য ইন্ডেন্টেশন সহ অগোছালো মার্কআপ সুন্দরভাবে প্রিন্ট করুন। HTML Minifier দিয়ে প্রোডাকশন-প্রস্তুত ফাইল সংকুচিত করুন কার্যকারিতা না বদলে ট্রান্সফার সাইজ কমাতে। HTML Escape / Unescape ব্যবহার করে টেমপ্লেটে XSS দুর্বলতা প্রতিরোধ করতে বিশেষ অক্ষরগুলি নিরাপদে এনকোড করুন। HTML to JSX কনভার্টার দিয়ে মার্কআপ React-এ মাইগ্রেট করুন, অথবা HTML to Markdown কনভার্টার দিয়ে ওয়েব কন্টেন্ট ডকুমেন্টেশনে রূপান্তর করুন। আপনি যদি প্রোডাকশন পেজ ডিবাগ করছেন, React মাইগ্রেশনের প্রস্তুতি নিচ্ছেন, বা CMS থেকে কন্টেন্ট বের করছেন — এই HTML টুলগুলি একটাই URL বুকমার্ক করে রাখলেই সব কাজ হয়। পাঁচটি টুলই সম্পূর্ণ ক্লায়েন্ট-সাইডে চলে, তাই আপনার পেস্ট করা কিছুই কোনো সার্ভারে আপলোড হয় না।
HTML টুল কী?
HTML (HyperText Markup Language) হলো ওয়েবের প্রামাণিক ডকুমেন্ট ফরম্যাট, যা WHATWG HTML Living Standard দ্বারা সংজ্ঞায়িত এবং W3C দ্বারা রক্ষণাবেক্ষণ করা হয়। প্রতিটি ব্রাউজার HTML পার্স করে DOM (Document Object Model) তৈরি করে, যা ব্যবহারকারীরা কী দেখেন এবং কীসের সাথে ইন্টারঅ্যাক্ট করেন তা নিয়ন্ত্রণ করে। কাঁচা HTML নিয়ে কাজ করা ফ্রন্টএন্ড এবং ফুল-স্ট্যাক ডেভেলপারদের জন্য প্রতিদিনের কাজ — টেমপ্লেট লেখা, রেন্ডার করা আউটপুট ডিবাগ করা বা প্রোডাকশন ডিপ্লয়মেন্টের জন্য মার্কআপ প্রস্তুত করা যাই হোক না কেন।
HTML টুলগুলি সেই কাজের পুনরাবৃত্তিমূলক অংশগুলি স্বয়ংক্রিয় করে। ফরম্যাটিং সামঞ্জস্যপূর্ণ ইন্ডেন্টেশন যোগ করে যাতে আপনি গভীরভাবে নেস্টেড কাঠামো পড়তে পারেন। মিনিফিকেশন হোয়াইটস্পেস, মন্তব্য এবং ঐচ্ছিক ক্লোজিং ট্যাগ সরিয়ে ট্রান্সফার সাইজ কমায়। এনটিটি এস্কেপিং <, > এবং & এর মতো অক্ষরগুলিকে নিরাপদ রেফারেন্সে রূপান্তর করে যাতে সেগুলি মার্কআপ হিসেবে ব্যাখ্যা না হয়ে টেক্সট হিসেবে রেন্ডার হয়। রূপান্তর টুলগুলি HTML-কে JSX বা Markdown-এ রূপান্তর করে, প্রতিটি মাইগ্রেশনে ম্যানুয়ালি attribute rename আর reorder করার ঝামেলা দূর করে।
এই টুলগুলি তখন কাজে লাগে যখন আপনি ভুলভাবে রেন্ডার হওয়া পেজ ডিবাগ করছেন, বড় টেমপ্লেট পরিবর্তন সহ পুল রিকোয়েস্ট পর্যালোচনা করছেন, HTML ইমেইল লেআউট প্রস্তুত করছেন, ভ্যানিলা HTML থেকে React-এ কোডবেস মাইগ্রেট করছেন, বা CMS থেকে ডকুমেন্টেশন সিস্টেমে কন্টেন্ট বের করছেন। ব্রাউজার-ভিত্তিক টুলগুলি নির্ভরতা ইনস্টল বা বিল্ড পাইপলাইন সেটআপ ছাড়াই এগুলি সামলায়। এগুলি এককালীন কাজের জন্যও ভালো কাজ করে যেখানে স্থানীয় টুল চেইন কনফিগার করতে কাজটির চেয়ে বেশি সময় লাগত।
ToolDeck-এ HTML টুল কেন ব্যবহার করবেন?
ToolDeck সবকিছু আপনার ব্রাউজারে প্রক্রিয়া করে। আপনার HTML কখনো আপনার মেশিন ছেড়ে যায় না, যা গুরুত্বপূর্ণ যখন আপনি এমন মার্কআপ নিয়ে কাজ করছেন যাতে মেটা ট্যাগে API কী, অভ্যন্তরীণ URL বা প্রকাশিত হয়নি এমন পেজ কাঠামো রয়েছে। পেজ লোড হওয়ার পরে প্রতিটি টুল অফলাইনে কাজ করে — আপনার মার্কআপ পেস্ট করুন এবং কোনো সার্ভার অনুরোধ ছাড়াই ফলাফল তাৎক্ষণিকভাবে প্রদর্শিত হয়। কোনো অ্যাকাউন্ট, রেট লিমিট বা ব্যবহারের সীমা নেই।
🔒ডিফল্টে গোপনীয়
সমস্ত প্রক্রিয়াকরণ ব্রাউজার ট্যাবে হয়। কোনো HTML কোনো সার্ভারে আপলোড হয় না, তাই আপনি ঝুঁকি ছাড়াই অভ্যন্তরীণ টেমপ্লেট এবং প্রোডাকশন মার্কআপ পেস্ট করতে পারেন।
⚡তাৎক্ষণিক ফলাফল
আপনি টাইপ করার সাথে সাথে ফরম্যাটিং, মিনিফিকেশন এবং এনটিটি রূপান্তর হয়। সার্ভার রাউন্ড-ট্রিপ বা বিল্ড প্রক্রিয়ার জন্য অপেক্ষা করতে হয় না।
🧩পাঁচটি টুল, একটি ওয়ার্কফ্লো
একটি জায়গা থেকেই ফরম্যাট, মিনিফাই, এস্কেপ, JSX-এ রূপান্তর এবং Markdown-এ রূপান্তর করুন। ভিন্ন ভিন্ন সাইট বা CLI টুলের মধ্যে স্যুইচ করতে হবে না।
🌐কোনো সেটআপ প্রয়োজন নেই
পেজ খুলুন এবং আপনার HTML পেস্ট করুন। যেকোনো অপারেটিং সিস্টেম এবং যেকোনো ব্রাউজারে কাজ করে। কোনো npm প্যাকেজ, কোনো এডিটর এক্সটেনশন, কোনো কনফিগারেশন ফাইল নেই।
HTML টুলের ব্যবহারের ক্ষেত্র
HTML প্রক্রিয়াকরণ একটি প্রকল্পের প্রতিটি ধাপে আসে। নিচের ছয়টি পরিস্থিতি সবচেয়ে সাধারণ কাজগুলি কভার করে: পর্যালোচনার জন্য অপাঠযোগ্য মার্কআপ ফরম্যাট করা, প্রোডাকশনের জন্য অ্যাসেট সংকুচিত করা, ইনজেকশন থেকে টেমপ্লেট সুরক্ষিত করা, React-এ রূপান্তর করা, ডকুমেন্টেশনের জন্য কন্টেন্ট বের করা এবং পাঠানোর আগে ইমেইল লেআউট অডিট করা।
ফ্রন্টএন্ড ডিবাগিং
একটি প্রোডাকশন পেজ থেকে মিনিফাইড HTML
HTML Formatter-এ পেস্ট করুন ইন্ডেন্টেশন পুনরুদ্ধার করতে এবং লেআউট সমস্যা সৃষ্টিকারী উপাদানের নেস্টিং পথ খুঁজে পেতে। একসাথে সম্পূর্ণ ডকুমেন্ট কাঠামো দেখার প্রয়োজন হলে এটি ব্রাউজার DevTools ব্যবহারের চেয়ে দ্রুত।
বিল্ড পাইপলাইন অপ্টিমাইজেশন
ডিপ্লয়মেন্টের আগে
HTML Minifier-এর মাধ্যমে HTML চালান হোয়াইটস্পেস এবং মন্তব্য সরিয়ে কার্যকারিতা না বদলে ফাইল সাইজ কমাতে।
নিরাপদ টেমপ্লেট রেন্ডারিং
টেমপ্লেটে ইনজেকশনের আগে ব্যবহারকারীর তৈরি কন্টেন্ট সঠিকভাবে এনকোড করা হয়েছে কিনা যাচাই করতে
HTML Escape / Unescape ব্যবহার করুন। এটি XSS ভেক্টর ধরে যা স্বয়ংক্রিয় স্ক্যানার মিস করে, বিশেষত অ্যাট্রিবিউট এবং ইনলাইন ইভেন্ট হ্যান্ডলারে।
React মাইগ্রেশন
HTML to JSX কনভার্টার দিয়ে বিদ্যমান HTML টেমপ্লেট JSX-এ রূপান্তর করুন। এটি স্বয়ংক্রিয়ভাবে class থেকে className, for থেকে htmlFor এবং ইনলাইন স্টাইল অবজেক্ট পরিচালনা করে।
ডকুমেন্টেশন নিষ্কাশন
HTML to Markdown কনভার্টার দিয়ে README ফাইল, উইকি বা স্ট্যাটিক সাইট জেনারেটরে ব্যবহারের জন্য HTML পেজ Markdown-এ পরিণত করুন। শিরোনাম, বোল্ড, ইটালিক, লিঙ্ক, চিত্র, তালিকা, টেবিল এবং কোড ব্লক পরিচালনা করে।
ইমেইল টেমপ্লেট QA
নেস্টেড টেবিল লেআউট অডিট করতে HTML ইমেইল টেমপ্লেট ফরম্যাট করুন, তারপর পাঠানোর জন্য মিনিফাই করুন। ইমেইল ক্লায়েন্টগুলি মার্কআপ সম্পর্কে কঠোর, তাই পাঠযোগ্য সোর্স আগেভাগে ত্রুটি ধরতে সাহায্য করে।
HTML এনটিটি রেফারেন্স
HTML ২,০০০-এরও বেশি নামযুক্ত ক্যারেক্টার রেফারেন্স সংজ্ঞায়িত করে। নিচের সারণিতে মার্কআপ এস্কেপ এবং আনএস্কেপ করার সময় সবচেয়ে বেশি ব্যবহৃত এনটিটিগুলি তালিকাভুক্ত করা হয়েছে। পাঁচটি বাধ্যতামূলক এস্কেপ ক্যারেক্টার (&, <, >, ", ') পার্সিং ত্রুটি এবং XSS দুর্বলতা প্রতিরোধ করতে HTML অ্যাট্রিবিউট এবং টেক্সট কন্টেন্টে এনকোড করতে হবে।
| নামযুক্ত এনটিটি | ক্যারেক্টার | সংখ্যাসূচক কোড | কখন এস্কেপ করবেন |
|---|
| & | & | & | সর্বদা — সমস্ত HTML প্রসঙ্গে এনটিটি শুরু হিসেবে পার্স হয় |
| < | < | < | সর্বদা — ট্যাগ খোলা হিসেবে পার্স হয়; টেক্সট এবং অ্যাট্রিবিউটে প্রয়োজনীয় |
| > | > | > | প্রস্তাবিত — কিছু প্রসঙ্গে ট্যাগ বন্ধ হিসেবে পার্স হয় |
| " | " | " | ডাবল-কোটেড অ্যাট্রিবিউটের ভিতরে (যেমন, title="...") |
| ' | ' | ' | সিঙ্গেল-কোটেড অ্যাট্রিবিউটের ভিতরে (যেমন, title='...') |
| | |   | নন-ব্রেকিং স্পেস — টেক্সটে নির্দিষ্ট-প্রস্থের ফাঁকের জন্য ব্যবহার করুন |
| © | © | © | কপিরাইট প্রতীক — ফুটার মার্কআপে সাধারণ |
| — | — | — | এম ড্যাশ — ডাবল হাইফেনের টাইপোগ্রাফিক প্রতিস্থাপন |
| … | … | … | অনুভূমিক উপবৃত্ত — UI টেক্সটে তিনটি বিন্দু প্রতিস্থাপন করে |
| ™ | ™ | ™ | ট্রেডমার্ক প্রতীক — আইনি এবং পণ্য পেজে |
সম্পূর্ণ তালিকা: WHATWG HTML Living Standard, ধারা ১৩.৫ — Named Character References।
সঠিক HTML টুল কীভাবে বেছে নেবেন
প্রতিটি টুল একটি HTML ওয়ার্কফ্লোর নির্দিষ্ট ধাপকে লক্ষ্য করে। আপনাকে কী অর্জন করতে হবে তা দিয়ে শুরু করুন। আপনার কাজ যদি একাধিক ধাপ জুড়ে থাকে, টুলগুলি ক্রমানুসারে ভালো কাজ করে — প্রথমে কাঠামো পরীক্ষা করতে ফরম্যাট করুন, তারপর প্রয়োজন অনুযায়ী রূপান্তর বা মিনিফাই করুন।
- 1
যদি আপনার প্রয়োজন হয় খারাপভাবে ইন্ডেন্টেড HTML পড়া বা ডিবাগ করা, বা দলজুড়ে ফরম্যাটিং মানসম্পন্ন করা → HTML Formatter - 2
যদি আপনার প্রয়োজন হয় হোয়াইটস্পেস এবং মন্তব্য সরিয়ে প্রোডাকশনের জন্য HTML ফাইল সাইজ কমানো → HTML Minifier - 3
যদি আপনার প্রয়োজন হয় নিরাপদ রেন্ডারিংয়ের জন্য বিশেষ অক্ষর এনকোড করা, বা এনটিটি পাঠযোগ্য টেক্সটে ডিকোড করা → HTML Escape / Unescape - 4
যদি আপনার প্রয়োজন হয় সঠিক JSX সিনট্যাক্স সহ HTML টেমপ্লেট React কম্পোনেন্টে রূপান্তর করা → HTML to JSX Converter - 5
যদি আপনার প্রয়োজন হয় ডকুমেন্টেশন বা স্ট্যাটিক সাইটের জন্য HTML পেজ থেকে Markdown-এ কন্টেন্ট বের করা → HTML to Markdown Converter
এই টুলগুলি ক্রমানুসারে ভালো কাজ করে। আপনি হয়তো আগত HTML পরীক্ষা করতে ফরম্যাট করতে পারেন, React প্রকল্পের জন্য JSX-এ রূপান্তর করতে পারেন, তারপর প্রোডাকশনের জন্য চূড়ান্ত রেন্ডার করা আউটপুট মিনিফাই করতে পারেন। পুরো সাইট মাইগ্রেট করলে HTML to JSX এবং HTML to Markdown কনভার্টার সবচেয়ে বেশি ম্যানুয়াল সম্পাদনার সময় বাঁচায়। দৈনন্দিন কাজের জন্য, HTML Formatter এবং HTML Escape / Unescape টুল দুটিই সবচেয়ে বেশি ব্যবহৃত হবে।
প্রায়শই জিজ্ঞাসিত প্রশ্ন
HTML মিনিফিকেশন এবং কম্প্রেশনের মধ্যে পার্থক্য কী?
মিনিফিকেশন HTML সোর্স থেকে অপ্রয়োজনীয় অক্ষর সরায়: হোয়াইটস্পেস, মন্তব্য, ঐচ্ছিক ক্লোজিং ট্যাগ এবং অতিরিক্ত অ্যাট্রিবিউট। আউটপুট হলো ছোট ফাইল সাইজের বৈধ HTML। কম্প্রেশন (gzip, Brotli) একটি পৃথক ধাপ যা সার্ভার বা CDN স্তরে হয়। এটি lossless অ্যালগরিদম ব্যবহার করে ইতিমধ্যে মিনিফাইড ফাইল এনকোড করে। সর্বোত্তম ফলাফলের জন্য, প্রথমে মিনিফাই করুন, তারপর কম্প্রেস করে পরিবেশন করুন।
আমার কেন HTML এনটিটি এস্কেপ করতে হবে?
<, >, & এবং " এর মতো অক্ষরের HTML-এ বিশেষ অর্থ আছে। ব্যবহারকারী-সরবরাহিত টেক্সটে এই অক্ষর থাকলে এবং আপনি তা এস্কেপ ছাড়াই পেজে ঢোকালে, ব্রাউজার সেগুলিকে মার্কআপ হিসেবে ব্যাখ্যা করবে। এতে সর্বোত্তম ক্ষেত্রে রেন্ডারিং বাগ এবং সবচেয়ে খারাপ ক্ষেত্রে ক্রস-সাইট স্ক্রিপ্টিং (XSS) দুর্বলতা তৈরি হয়। এস্কেপিং এই অক্ষরগুলিকে নামযুক্ত বা সংখ্যাসূচক রেফারেন্সে (<, >, &, ") রূপান্তর করে যাতে ব্রাউজার সেগুলিকে আক্ষরিক টেক্সট হিসেবে প্রদর্শন করে। সার্ভার-সাইড টেমপ্লেটিং ইঞ্জিন সাধারণত এটি স্বয়ংক্রিয়ভাবে পরিচালনা করে, কিন্তু কাঁচা HTML তৈরি করার সময় বা innerHTML নিয়ে কাজ করার সময় আউটপুট যাচাই করতে হবে।
HTML to JSX রূপান্তর কীভাবে কাজ করে?
JSX হলো React-এ ব্যবহৃত JavaScript-এর একটি সিনট্যাক্স এক্সটেনশন। এটি HTML-এর মতো দেখায় কিন্তু JavaScript নিয়ম অনুসরণ করে। রূপান্তর HTML অ্যাট্রিবিউটগুলিকে তাদের JSX সমতুল্যে পরিবর্তন করে: class হয় className, for হয় htmlFor, tabindex হয় tabIndex ইত্যাদি। ইনলাইন স্টাইল অ্যাট্রিবিউট CSS স্ট্রিং থেকে JavaScript অবজেক্টে পরিবর্তিত হয়: প্রপার্টির নাম camelCase হয় (font-size হয় fontSize, background-color হয় backgroundColor) এবং মানগুলি অবজেক্ট লিটারালের ভিতরে কোটেড স্ট্রিং হয়। img এবং br এর মতো সেলফ-ক্লোজিং ট্যাগ স্পষ্ট স্ল্যাশ পায়, এবং disabled এর মতো বুলিয়ান অ্যাট্রিবিউট যেমন আছে তেমনই থাকে কারণ JSX সেগুলি HTML বুলিয়ান অ্যাট্রিবিউটের মতো একইভাবে পরিচালনা করে।
ব্রাউজার-ভিত্তিক টুলে প্রোডাকশন HTML পেস্ট করা কি নিরাপদ?
ToolDeck-এ, হ্যাঁ। সমস্ত HTML প্রক্রিয়াকরণ JavaScript ব্যবহার করে সম্পূর্ণরূপে আপনার ব্রাউজার ট্যাবে চলে। কোনো ডেটা কোনো সার্ভারে পাঠানো হয় না এবং ট্যাব বন্ধ করার পরে কিছু সংরক্ষিত থাকে না। যেকোনো টুল ব্যবহার করার সময় আপনার ব্রাউজারের নেটওয়ার্ক ইন্সপেক্টর খুলে এটি যাচাই করতে পারেন। অত্যন্ত সংবেদনশীল মার্কআপের জন্য, পেস্ট করার আগে ইন্টারনেট থেকে সংযোগ বিচ্ছিন্ন করতে পারেন — পেজ লোড হওয়ার পরে টুলগুলিতে কোনো নেটওয়ার্ক সংযোগ প্রয়োজন হয় না।
ফরম্যাটার কোন HTML ফিচারগুলি পরিচালনা করে?
HTML Formatter সম্পূর্ণ HTML5 সিনট্যাক্স পার্স করে: নেস্টেড এলিমেন্ট, সেলফ-ক্লোজিং ট্যাগ (শূন্য এলিমেন্ট), সিঙ্গেল এবং ডাবল কোট সহ অ্যাট্রিবিউট, আনকোটেড অ্যাট্রিবিউট, ইনলাইন স্ক্রিপ্ট এবং স্টাইল, HTML মন্তব্য, DOCTYPE ঘোষণা এবং CDATA বিভাগ। এটি নেস্টিং গভীরতার উপর ভিত্তি করে সামঞ্জস্যপূর্ণ ইন্ডেন্টেশন প্রয়োগ করে, যেখানে হোয়াইটস্পেস গুরুত্বপূর্ণ সেখানে pre এবং textarea এলিমেন্টের কন্টেন্ট সংরক্ষণ করে। কনফিগারযোগ্য বিকল্পগুলির মধ্যে রয়েছে ইন্ডেন্ট সাইজ (স্পেস বা ট্যাব) এবং অ্যাট্রিবিউটগুলি আলাদা লাইনে মোড়ানো হবে কিনা।
আমি কি Markdown থেকে HTML-এ রূপান্তর করতে পারি?
HTML to Markdown টুলটি একমুখী: এটি HTML নেয় এবং Markdown তৈরি করে। Markdown-থেকে-HTML রূপান্তর একটি ভিন্ন প্রক্রিয়া যার জন্য একটি Markdown পার্সার প্রয়োজন। বেশিরভাগ স্ট্যাটিক সাইট জেনারেটর (Hugo, Jekyll, Astro) এবং লাইব্রেরি (marked, markdown-it, Python-Markdown) সেই দিকটি পরিচালনা করে। ToolDeck-এর কনভার্টার বিপরীত ক্ষেত্রের জন্য ডিজাইন করা হয়েছে: বিদ্যমান ওয়েব পেজ থেকে ডকুমেন্টেশন, README ফাইল বা CMS মাইগ্রেশনের জন্য Markdown-এ কন্টেন্ট বের করা।
নামযুক্ত এবং সংখ্যাসূচক HTML এনটিটির মধ্যে পার্থক্য কী?
নামযুক্ত এনটিটি একটি স্মৃতিসহায়ক লেবেল ব্যবহার করে: অ্যাম্পারস্যান্ডের জন্য &, কপিরাইট প্রতীকের জন্য ©, এম ড্যাশের জন্য —। সংখ্যাসূচক এনটিটি দশমিক (&) বা hexadecimal (&) আকারে Unicode কোড পয়েন্ট ব্যবহার করে। উভয়ই একই রেন্ডার করা ক্যারেক্টার তৈরি করে। নামযুক্ত এনটিটি সোর্স কোডে পড়তে সহজ, কিন্তু HTML স্পেসে মাত্র প্রায় ২৫০টি সংজ্ঞায়িত আছে — সংখ্যাসূচক এনটিটি যেকোনো Unicode ক্যারেক্টার প্রতিনিধিত্ব করতে পারে, ইমোজি এবং অ-ল্যাটিন স্ক্রিপ্ট সহ। পাঁচটি বাধ্যতামূলক এস্কেপ ক্যারেক্টারের জন্য (&, <, >, ", '), যেকোনো রূপই কাজ করে।