5 Easy Ways to Insert Spaces in HTML
Inserting spaces provides developers with greater control over the spacing between text, elements, and paragraphs, aiding in the efficient management of content layout. Effective spacing enhances text readability, facilitating user comprehension and engagement with the content.
There are five easy ways to insert spaces in HTML which are as follows:
Table of Content
- Using Non-Breaking Space
- Using Multiple Non-Breaking Spaces
- Using Preformatted Text Tag
- Using Break Tag
- Using Paragraph Tag
Using Non-Breaking Space
The abbreviation of is a Non-Breaking Space entity used in HTML to insert a space between characters that prevents line breaks.
Syntax:
&nbps;
Example: To illustrate the implementation of Non-Breaking Space.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Non-Breaking Space</title>
</head>
<body>
<p>
The element have
five spaces
</p>
</body>
</html>
Output:
” ” in HTML
Using Multiple Non-Breaking Spaces
We can achieve multiple non-breaking spaces in different ways including ,  , and  .
Syntax:
  Or $emsp;
Example: To illustrate the implementation of Multiple Non-Breaking Spaces().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Non-Breaking Space</title>
</head>
<body>
<h1>
Welcome
to w3wiki
</h1>
<p>
The above text has two space
between to and w3wiki
</p>
<h3>Hello Beginner</h3>
<p>
The above text has four space
between Hello and Beginner
</p>
</body>
</html>
Output:
&emsp Or $emsp; in HTML
Using Preformatted Text Tag
The Preformatted Text <pre> tag is used to display the text exactly as it is defined in the HTML document, whitespace, and line breaks are rendered the same.
Syntax:
<pre>Content...</pre>
Example: To illustrate the implementation of Preformatted Text (<pre>) Tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Non-Breaking Space</title>
</head>
<body>
<h1>Welcome to
w3wiki
</h1>
<pre>
**
****
******
***********
</pre>
</body>
</html>
Output:
tag in HTML
Using Break Tag
The <br> tag in HTML is an empty, self-closing tag that represents a line break or newline within text.
Syntax:
<br>
Example: To illustrate the implementation of Break Tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Non-Breaking Space</title>
</head>
<body>
<h1>
Welcome to <br>
w3wiki
</h1>
</body>
</html>
Output:
Break tag in HTML
Using Paragraph Tag
The <p> tag in HTML is used to separate and structure the text content into paragraphs, providing clear visual separation between different sections of text.
Syntax:
<p>Content...</p>
Example: To illustrate the implementation of Paragraph (<p>).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
<title>Non-Breaking Space</title>
</head>
<body>
<p>
Web Design is a field related to
designing websites on the Internet.
Without a good design, a website
fails to perform well and cannot
produce a good impact on the user.
Design is a creative process that
affects the ranking of the brand.
</p>
<p>
A good website design helps
to create an engaging online
presence that captivates the
audience.
</p>
</body>
</html>
Output:
Contact Us