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 कोड भी काम करते हैं।