HTML এনটিটি এনকোডার / ডিকোডার
নতুনঐচ্ছিক সংখ্যাগত এনকোডিং সহ HTML এনটিটি escape ও unescape করুন।
HTML entities reference
Punctuation, arrows, currency, maths and Greek — click any code to copy it.
| Symbol | Named | Decimal | Hex | Description |
|---|---|---|---|---|
| Punctuation & quotes | ||||
| Ampersand | ||||
| Less-than sign | ||||
| Greater-than sign | ||||
| Double quotation mark | ||||
| Apostrophe / single quote | ||||
| Non-breaking space | ||||
| Em dash | ||||
| En dash | ||||
| Horizontal ellipsis | ||||
| Middle dot | ||||
| Bullet | ||||
| Section sign | ||||
| Pilcrow (paragraph) | ||||
| Dagger | ||||
| Double dagger | ||||
| Left single quote | ||||
| Right single quote | ||||
| Left double quote | ||||
| Right double quote | ||||
| Left angle quote | ||||
| Right angle quote | ||||
| Prime (feet, minutes) | ||||
| Double prime (inches, seconds) | ||||
| Arrows | ||||
| Leftwards arrow | ||||
| Upwards arrow | ||||
| Rightwards arrow | ||||
| Downwards arrow | ||||
| Left-right arrow | ||||
| Carriage-return arrow | ||||
| Leftwards double arrow | ||||
| Upwards double arrow | ||||
| Rightwards double arrow | ||||
| Downwards double arrow | ||||
| Left-right double arrow | ||||
| Currency | ||||
| Cent | ||||
| Pound sterling | ||||
| Generic currency | ||||
| Yen / yuan | ||||
| Euro | ||||
| Florin / function | ||||
| Maths & technical | ||||
| Plus-minus sign | ||||
| Multiplication sign | ||||
| Division sign | ||||
| Not equal to | ||||
| Less-than or equal to | ||||
| Greater-than or equal to | ||||
| Approximately equal to | ||||
| Identical to | ||||
| Infinity | ||||
| Square root | ||||
| N-ary summation | ||||
| N-ary product | ||||
| Integral | ||||
| Partial differential | ||||
| Nabla / del | ||||
| Element of | ||||
| Not an element of | ||||
| Degree sign | ||||
| Micro sign | ||||
| Not sign | ||||
| Superscript two | ||||
| Superscript three | ||||
| One half | ||||
| One quarter | ||||
| Three quarters | ||||
| Per mille | ||||
| Greek letters | ||||
| Greek small alpha | ||||
| Greek small beta | ||||
| Greek small gamma | ||||
| Greek small delta | ||||
| Greek small epsilon | ||||
| Greek small theta | ||||
| Greek small lambda | ||||
| Greek small mu | ||||
| Greek small pi | ||||
| Greek small sigma | ||||
| Greek small phi | ||||
| Greek small omega | ||||
| Greek capital gamma | ||||
| Greek capital delta | ||||
| Greek capital theta | ||||
| Greek capital lambda | ||||
| Greek capital pi | ||||
| Greek capital sigma | ||||
| Greek capital phi | ||||
| Greek capital omega | ||||
| Symbols | ||||
| Copyright | ||||
| Registered trademark | ||||
| Trademark | ||||
| Black heart suit | ||||
| Black diamond suit | ||||
| Black club suit | ||||
| Black spade suit | ||||
| Lozenge | ||||
| Overline | ||||
| Fraction slash | ||||
| Asterisk operator | ||||
No entities match your search.
Runs entirely in your browser. Nothing is uploaded.
HTML এনটিটি অনলাইনে এনকোড ও ডিকোড করুন
এই HTML এনটিটি টুল একই জায়গায় তিনটি কাজ একসাথে করে: টেক্সটকে HTML এনটিটিতে এনকোড করে, এনটিটিকে আবার পড়া-যায়-এমন টেক্সটে ডিকোড করে, এবং একটি অনুসন্ধানযোগ্য HTML এনটিটি তালিকা দেয় যা থেকে আপনি কপি করতে পারবেন। বাম পেনে টাইপ বা পেস্ট করুন আর রূপান্তরিত ফলাফল ডানে লাইভ দেখা যায় — এনকোড ও ডিকোড-এর মধ্যে সুইচ করুন, দুটি পেন অদলবদল করুন, এবং এক ক্লিকে আউটপুট কপি করুন।
সবকিছু আপনার ব্রাউজারে স্থানীয়ভাবে চলে, তাই আপনার রূপান্তরিত টেক্সট কখনও কোনো সার্ভারে আপলোড হয় না। ইনস্টল করার কিছু নেই, কোনো অ্যাকাউন্ট তৈরি করতে হয় না, এবং ব্যবহারের কোনো সীমা নেই। অফলাইন অবস্থায় পেজ রিলোড করলেও এটি কাজ করে — কারণ কোনো পর্যায়ে কোনো সার্ভার কল হয় না।
HTML এনটিটি কী এবং কেন গুরুত্বপূর্ণ
একটি HTML এনটিটি হলো একটি ছোট কোড যা একটি ক্যারেক্টারের প্রতিনিধিত্ব করে। এটি সবসময় একটি অ্যাম্পারস্যান্ড দিয়ে শুরু হয় এবং একটি সেমিকোলন দিয়ে শেষ হয় — উদাহরণস্বরূপ & একটি অ্যাম্পারস্যান্ডের প্রতিনিধিত্ব করে এবং একটি নন-ব্রেকিং স্পেসের। এনটিটি দুটি কারণে থাকে। প্রথমত, কিছু ক্যারেক্টার HTML-এ রিজার্ভড: একটি কাঁচা <, > বা & মার্কআপ হিসেবে পড়া যেতে পারে এবং আপনার পেজ ভেঙে দিতে পারে, তাই এগুলো <, > এবং & হিসেবে লেখা হয়।
দ্বিতীয়ত, এনটিটি আপনাকে স্পেশাল ক্যারেক্টার — অ্যাকসেন্ট, মুদ্রা চিহ্ন, গণিতের চিহ্ন এবং অ্যারো — অন্তর্ভুক্ত করতে দেয়, যা টাইপ করা কঠিন হতে পারে বা টেক্সট এনকোডিং পরিবর্তনে টিকে নাও থাকতে পারে। রিজার্ভড ক্যারেক্টার এসকেপ করাটাই একটি ছুটকো <-কে একটি লেআউট ভাঙা থেকে বা ইউজার ইনপুটের একটি অংশকে অবাঞ্ছিত ট্যাগে পরিণত হওয়া থেকে থামায়। এটি ওয়েব নিরাপত্তার একটি মৌলিক বিষয়, এবং এই কারণেই ইউজার ইনপুট sanitize করার সাথে সবসময় HTML এনটিটি এনকোডিং জড়িত থাকে।
নেমড, ডেসিমাল এবং হেক্সাডেসিমেল এনটিটি
প্রতিটি ক্যারেক্টার তিনভাবে লেখা যায়। একটি নেমড এনটিটি একটি পড়া-যায়-এমন কীওয়ার্ড ব্যবহার করে — কপিরাইট চিহ্ন ©-এর জন্য ©। একটি ডেসিমাল নিউমেরিক এনটিটি ক্যারেক্টারের ইউনিকোড কোড পয়েন্ট বেস ১০-এ ব্যবহার করে — ©। একটি হেক্সাডেসিমেল এনটিটি বেস ১৬ ব্যবহার করে — ©। তিনটিই একই © তৈরি করে।
নেমড এনটিটি পড়তে সবচেয়ে ভালো, কিন্তু মাত্র প্রায় ২,২০০টি ক্যারেক্টারের HTML5 নাম আছে। HTML4-এ মাত্র প্রায় ২৫৫টি সংজ্ঞায়িত ছিল। প্রসারিত HTML5 নেমড ক্যারেক্টার রেফারেন্স স্ট্যান্ডার্ড আরও শত শত যোগ করেছে — গাণিতিক অপারেটর, অ্যারো এবং টাইপোগ্রাফিক চিহ্ন যা আগে ছিল না। নিউমেরিক এনটিটি (ডেসিমাল বা হেক্স) সব ইমোজিসহ প্রতিটি ইউনিকোড ক্যারেক্টার কভার করে। এনকোড করার সময়, আপনার প্রসঙ্গে মানানসই আউটপুট ফর্ম বেছে নিন: সোর্স কোডে পঠনযোগ্যতার জন্য নেমড, যেকোনো ক্যারেক্টারের জন্য একটি নিশ্চিত কোড দরকার হলে ডেসিমাল বা হেক্স।
একটি অনুসন্ধানযোগ্য HTML এনটিটি তালিকা — অ্যারো, চিহ্ন এবং আরও
কনভার্টারের নিচে একটি সম্পূর্ণ, গ্রুপ করা HTML এনটিটি তালিকা আছে যা যতিচিহ্ন, অ্যারো, মুদ্রা, গণিত এবং গ্রিক অক্ষর কভার করে। নাম, চিহ্ন বা সংখ্যা দিয়ে অনুসন্ধান করুন — → (→) খুঁজতে 'arrow', € (€)-এর জন্য 'euro', বা অ্যাম্পারস্যান্ডের জন্য '38' টাইপ করুন — তারপর চিহ্ন, নেমড এনটিটি, ডেসিমাল কোড বা হেক্স কোড কপি করতে যেকোনো সেলে ক্লিক করুন।
মুখস্থ না করে বা একটি স্ট্যাটিক রেফারেন্স পেজে খুঁজে না বেড়িয়ে সঠিক HTML ক্যারেক্টার কোড পাওয়ার দ্রুততম উপায় এটি। তালিকাটি সম্পূর্ণ HTML5 নেমড ক্যারেক্টার রেফারেন্স স্ট্যান্ডার্ড কভার করে — ২,২০০-এর বেশি এন্ট্রি — W3Schools-এর প্রায় ২৫৫টি এনটিটি বা FreeFormatter-এর HTML4-শুধু আংশিক টেবিলের চেয়ে উল্লেখযোগ্যভাবে বেশি। আপনি নিয়মিত গাণিতিক নোটেশন, টাইপোগ্রাফিক চিহ্ন বা বর্ধিত ল্যাটিন ক্যারেক্টার নিয়ে কাজ করলে, এই তালিকায় সবগুলোই আছে।
এটি FreeFormatter, W3Schools এবং MDN-এর সাথে কীভাবে তুলনীয়
বেশিরভাগ HTML এনটিটি রিসোর্স স্ট্যাটিক রেফারেন্স পেজ। W3Schools, MDN-এর ক্যারেক্টার রেফারেন্স এবং FreeFormatter.com — সবাই এনটিটি তালিকাভুক্ত করে যা আপনি হাতে খুঁজে দেখতে পারেন। এদের কোনোটিই একবারে একটি টেক্সট ব্লক পেস্ট করে পুরোটা এনকোড বা ডিকোড করতে দেয় না। FreeFormatter-এর এনটিটি এনকোডার সবচেয়ে কাছাকাছি বিকল্প, কিন্তু এটি প্রসেসিংয়ের জন্য আপনার টেক্সট তাদের সার্ভারে পাঠায়, একটি ফর্ম সাবমিট ও পেজ রিলোড দরকার হয়, এবং শুধু HTML4 এনটিটি কভার করে।
এই টুল একটি পেজে, তাৎক্ষণিকভাবে, ক্লায়েন্ট-সাইডে সবকিছু করে: একটি অনুচ্ছেদ টেক্সট এনকোড করুন, ডিকোডে সুইচ করুন, তারপর এনটিটি তালিকা অনুসন্ধান করুন — সব একই ট্যাবে কোনো রাউন্ড-ট্রিপ ছাড়াই। এটি শুধু HTML4 নয়, সম্পূর্ণ HTML5 নেমড ক্যারেক্টার রেফারেন্স সেটও কভার করে, যা টাইপোগ্রাফিক চিহ্ন, অ্যারো বা গাণিতিক নোটেশন সহ আধুনিক কনটেন্ট নিয়ে কাজ করার সময় গুরুত্বপূর্ণ। এবং যেহেতু সবকিছু স্থানীয়ভাবে চলে, আপনি প্রাইভেট কনটেন্ট — অভ্যন্তরীণ ডকুমেন্ট, ইমেইল টেমপ্লেট, অপ্রকাশিত কপি — এনকোড করতে পারেন কোনো থার্ড-পার্টি সার্ভারে না পৌঁছেই।
প্রাইভেট, তাৎক্ষণিক এবং ফ্রি — অফলাইনেও কাজ করে
প্রতিটি রূপান্তর — এনকোডিং, ডিকোডিং বা এনটিটি তালিকা থেকে কপি করা — জাভাস্ক্রিপ্ট ব্যবহার করে আপনার ব্রাউজারে স্থানীয়ভাবে হয়, তাই এমনকি গোপনীয় মার্কআপও কখনও আপনার ডিভাইস ছেড়ে যায় না। কোনো সার্ভার নেই, লগইন নেই এবং রেট লিমিট নেই। আপনার সংযোগ দ্রুত, ধীর, বা প্রাথমিক পেজ লোডের পর কোনো সংযোগ না থাকলেও টুলটি একইভাবে কাজ করে।
FreeFormatter.com বা প্রতিটি রূপান্তরের জন্য একটি নেটওয়ার্ক রিকোয়েস্ট দরকার এমন অনলাইন HTML ভ্যালিডেটরের সাথে এটি তুলনা করুন। ক্লায়েন্ট প্রজেক্ট বা অভ্যন্তরীণ টুলিংয়ে কাজ করা ডেভেলপারদের জন্য, স্থানীয়ভাবে এনকোডিং চালানো মানে আপনার মার্কআপ কখনও কোনো থার্ড-পার্টি সার্ভারে পৌঁছায় না। এই টুলটিকে আপনার পরবর্তী HTML এনটিটি কনভার্টার ও রেফারেন্স হিসেবে বুকমার্ক করে রাখুন — HTML এসকেপ করা, ক্যারেক্টার কোড খোঁজা, বা কোনো সোর্স ফাইল বা ডেটাবেস ডাম্প থেকে এনকোডেড মার্কআপ ডিকোড করার জন্য।
HTML এনটিটির ইতিহাস: SGML থেকে HTML5 পর্যন্ত
HTML মূলত SGML (Standard Generalized Markup Language) থেকে উদ্ভূত, ISO 8879:1986-এ স্ট্যান্ডার্ডাইজড একটি ডকুমেন্ট মেটা-ভাষা। SGML প্রথম থেকেই একটি ক্যারেক্টার এনটিটি রেফারেন্স সিস্টেম সংজ্ঞায়িত করেছিল, এবং HTML সরাসরি এটি উত্তরাধিকারসূত্রে পায়। এনটিটি একেবারে দরকার হওয়ার কারণটি প্রাথমিক ওয়েবের একটি মৌলিক সীমাবদ্ধতায় নিহিত: HTML সোর্স ডকুমেন্টগুলো প্রিন্টযোগ্য ASCII ক্যারেক্টার নিয়ে গঠিত হতে হতো। কোনো লেখক পেজে একটি আক্ষরিক < ক্যারেক্টার দেখাতে চাইলে, HTML পার্সার সেটিকে একটি ট্যাগের শুরু হিসেবে পড়ে ফেলত — তাই একটি বিকল্প কোড দরকার ছিল। < এবং &-এর মতো নেমড এনটিটি সেই সমস্যা সমাধান করেছিল, লেখকদের একটি রিজার্ভড ক্যারেক্টার সোর্সে লেখার একটি উপায় দিয়ে যা পার্সারের আচরণ ট্রিগার করে না।
HTML এনটিটি তিনটি ক্যাটাগরিতে পড়ে। নেমড এনটিটি একটি অ্যাম্পারস্যান্ড ও সেমিকোলনের মধ্যে একটি মানুষ-পঠনযোগ্য কীওয়ার্ড ব্যবহার করে — &, <, >, ", '। ডেসিমাল নিউমেরিক রেফারেন্স ক্যারেক্টারের ইউনিকোড কোড পয়েন্ট বেস ১০-এ ব্যবহার করে, যেমন <-এর জন্য <। হেক্সাডেসিমেল নিউমেরিক রেফারেন্স বেস ১৬ ব্যবহার করে, যেমন একই ক্যারেক্টারের জন্য <। তিনটিই একই রেন্ডার হওয়া আউটপুটে পৌঁছায়। নেমড এনটিটি বেশি পঠনযোগ্য কিন্তু শুধু ইউনিকোডের একটি উপসেটের জন্য বিদ্যমান; নিউমেরিক রেফারেন্স প্রতিটি কোড পয়েন্ট কভার করে ব্যতিক্রম ছাড়াই, সব ইমোজি ও সাপ্লিমেন্টারি-প্লেন ক্যারেক্টারসহ।
XML এবং HTML এনটিটি হ্যান্ডলিংয়ের মধ্যে ফাঁকটা বোঝার মতো। XML ঠিক পাঁচটি প্রি-ডিফাইনড এনটিটি সংজ্ঞায়িত করে — &, <, >, " এবং ' — এবং অন্য যেকোনো নেমড এনটিটি ব্যবহারের আগে একটি DTD-তে স্পষ্টভাবে ঘোষণা করতে হয়। বিপরীতে, HTML-এ স্পেসিফিকেশনে সরাসরি সংজ্ঞায়িত শত শত বিল্ট-ইন নেমড এনটিটি আছে: HTML4 প্রায় ২৫৫টি স্ট্যান্ডার্ডাইজ করেছিল, এবং HTML5 তা ২,২০০-এর বেশি নেমড ক্যারেক্টার রেফারেন্সে প্রসারিত করেছে, যা গাণিতিক অপারেটর, অ্যারো, টাইপোগ্রাফিক চিহ্ন এবং বর্ধিত ল্যাটিন ক্যারেক্টার কভার করে যা স্ট্যান্ডার্ডের আগের সংস্করণে ছিল না।
ইউনিকোড, UTF-8, এবং কোন এনটিটি আপনার আসলেই দরকার
HTML এনটিটি সিস্টেমটি যখন ডিজাইন করা হয়েছিল, তখন ASCII প্রভাবশালী এনকোডিং ছিল। ১২৮-ক্যারেক্টার ASCII সীমার বাইরে একটি ক্যারেক্টার — একটি কপিরাইট চিহ্ন, একটি ইউরো চিহ্ন, একটি গ্রিক অক্ষর — অন্তর্ভুক্ত করতে হলে আপনার একটি নেমড এনটিটি বা একটি নিউমেরিক রেফারেন্স দরকার ছিল, কারণ অন্তর্নিহিত বাইটের বিভিন্ন সিস্টেম ও লোকেলজুড়ে কোনো নির্ভরযোগ্য ব্যাখ্যা ছিল না। ইউনিকোড এবং, সবচেয়ে গুরুত্বপূর্ণভাবে, ওয়েবের এনকোডিং হিসেবে UTF-8-এর প্রায়-সর্বজনীন গ্রহণ, এই হিসাবটি সম্পূর্ণভাবে পাল্টে দিয়েছে। UTF-8 ১.১ মিলিয়ন ইউনিকোড কোড পয়েন্টের প্রতিটিকে একটি বাইট সিকোয়েন্স হিসেবে উপস্থাপন করতে পারে, এবং প্রায় প্রতিটি আধুনিক ওয়েব সার্ভার, ব্রাউজার, ডেটাবেস ও টেক্সট এডিটর এটি নেটিভভাবে হ্যান্ডেল করে।
একটি UTF-8 পেজে — ডকুমেন্ট হেডে <meta charset="UTF-8"> দিয়ে ঘোষিত — আপনি HTML সোর্সে সরাসরি যেকোনো ইউনিকোড ক্যারেক্টার এম্বেড করতে পারেন। কপিরাইট চিহ্ন ©, ট্রেড মার্ক চিহ্ন ™, ইউরো চিহ্ন €, ইনফিনিটি চিহ্ন ∞, এবং গ্রেটার-দ্যান-অর-ইকুয়াল-টু চিহ্ন ≥ সব কোনো এনকোডিং ছাড়াই আক্ষরিক ক্যারেক্টার হিসেবে দেখা যেতে পারে। ব্রাউজার charset ঘোষণা পড়ে, এটি ব্যবহার করে যে বাইট পায় তা ব্যাখ্যা করে, এবং ক্যারেক্টারগুলো সঠিকভাবে রেন্ডার করে। এর অর্থ হলো, মানুষ যে বেশিরভাগ এনটিটির জন্য হাত বাড়ায় — ©, ™, €, ∞ — একটি আধুনিক UTF-8 পেজে সম্পূর্ণ ঐচ্ছিক; পঠনযোগ্যতা ও সহজ রক্ষণাবেক্ষণের জন্য আক্ষরিক ক্যারেক্টারই পছন্দনীয়।
HTML-এ শুধু পাঁচটি ক্যারেক্টার প্রকৃতপক্ষে এনকোডিং দরকার, এবং শুধু নির্দিষ্ট প্রসঙ্গে: টেক্সট ও অ্যাট্রিবিউট মানে অ্যাম্পারস্যান্ড & (& হিসেবে), টেক্সট কনটেন্টে লেস-দ্যান চিহ্ন < (< হিসেবে), টেক্সট কনটেন্টে গ্রেটার-দ্যান চিহ্ন > (> হিসেবে), ডাবল-কোটেড অ্যাট্রিবিউট মানের ভেতরে ডাবল কোট " (" হিসেবে), এবং সিঙ্গল-কোটেড অ্যাট্রিবিউট মানের ভেতরে সিঙ্গল কোট ' (' বা ' হিসেবে)। বাকি সবকিছু ঐচ্ছিক। প্রতিটি অ্যাকসেন্টযুক্ত ক্যারেক্টারের জন্য ও নেমড এনটিটিতে ভরা একটি পেজ, আক্ষরিক UTF-8-এর তুলনায় পড়া ও এডিট করা কঠিন — ওভার-এনকোডেড HTML-এর রক্ষণাবেক্ষণের বোঝা বাস্তব, এবং আধুনিক টুলিং এতে কোনো সুবিধা দেয় না।
HTML এসকেপিং ও XSS: কেন সঠিক এনকোডিং একটি নিরাপত্তা প্রয়োজনীয়তা
Cross-Site Scripting (XSS) ধারাবাহিকভাবে OWASP Top 10 সবচেয়ে গুরুত্বপূর্ণ ওয়েব অ্যাপ্লিকেশন দুর্বলতার তালিকায় থাকে। একটি XSS আক্রমণ ঘটে যখন ইউজার-সরবরাহকৃত ইনপুট সঠিক এসকেপিং ছাড়া HTML হিসেবে রেন্ডার করা হয়। একটি ক্লাসিক ইনজেকশন পেলোড দেখতে <script>alert(document.cookie)</script>-এর মতো। এই স্ট্রিং যদি একটি ডেটাবেসে সংরক্ষিত থাকে এবং পরে এসকেপিং ছাড়া সরাসরি একটি HTML পেজে নির্গত হয়, ব্রাউজার এটিকে একটি স্ক্রিপ্ট হিসেবে চালায় — সম্ভাব্যভাবে সেশন কুকি চুরি করে, ইউজারকে রিডাইরেক্ট করে, বা তাদের হয়ে কাজ করে। প্রতিরক্ষা হলো আউটপুটের বিন্দুতে সঠিক HTML এনটিটি এনকোডিং: এনকোড না করলে যে < একটি লেআউট ভাঙে, এসকেপ করা হলে সেটি নিরীহ আক্ষরিক টেক্সট < হয়ে যায়, এবং ব্রাউজার এটিকে কখনও মার্কআপ হিসেবে ব্যাখ্যা করে না।
গুরুত্বপূর্ণ সূক্ষ্মতাটি হলো ভিন্ন রেন্ডারিং প্রসঙ্গে ভিন্ন এসকেপিং কৌশল প্রয়োজন। একটি HTML টেক্সট প্রসঙ্গে (ট্যাগের মাঝখানে), <, > এবং & এনকোড করুন। একটি HTML অ্যাট্রিবিউট মান প্রসঙ্গে, চারপাশের কোট ক্যারেক্টারও এনকোড করুন — " বা ' — নইলে একজন আক্রমণকারী অ্যাট্রিবিউট বন্ধ করে onmouseover-এর মতো নতুন অ্যাট্রিবিউট ইনজেক্ট করতে পারে। একটি জাভাস্ক্রিপ্ট স্ট্রিং প্রসঙ্গে (একটি <script> ব্লকের ভেতরে), HTML এনটিটি এনকোডিং যথেষ্ট নয় — আপনার জাভাস্ক্রিপ্ট স্ট্রিং এসকেপিং (\uXXXX সিকোয়েন্স) বা JSON.stringify দরকার, কারণ HTML পার্সারের আগে জাভাস্ক্রিপ্ট ইঞ্জিন স্ট্রিং প্রক্রিয়া করে। একটি URL প্রসঙ্গে (একটি href বা src-এর ভেতরে), সঠিক এসকেপিং হলো পার্সেন্ট-এনকোডিং (একটি স্পেসের জন্য %20), HTML এনটিটি নয় — এই দুটি গুলিয়ে ফেলা ভাঙা লিংক ও ঠিক না করা ইনজেকশন পয়েন্টের একটি সাধারণ উৎস।
OWASP XSS Prevention Cheat Sheet এই প্রসঙ্গ-নির্দিষ্ট নিয়মের প্রামাণিক রেফারেন্স। বেশিরভাগ ডেভেলপারদের জন্য ব্যবহারিক পরামর্শ হলো এমন একটি ফ্রেমওয়ার্ক বা টেমপ্লেট ইঞ্জিনের ওপর নির্ভর করা যা ডিফল্টভাবে অটো-এসকেপ করে — Django-র টেমপ্লেট ভাষা স্বয়ংক্রিয়ভাবে {{ variable }}-কে HTML-নিরাপদ আউটপুটে রূপান্তরিত করে এবং কাঁচা HTML পাস করতে একটি স্পষ্ট {{ variable|safe }} দরকার হয়; Jinja2 একইভাবে আচরণ করে; React-এর JSX DOM-এ রেন্ডার করার আগে সব স্ট্রিং মান এসকেপ করে। আপনার ফ্রেমওয়ার্ক ডিফল্টভাবে কী করে, এবং কখন এটি এসকেপ করে না তা বোঝাই XSS প্রতিরোধ সম্পর্কে জানার সবচেয়ে গুরুত্বপূর্ণ বিষয়। এই টুলের মতো একটি টুল দিয়ে ম্যানুয়াল এনটিটি এনকোডিং তখন মূল্যবান যখন আপনি একটি ফ্রেমওয়ার্কের বাইরে কাজ করছেন — কাঁচা HTML টেমপ্লেট লেখা, একটি বিল্ড স্ক্রিপ্টে মার্কআপ তৈরি করা, বা জাভাস্ক্রিপ্টে HTML স্ট্রিং তৈরি করা।
ইমেইল, টেমপ্লেট ইঞ্জিন এবং XML ফিডে HTML এনটিটি
HTML ইমেইল সেই প্রসঙ্গ যেখানে এনটিটি এনকোডিং ২০২৪ সালেও সবচেয়ে গুরুত্বপূর্ণ থেকে যায়। ইমেইল ক্লায়েন্ট বিস্তৃত রেঞ্জের রেন্ডারিং ইঞ্জিন ব্যবহার করে — Gmail তার নিজস্ব sanitiser দিয়ে HTML স্ট্রিপ ও পুনরায় রেন্ডার করে, Windows-এর Outlook Word-এর রেন্ডারিং ইঞ্জিন ব্যবহার করে (কোনো ব্রাউজার নয়), Apple Mail WebKit ব্যবহার করে — এবং তাদের UTF-8 সমর্থন ও ক্যারেক্টার হ্যান্ডলিং যথেষ্ট পরিবর্তিত হয়। একটি আক্ষরিক এম ড্যাশের বদলে — লেখা, বা ©-এর বদলে ©, নিশ্চিত করে যে ক্যারেক্টারটি এমন ক্লায়েন্টেও সঠিকভাবে রেন্ডার হয় যা উচ্চ-কোড-পয়েন্ট বাইট ভুল ব্যাখ্যা করতে পারে বা স্ট্রিপ করতে পারে। বিশেষ করে Outlook-এর রেন্ডারিং ইঞ্জিনে নির্দিষ্ট ইউনিকোড ক্যারেক্টারের সাথে পরিচিত সমস্যা আছে এবং এটি নেমড এনটিটির প্রতি অনেক বেশি সহনশীল, এই কারণেই পেশাদারভাবে তৈরি ইমেইল HTML-এ এনটিটি-ভারী মার্কআপ থাকার প্রবণতা থাকে যা একটি ওয়েব পেজে অপ্রয়োজনীয় বিবেচিত হতো।
CKEditor ও TinyMCE-এর মতো রিচ টেক্সট এডিটর প্রায়ই ডিফল্টভাবে এনটিটি-ভারী HTML আউটপুট তৈরি করে, এমন ক্যারেক্টারও এনকোড করে যা একটি আধুনিক ব্রাউজারে আক্ষরিক UTF-8 হিসেবে ঠিকমতো রেন্ডার হতো। এটি এমন একটি লিগ্যাসি আচরণ যা এমন একটি যুগ থেকে উত্তরাধিকারসূত্রে এসেছে যখন এনকোডিং অনুমানের ওপর ভরসা করা যেত না। কিছু কন্টেন্ট ম্যানেজমেন্ট সিস্টেম এই এনটিটি-এনকোডেড HTML ডেটাবেসে সংরক্ষণ করে এবং পরে একটি টেমপ্লেট লেয়ারের মাধ্যমে নির্গত করে যা অটো-এসকেপও করে — ফলে ডাবল-এনকোডিং হয়, যেখানে একজন ইউজার একটি অ্যাম্পারস্যান্ড টাইপ করেন, এডিটর & লেখে, CMS সেটি সংরক্ষণ করে, এবং টেমপ্লেট ইঞ্জিন তারপর আবার এটিকে এসকেপ করে &amp; করে দেয়, যা ইউজার পেজে দেখেন। ডাবল-এনকোডিং চেনা সহজ: দৃশ্যমান আউটপুটটি এখানে ডিকোড পেনে পেস্ট করুন এবং একবার ডিকোড করুন — ফলাফলে যদি এখনও আক্ষরিক ক্যারেক্টারের বদলে এনটিটি কোড থাকে, আবার ডিকোড করুন। সমাধান হলো টেমপ্লেট লেয়ারে মানটিকে প্রি-এসকেপড হিসেবে চিহ্নিত করা, পড়ার সময় সেটি ডিকোড করা নয়।
HTML যখন XML ডকুমেন্টের ভেতরে এম্বেড করা হয় — RSS ও Atom ফিড, SVG ফাইল, application/xhtml+xml হিসেবে সার্ভ করা XHTML — XML পার্সার একটি HTML পার্সারের চেয়ে কঠোর নিয়ম প্রয়োগ করে। XML শুধু পাঁচটি প্রি-ডিফাইনড এনটিটি চেনে এবং অজানা যেকোনো নেমড এনটিটিকে একটি মারাত্মক পার্স এরর হিসেবে গণ্য করে। আপনার Atom ফিডে DTD ঘোষণা ছাড়া — থাকলে, একটি সম্মতিসম্পন্ন XML পার্সার পুরো ডকুমেন্টটি প্রত্যাখ্যান করবে। সঠিক পদ্ধতি হলো হয় নিউমেরিক এনটিটি ব্যবহার করা (এম ড্যাশের জন্য —) যা XML পার্সার সর্বজনীনভাবে গ্রহণ করে, বা সরাসরি আক্ষরিক UTF-8 ক্যারেক্টার অন্তর্ভুক্ত করা, যেহেতু XML-এর UTF-8 বা UTF-16 দরকার এবং উভয়ই পুরো ইউনিকোড রেঞ্জ হ্যান্ডেল করে। এই পার্থক্যটি প্রোগ্রামেটিকভাবে ফিড XML তৈরি করার সময় সবচেয়ে বেশি গুরুত্বপূর্ণ: নেমড HTML এনটিটি দিয়ে ক্যারেক্টার string-replace করা একটি সাধারণ ভুল যা ফিড ভ্যালিডেটর ও অ্যাগ্রিগেটর ভেঙে দেয়।
Frequently asked questions
HTML এনটিটি কী?
HTML এনটিটি হলো ছোট কোড যা এমন ক্যারেক্টার প্রতিনিধিত্ব করে যেগুলো HTML-এ হয় রিজার্ভড বা টাইপ করা অস্বস্তিকর। প্রতিটি একটি অ্যাম্পারস্যান্ড দিয়ে শুরু হয় এবং একটি সেমিকোলন দিয়ে শেষ হয় — উদাহরণস্বরূপ & একটি অ্যাম্পারস্যান্ড (&), < একটি লেস-দ্যান চিহ্ন (<), এবং © কপিরাইট চিহ্ন (©)। এগুলো একটি ক্যারেক্টারকে মার্কআপ হিসেবে গণ্য না হয়ে আক্ষরিকভাবে প্রদর্শন করতে দেয়, এবং নিশ্চিত করে একটি চিহ্ন সঠিকভাবে রেন্ডার হয় এমনকি পেজের ক্যারেক্টার এনকোডিংয়ে সেটি না থাকলেও। হাতে HTML লেখার সময় বা ওয়েব অ্যাপ্লিকেশনে ইউজার ইনপুট sanitize করার সময় আপনি এগুলোর সাথে ক্রমাগত মুখোমুখি হবেন।
কীভাবে টেক্সটকে HTML এনটিটিতে এনকোড করব?
বাম পেনে আপনার টেক্সট পেস্ট করুন এবং মোড এনকোডে রাখুন। কোন ক্যারেক্টার এসকেপ করবেন তা বেছে নিন — শুধু রিজার্ভড (< > & " '), রিজার্ভড প্লাস প্রতিটি নন-ASCII ক্যারেক্টার, বা সবকিছু — এবং নেমড, ডেসিমাল বা হেক্স কোড আউটপুট করবেন কিনা। উদাহরণস্বরূপ, নেমড অপশনে, 'Fish & chips <3' হয়ে যায় 'Fish & chips <3'। ফলাফল সঙ্গে সঙ্গে ডানদিকে দেখা যায়। Copy-তে ক্লিক করুন এবং সরাসরি আপনার HTML-এ পেস্ট করুন। সবকিছু আপনার ব্রাউজারে ঘটে — কোনো ফাইল আপলোড নেই, কোনো অ্যাকাউন্ট দরকার নেই, এবং একবারে কতটা টেক্সট এনকোড করতে পারেন তার কোনো সীমা নেই।
HTML এনটিটিকে আবার টেক্সটে কীভাবে ডিকোড করব?
মোড ডিকোডে সুইচ করুন এবং বাম পেনে এনকোডেড HTML পেস্ট করুন; পঠনযোগ্য টেক্সট সঙ্গে সঙ্গে ডানদিকে দেখা যায়। এটি নেমড, ডেসিমাল এবং হেক্সাডেসিমেল এনটিটি বোঝে, তাই <div> Tom & Jerry © ডিকোড হয়ে <div> Tom & Jerry © হয়ে যায়। ফলাফল আবার এনকোড করতে চাইলে পেন অদলবদল করতে Swap বাটন ব্যবহার করুন। ডিকোডার একই স্ট্রিংয়ে মিশ্র এনটিটি টাইপ হ্যান্ডেল করে — নেমড, ডেসিমাল এবং হেক্স সবই একসাথে দেখা যেতে পারে এবং প্রতিটি সঠিকভাবে ডিকোড হয়। FreeFormatter.com-এর এনটিটি ডিকোডারে প্রতিটি রূপান্তরের জন্য একটি ফর্ম সাবমিট ও পেজ রিলোড দরকার হয়; এই টুল আপনি টাইপ করার সাথে সাথে রিয়েল টাইমে আপডেট হয়।
, &, < এবং > কী?
এগুলো চারটি সবচেয়ে সাধারণ HTML এনটিটি। & একটি অ্যাম্পারস্যান্ড (&), < একটি লেস-দ্যান চিহ্ন (<), > একটি গ্রেটার-দ্যান চিহ্ন (>), এবং একটি নন-ব্রেকিং স্পেস — এমন একটি স্পেস যা ব্রাউজারকে লাইন র্যাপ বা কোলাপস করা থেকে থামায়, একটি মান ও তার একক — যেমন 10 kg — এর মধ্যে উপযোগী যাতে দুটি কখনও দুটি লাইনে ভাগ না হয়। অন্য কিছুর আগে & অবশ্যই & হিসেবে এসকেপ করতে হবে, নইলে & নিজেই একটি নতুন এনটিটির শুরু হিসেবে ভুল পড়া যেতে পারে এবং ডাবল-এনকোডিং সমস্যা তৈরি করতে পারে।
নেমড, ডেসিমাল ও হেক্স এনটিটির মধ্যে পার্থক্য কী?
এগুলো একই ক্যারেক্টার লেখার তিনটি উপায়। একটি নেমড এনটিটি একটি মনে-রাখা-সহজ কীওয়ার্ড ব্যবহার করে (&); একটি ডেসিমাল নিউমেরিক এনটিটি ক্যারেক্টারের ইউনিকোড কোড পয়েন্ট বেস ১০-এ ব্যবহার করে (&); একটি হেক্সাডেসিমেল এনটিটি বেস ১৬ ব্যবহার করে (&)। তিনটিই একটি অ্যাম্পারস্যান্ড তৈরি করে। নেমড এনটিটি পড়তে সবচেয়ে ভালো, কিন্তু মাত্র প্রায় ২,০০০ ক্যারেক্টারের নাম আছে, তাই বাকি সবকিছুর জন্য নিউমেরিক এনটিটি বিকল্প — ইমোজিসহ, যেখানে হাসিমুখ ইমোজি 😀 হলো 😀। সন্দেহ থাকলে, পঠনযোগ্যতার জন্য নেমড এনটিটি সবচেয়ে নিরাপদ। HTML5 স্ট্যান্ডার্ড HTML4-এর চেয়ে নেমড এনটিটি তালিকা উল্লেখযোগ্যভাবে প্রসারিত করেছে; এই টুল ২,২০০-এর বেশি নেমড ক্যারেক্টার রেফারেন্সসহ সম্পূর্ণ HTML5 সেট কভার করে।
HTML-এ কোন ক্যারেক্টার অবশ্যই এসকেপ করতে হবে?
পেজ কনটেন্টে তিনটি ক্যারেক্টার বিশেষ অর্থ বহন করে এবং সবসময় এসকেপ করা উচিত: & (&), < (<) এবং > (>)। অ্যাট্রিবিউট মানের ভেতরে আপনার " (") এবং ' (')-ও এসকেপ করা উচিত। প্রথমে অ্যাম্পারস্যান্ড এসকেপ করুন, নইলে & নিজেই একটি এনটিটির শুরু হিসেবে ভুল পড়া যেতে পারে এবং ডাবল-এসকেপড হয়ে যেতে পারে। এনকোড মোডের 'Reserved' অপশন ঠিক এই পাঁচটি ক্যারেক্টার হ্যান্ডেল করে এবং বাকি টেক্সট অস্পৃষ্ট রাখে — যাদের ওভার-এনকোডিং দরকার নেই এমন ক্যারেক্টার বাদ দিয়ে ফর্ম ইনপুট বা টেমপ্লেট আউটপুট sanitize করার জন্য আদর্শ।
একটি অ্যারো বা স্পেশাল চিহ্নের জন্য HTML এনটিটি কী?
সাধারণ অ্যারোগুলো হলো ← (←), → (→), ↑ (↑), ↓ (↓) এবং ↔ (↔), ডাবল-লাইন ভার্সন ⇐, &rArr় এবং ⇔ (⇐ ⇒ ⇔) সহ। অন্য যেকোনো চিহ্নের জন্য, নিচের অনুসন্ধানযোগ্য তালিকা ব্যবহার করুন — 'arrow', 'heart' বা 'euro' টাইপ করুন, তারপর নেমড, ডেসিমাল বা হেক্স কোড কপি করতে ক্লিক করুন। সম্পূর্ণ তালিকা যতিচিহ্ন, গণিতের চিহ্ন, গ্রিক অক্ষর, মুদ্রা চিহ্ন এবং শত শত স্পেশাল ক্যারেক্টার কভার করে, HTML5 নেমড ক্যারেক্টার রেফারেন্স স্ট্যান্ডার্ড অনুযায়ী আপডেট করা। W3Schools মাত্র প্রায় ২৫৫টি এনটিটি তালিকাভুক্ত করে; এই টুলে ২,২০০-এর বেশি আছে।
জাভাস্ক্রিপ্টে HTML এনটিটি কীভাবে ডিকোড করব?
ক্লাসিক ব্রাউজার কৌশল হলো DOM-কে আপনার হয়ে ডিকোড করতে দেওয়া: একটি ডিটাচড টেক্সটএরিয়া তৈরি করুন, এর innerHTML-কে এনটিটি স্ট্রিং সেট করুন এবং এর value পড়ুন। উদাহরণস্বরূপ: const el = document.createElement('textarea'); el.innerHTML = '<b> & ©'; তারপর el.value ফিরিয়ে দেয় '<b> & ©'। প্লেইন জাভাস্ক্রিপ্টে কোনো বিল্ট-ইন decodeHTMLEntities() নেই, তাই এই DOM পদ্ধতি — বা একটি ছোট হেল্পার যা মেলা এনটিটি টোকেনগুলো একটি টেক্সটএরিয়ায় দেয় যাতে বিপথগামী মার্কআপ বেরিয়ে না আসতে পারে — স্ট্যান্ডার্ড প্যাটার্ন। এই টুল ঠিক তাই করে, যে কারণে অবিশ্বস্ত মার্কআপের সাথে XSS ঝুঁকি ছাড়া এটি ব্যবহার করা নিরাপদ।
আমার পেজে & এর বদলে & কেন দেখছি?
এটি ডাবল-এনকোডিং। টেক্সট একবার এসকেপ করা হয়েছিল (& কে &-এ পাল্টে) এবং তারপর আবার এসকেপ করা হয়েছিল (&-এর & কে &amp;-এ পাল্টে), সাধারণত কারণ একটি ফ্রেমওয়ার্ক এমন আউটপুট অটো-এসকেপ করেছে যা ইতিমধ্যে এসকেপ করা ছিল। এটি PHP CMS এবং কিছু টেমপ্লেট ইঞ্জিনে সাধারণ যা ডিফল্টভাবে সব আউটপুট এসকেপ করে — Twig, Smarty এবং পুরনো WordPress hook সবাই এটি করে। ডাবল-এনকোডিং নিশ্চিত করতে এখানে একবার ডিকোডে মানটি পেস্ট করুন, তারপর নিশ্চিত করুন আপনার টেমপ্লেট মানটিকে নিরাপদ চিহ্নিত করে বা আউটপুটের বিন্দুতে শুধু একবার এসকেপ করে।
HTML-এ ©, ™ বা এম ড্যাশ কীভাবে যোগ করব?
©-এর জন্য ©, ®-এর জন্য ®, ™-এর জন্য ™ এবং একটি এম ড্যাশের (—) জন্য — ব্যবহার করুন। একটি এন ড্যাশের জন্য – (–) এবং একটি এলিপসিসের জন্য … (…) ব্যবহার করুন। আপনি একটি UTF-8 পেজে সরাসরি চিহ্নটি পেস্টও করতে পারেন, কিন্তু নেমড এনটিটি দ্ব্যর্থহীন এবং এনকোডিং পাল্টালেও টিকে থাকে। একটি UTF-8 পেজে (যা আজকাল প্রায় সবকিছু) সরাসরি © পেস্ট করলে ঠিকই কাজ করে। Outlook, Gmail এবং Apple Mail-এর মতো মেইল ক্লায়েন্টজুড়ে এনকোডিং অনুমান পাল্টায় বলে HTML ইমেইলের জন্য নেমড এনটিটি সবচেয়ে নিরাপদ পছন্দ থেকে যায়।
নন-ব্রেকিং স্পেসের জন্য HTML এনটিটি কী?
এটি (নিউমেরিক   বা  )। একটি নন-ব্রেকিং স্পেস দুটি শব্দ, বা একটি মান ও তার একক, একই লাইনে রাখে এবং ব্রাউজারকে পুনরাবৃত্ত স্পেস কোলাপস করা থামায় — উদাহরণস্বরূপ Mr. Smith বা 5 km। তবে লেআউটের জন্য এটি অতিরিক্ত ব্যবহার করবেন না; এর বদলে স্পেসিংয়ের জন্য CSS মার্জিন বা প্যাডিং ব্যবহার করুন। একটি সাধারণ ভুল হলো টেক্সট ইনডেন্ট করতে বা কলাম তৈরি করতে একাধিক এনটিটি ব্যবহার করা — এটি খারাপ প্র্যাকটিস এবং পেজ রিসাইজ হলে বা স্ক্রিন রিডারে রেন্ডার হলে ভেঙে যায়, যা প্রতিটির জন্য জোরে 'non-breaking space' পড়ে।
HTML এনটিটি কি কেস-সেনসিটিভ?
হ্যাঁ। নেমড এনটিটি কেস-সেনসিটিভ, তাই & কাজ করে কিন্তু &Amp; বা & নাও করতে পারে, এবং Σ (Σ) σ (σ) থেকে সম্পূর্ণ আলাদা একটি ক্যারেক্টার। নিউমেরিক এনটিটি শুধু একটি হেক্স এনটিটির ঐচ্ছিক x-এ কেস-অসংবেদনশীল — © এবং © দুটোই © দেয়। সন্দেহ থাকলে, মুখস্থ থেকে টাইপ করার বদলে এখানকার রেফারেন্স তালিকা থেকে ঠিক কোডটি কপি করুন। একটি নেমড এনটিটিতে কেস ভুল হলে চিহ্নের বদলে কাঁচা কোড প্রদর্শিত হয়, যা হাতে-লেখা HTML টেমপ্লেটে বাগের একটি সাধারণ উৎস।
এটি FreeFormatter বা W3Schools এনটিটি টেবিলের সাথে কীভাবে তুলনীয়?
FreeFormatter.com এবং W3Schools দুটোই স্ট্যাটিক HTML এনটিটি রেফারেন্স টেবিল দেয়, কিন্তু আপনি শুধু কোড খুঁজে দেখতে পারেন — নিজের টেক্সট এনকোড বা ডিকোড করতে পারেন না। FreeFormatter-এর এনটিটি এনকোডার সবচেয়ে কাছাকাছি বিকল্প, কিন্তু প্রতিটি রূপান্তরের জন্য একটি ফর্ম সাবমিট ও পেজ রিলোড দরকার হয়, এবং এর এনটিটি তালিকা শুধু HTML4 নেমড এনটিটি কভার করে। W3Schools প্রায় ২৫৫টি নেমড এনটিটি দেখায়। এই টুল সম্পূর্ণ HTML5 নেমড ক্যারেক্টার রেফারেন্স সেট কভার করে — ২,২০০-এর বেশি এন্ট্রি — এবং অনুসন্ধানযোগ্য রেফারেন্সকে একটি লাইভ এনকোডার ও ডিকোডারের সাথে একই জায়গায় মিলিয়ে দেয়, আপনি টাইপ করার সাথে সাথে রিয়েল টাইমে আপডেট হয়।
এই টুল কি মোবাইলে (আইফোন, অ্যান্ড্রয়েড) কাজ করে?
হ্যাঁ, অ্যান্ড্রয়েডে Chrome এবং আইফোনে Safari-সহ মোবাইল ব্রাউজারে এনকোডার, ডিকোডার এবং এনটিটি তালিকা সবই সম্পূর্ণভাবে কাজ করে। ছোট স্ক্রিনের জন্য লেআউট মানিয়ে নেয় যাতে দুটি পেন উলম্বভাবে সাজানো থাকে। মোবাইলের জন্য একটি টিপ: এক-ক্লিক কপি সঙ্গে সঙ্গে না হলে ব্রাউজারের কপি অপশন ট্রিগার করতে এনটিটি তালিকার একটি সেলে ট্যাপ-হোল্ড করুন। কোনো অ্যাপ ডাউনলোড দরকার নেই — টুলটি যেকোনো আধুনিক মোবাইল ব্রাউজারে একটি স্ট্যান্ডার্ড ওয়েব পেজ হিসেবে চলে। কোনো সাইনআপ নেই, কোনো অ্যাকাউন্ট নেই, এবং কোনো ডিভাইসে ব্যবহারের সীমা নেই। পেজ লোড হওয়ার পর এটি অফলাইনেও কাজ করে।
Related tools
সব টুল দেখুন
নতুন YAML Formatter
Validate, beautify, and convert YAML online. Real-time syntax highlighting, error detection with line numbers, and one-click JSON export.
জনপ্রিয় JSON ফরম্যাটার
তাৎক্ষণিক ত্রুটি ইঙ্গিত সহ JSON সুন্দর করুন, মিনিফাই ও যাচাই করুন।
Base64 এনকোড / ডিকোড
এক ক্লিকে টেক্সট ও ফাইল Base64-এ ও থেকে রূপান্তর করুন।
নতুন ডিফ চেকার
দুটি টেক্সট তুলনা করুন এবং প্রতিটি পার্থক্য পাশাপাশি বা ইনলাইনে হাইলাইট করুন।
নতুন URL এনকোডার / ডিকোডার
টেক্সট পার্সেন্ট-এনকোড বা ডিকোড করুন এবং query string পার্স করুন — সব আপনার ব্রাউজারে।
নতুন Cron এক্সপ্রেশন বিল্ডার
একটি Cron সময়সূচি সহজ ভাষায় ব্যাখ্যা করুন এবং পরবর্তী রান সময় প্রিভিউ করুন।