এইচটিএমএল-এ, কখনও কখনও আমাদের স্পেস তৈরি করতে হয় এবং এটি তৈরি করতে স্পেসবার ব্যবহার করার মতো সহজ নয়। এটি বিশেষভাবে সত্য যদি আমাদের একটি সারি বা ট্যাবে একাধিক স্পেস প্রয়োজন হয় - 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>
বিভিন্ন স্থানের ধরন বিভিন্ন উদ্দেশ্যে পরিবেশন করতে পারে। এই কোডের উদাহরণে, আমরা স্পেসবার বনাম এইচটিএমএল সত্তা ব্যবহার করে একটি স্ট্যান্ডার্ড স্পেসের মধ্যে পার্থক্যগুলি দেখি৷
<!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 অক্ষর সত্তা ব্যবহার করুন।
এই সারণীটি কোডগুলিকে রূপরেখা দেয় যা বিভিন্ন আকারের স্থানগুলির সাথে ব্যবহার করা যেতে পারে:
এই কোডগুলির যেকোনো একটি তাদের নিজ নিজ স্থানের আকার/টাইপের জন্য কাজ করে। সত্তার নামগুলির জন্য ব্রাউজার সমর্থন মোটামুটি বিস্তৃত, কিন্তু যদি এটি না হয় তবে হেক্স এবং ডিস কোডগুলিও কাজ করে৷
