HTML-এ, কখনো কখনো আমাদের স্পেস তৈরি করতে হয়, এবং এটি স্পেসবার চাপা দিয়ে তৈরি করার মতো সহজ নয়। এটি বিশেষ করে সত্য যখন আমাদের এক সারলে একাধিক স্পেস বা ট্যাব দরকার হয়—HTML সেসব একাধিক স্পেসকে একক স্পেসে কালাপ্স করে দেয়। এখানেই HTML এন্টিটি কাজে আসে। এই আর্টিকেলে, আমরা বিভিন্ন HTML এন্টিটি দেখব যা আমাদের সকল আকারের স্পেস তৈরি করতে দেয়।
HTML এলিমেন্টে চারটি প্রধান স্পেস টাইপ আছে যাদের সাথে আমরা কাজ করতে পারি: থিন স্পেস, নন-ব্রেকিং স্পেস, এন স্পেস, এবং ইম স্পেস। নিচের কোড এডিটোরে চারটি টাইপের আকারের পার্থক্য আউটলাইন করা হয়েছে:
<!DOCTYPE html> <!-- <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title></title> <style> span { background: pink; } <style> body { font-family: Arial } </style> </head> <body style="font-family:Arial;"> <h1>Differences in Sizes of Space Entities in HTML</h1> <!-- At beginning of sentences --> <p style="font-size:16px;text-decoration:underline;font-weight:bold;"> Beginning of Sentences</p> <p><span> </span>I am a sentence.</p> <p><span> </span>I am a sentence.</p> <p><span> </span>I am a sentence.</p> <p><span> </span>I am a sentence.</p> <!-- in between words --> <p style="font-size:16px;text-decoration:underline;font-weight:bold;"> In Between Words</p> <p>I<span> </span>am<span> </span>a<span> </span>sentence.</p> <p>I<span> </span>am<span> </span>a<span> </span>sentence.</p> <p>I<span> </span>am<span> </span>a<span> </span>sentence.</p> <p>I<span> </span>am<span> </span>a<span> </span>sentence.</p> </body> </html>
বিভিন্ন স্পেস টাইপগুলো ভিন্ন উদ্দেশ্যে কাজে আসে। এই কোড উদাহরণে, আমরা স্পেসবার ব্যবহার করে একটি স্ট্যান্ডার্ড স্পেস এবং HTML এন্টিটি ব্যবহার করার পার্থক্য দেখছি।
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>repl.it</title> </head> <body style="font-family:Arial;"> <div> <strong>Using nbsp; example</strong> <br/> <br/> <div style="width:50px;height: 50px;border:1px solid red;margin:10px;">Dr. John Doe</div> <div style="width:50px;height: 50px; border: 1px solid red;margin:10px;">Dr. John Doe</div> <div style="width:50px;height: 50px;border:1px solid red;margin:10px;">Reno, NV</div> <div style="width:50px;height: 50px; border: 1px solid red;margin:10px;">Reno, NV</div> </div> <div> <strong>Using emsp; example</strong> <br/> <br/> <div style="border:1px solid red;margin:10px;"> <p>Here are some quotes.</p> <p> <em> —To be or not to be, that is the question...</em></p> <p> <em> —This above all: to thine own self be true...</em></p> <p> <em> —What's in a name? That which we call a rose By any other word would smell as sweet...</em></p> </div> <div style="border: 1px solid red;margin:10px;"> <p>Here are some quotes.</p> <p> <em> —To be or not to be, that is the question...</em></p> <p> <em> —This above all: to thine own self be true...</em></p> <p> <em> —What's in a name? That which we call a rose By any other word would smell as sweet...</em></p> </div> </div> </body>
যখন আপনার কাছে একটি ফ্রেজ, নাম বা নম্বর থাকে যা নেক্সট লাইনে র্যাপ হওয়া উচিত নয়, তবে nbsp ক্যারেক্টার এন্টিটি ব্যবহার করুন। যখন আপনার কাছে একটি টেক্সট ব্লক থাকে যেটি তার নিজস্ব লাইন বা প্যারাগ্রাফে জোর দিতে হবে, তবে emsp ক্যারেক্টার এন্টিটি ব্যবহার করুন।
নিচের টেবিলটি বিভিন্ন আকারের স্পেসের সাথে ব্যবহার করা কোডগুলো আউটলাইন করে:
এই কোডগুলো তাদের নিজস্ব স্পেস সাইজ/টাইপের জন্য কাজ করে। Entity Names-এর জন্য ব্রাউজার সাপোর্ট ভালো, কিন্তু যদি সেটি কাজ না করে, তবে Hex এবং Dec কোডও কাজ করে।
