ใน HTML บางครั้งต้องสร้างช่องว่าง และไม่ได้ง่ายแค่กด spacebar โดยเฉพาะถ้าต้องการช่องว่างหลายช่องติดกันหรือแท็บ HTML มักจะ collapse ช่องว่างหลายช่องให้เหลือแค่ช่องเดียว นี่คือที่มาของ HTML entities บทความนี้ดู HTML entities ต่างๆ ที่ช่วยสร้างช่องว่างขนาดต่างๆ
มี 4 ประเภทช่องว่างหลักใน HTML: thin space, non-breaking space, en space, และ em space โค้ดด้านล่างแสดงความแตกต่างของขนาด:
<!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>
ประเภทช่องว่างต่างๆ ใช้งานต่างกัน ในตัวอย่างโค้ดนี้ เปรียบเทียบช่องว่างมาตรฐาน (spacebar) กับ HTML entity
<!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>
เมื่อมีวลี ชื่อ หรือหมายเลขที่ไม่ควรขึ้นบรรทัดใหม่ ใช้ entity เมื่อมีบล็อกข้อความที่ต้องการเน้นในบรรทัด/ย่อหน้าแยก ใช้ entity  
ตารางนี้สรุปรหัสสำหรับขนาดช่องว่างต่างๆ:
รหัสเหล่านี้ใช้ได้ทั้งหมดสำหรับขนาด/ประเภทช่องว่าง Browser support กว้างขวางสำหรับ Entity Names แต่หากไม่รองรับ ใช้ Hex และ Dec codes แทนได้
