Inserting spaces allows developers to have more control over the spacing between text, elements, and paragraphs and helps in managing the layout of the content efficiently. Proper spacing enhances the readability of text, making it easier for users to understand and engage with the content. We will be going to insert Spaces in HTML with 5 Easy Ways.
Table of Content
5 Easy Ways to Insert Spaces in HTML
1. 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: This example illustrates 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:
Explanation:
- In the given example, five spaces contains multiple spaces between the words five and spaces.
- Without non-breaking spaces, browsers would collapse consecutive spaces into a single space when rendering.
- By using between five and spaces, each space is preserved, maintaining the intended formatting.
- This ensures that the text appears as intended, with the exact number of spaces between the words five and spaces.
2. Using Multiple Non-Breaking Spaces:
We can achieve multiple non-breaking spaces in different ways including ,  , and  .
Syntax:
  Or $emsp;Example: This example code illustrates 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 GeeksforGeeks
</h1>
<p>
The above text has two space
between to and GeeksforGeeks
</p>
<h3>Hello Geeks</h3>
<p>
The above text has four space
between Hello and Geeks
</p>
</body>
</html>
|
Output:
Explanation:
- In the above example we contains two headings with text “Welcome to GeeksforGeeks” and “Hello Geeks”, each separated by spaces.
- The first heading uses a normal space, while the second uses an em space ( ) to add more spacing.
- The paragraphs below each heading describe the number of spaces used in the respective headings.
- Non-breaking spaces help maintain consistent spacing and prevent browsers from collapsing consecutive spaces.
3. Using Preformatted Text Tag:
The Preformatted Text <pre> tag is used to display the text exactly as it defined in the HTML document, whitespace, line breaks are rendered exact same.
Syntax:
<pre>Content...</pre>Example: This example code illustrates 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
GeeksforGeeks
</h1>
<pre>
**
****
******
***********
</pre>
</body>
</html>
|
Output:
Explanation:
- In this example we sets up a viewport and character encoding for consistency.
- It includes a heading “Welcome to GeeksforGeeks” with spaces between each word.
- The <pre> element displays a pattern of asterisks with increasing width on each line.
- Preformatted text preserves white space, including leading spaces and line breaks, exactly as they appear in the HTML code.
4. 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: This example code illustrates 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>
GeeksforGeeks
</h1>
</body>
</html>
|
Output:
Explanation:
- In this example we with defined character encoding and viewport for consistency.
- Heading “Welcome to” followed by “GeeksforGeeks” on a new line within an <h1> element.
- The <br> tag creates a line break, ensuring “GeeksforGeeks” starts on a new line.
5. 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: This example code illustrates 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:
Explanation:
- In the above example we defined character encoding and viewport for consistency.
- Two paragraphs discussing the importance of web design for website performance and user engagement.
- Properly structured content within <p> tags for semantic markup.
- This layout ensures readability and accessibility of the information presented on the web page.