in HTML
Web structure starts with solid HTML. Learn how in HTML contributes to accessible and semantic web pages in the tutorial below.
Introduction
Certain characters are reserved in HTML and need to be represented using character entities. One way to achieve this is by utilizing the following technique.
&name_of_entity // 1
// or
&#number_of_entity // 2
- In the first example, we displayed the reserved characters' entity names.
- In the second example, we have used the entity number to display the character.
- It is a character entity denoted by the non-breaking or fixed space.
- We can take the help of this entity to provide the space, and this space does not break the line into new lines.
- It is also similar to the regular space.
  Entity
Syntax
The   entity can be implemented using the syntax provided below:
<p>&nbsb;</p>
// or
<p></p>
Example 1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>This is a regular space.</p>
</body>
</html>
Output:
Explanation:
In the code snippet above, the   entity is utilized to enable the insertion of multiple spaces within a single line. To incorporate additional spaces, it is necessary to include each time an extra space is needed.
How to Add Non-breaking Spaces in HTML with  
When entering multiple spaces in HTML code, the browser typically condenses them to a single space. To preserve multiple spaces, the character entity can be utilized. Let's illustrate this with an example that does not employ the character entity:
<!DOCTYPE html>
<html>
<head>
<title>Multiple Spaces Example</title>
</head>
<body>
<p>This text contains multiple spaces.</p>
</body>
</html>
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
max-width: 800px;
margin: 0 auto;
font-size: 2rem;
}
span {
background-color: #2ecc71;
}
</style>
</head>
<body>
<div>
<p>
C# Tutorial is a popular website for learning Java programming and other
related technologies. With its vast collection of tutorials, examples,
and quizzes, C# Tutorial serves as a valuable resource for both beginners
and experienced programmers. The website covers various topics,
including Java, Python, C++, Android development, web development, and
more. Its user-friendly interface and well-structured content make it
easy to navigate and comprehend. C# Tutorial also provides real-world
project ideas, interview questions, and job preparation materials,
enhancing users' practical skills and employability. With continuous
updates and a dedicated community, C# Tutorial remains a go-to platform
for individuals seeking comprehensive and reliable programming
knowledge.
</p>
</div>
</body>
</html>
Output:
Explanation:
In the code snippet above, there are instances where more than two spaces have been used between words. However, web browsers typically only render a single space by default.
Now, let's refactor the previous code using the non-breaking space entity, .
Example 2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
max-width: 800px;
margin: 0 auto;
font-size: 2rem;
}
span {
background-color: #2ecc71;
}
</style>
</head>
<body>
<div>
<p>
C# Tutorial is a popular website for learning Java programming and other
related technologies. With its vast collection of tutorials, examples,
and quizzes, C# Tutorial is a valuable resource for beginners
and experienced programmers. The website covers various topics,
including Java, Python, C++, Android development, web development, and
more. Its user-friendly interface and well-structured content make it
easy to navigate and comprehend. C# Tutorial also provides real-world
project ideas, interview questions, and job preparation materials,
enhancing users' practical skills and employability. With continuous
updates and a dedicated community, C# Tutorial remains a go-to platform
for individuals seeking comprehensive and reliable programming
knowledge.
</p>
</div>
</body>
</html>
Output:
Explanation:
In the code snippet provided earlier, there are 5 consecutive empty spaces between two words within a paragraph. This spacing is achieved by including the non-breaking space entity ( ) 5 times between the two words in the paragraph. It's essential to use the character entity to create such spacing within the code.
What If You Want a Bunch of Spaces in Your Code?
In cases where 10 blank spaces are required within a paragraph, the repetitive use of can become monotonous and uninteresting. To introduce more diversity and engagement in the code, it is advisable to utilize different character entities. Specifically, the   entity can be employed to represent 2 non-breaking spaces, while the   entity can be used to signify 4 non-breaking spaces.
Example 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
max-width: 800px;
margin: 0 auto;
font-size: 2rem;
}
span {
background-color: #2ecc71;
}
</style>
</head>
<body>
<div>
<p>
C# Tutorial is   a popular website for learning Java programming and other
related technologies. With its vast collection of tutorials, examples,
and quizzes, C# Tutorial is a valuable resource for beginners
and experienced programmers. The website covers various topics,
including Java, Python, C++, Android   development, web development, and
more. Its user-friendly interface and well-structured content make it
easy to navigate and comprehend. C# Tutorial also provides real-world
project ideas, interview questions, and job preparation materials
enhancing users' practical   skills and employability. With continuous
updates and a dedicated community, C# Tutorial remains a go-to platform
for individuals seeking comprehensive and reliable programming
knowledge.
</p>
</div>
</body>
</html>
Output:
Explanation:
In the code snippet provided, we have added 5 empty spaces using the HTML entity   for 4 spaces and for 1 space.
Why would You Need a Non-breaking Space in Your Code?
Occasionally, HTML automatically inserts line breaks between words even when not necessary. This behavior can be avoided by using a character entity. By inserting the character entity between words, it will only create a space between them without causing a line break. Let's examine the code snippet below.
Example 4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
max-width: 800px;
margin: 0 auto;
font-size: 2rem;
}
span {
background-color: #2ecc71;
}
</style>
</head>
<body>
<div>
<p>
C# Tutorial is a popular website for learning Java programming and other
related technologies. With its vast collection of tutorials, examples,
and quizzes, C# Tutorial serves as a valuable resource for both beginners
and experienced programmers. The website covers various topics,
including Java, Python, C++, Android development, web development, <span>and
more.</span> Its user-friendly interface and well-structured content make it
easy to navigate and comprehend. C# Tutorial also provides real-world
project ideas, interview questions, and job preparation materials,
enhancing users' practical skills and employability. With continuous
updates and a dedicated community, C# Tutorial remains the go-to platform
for individuals seeking comprehensive and reliable programming
knowledge.
</p>
</div>
</body>
</html>
Output:
Conclusion
In the previous section, we learned that by utilizing the   and   character entities, it is achievable to showcase empty spaces on a web browser. This functionality cannot be achieved solely by pressing the spacebar.
