5 Easy Ways to Insert Spaces in HTML
Last Updated :
29 May, 2024
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:
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.
HTML
<!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().
HTML
<!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:
&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.
HTML
<!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:
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.
HTML
<!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:
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>).
HTML
<!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 :
Please Login