5 Easy Ways to Insert Spaces in HTML

Learn More About HubSpot's Free CMS Software

If there's one thing I've learned in my web development journey, it's that HTML has its quirks. For example, you would think that adding multiple spaces between text in HTML would be as simple as hitting the spacebar.

But if you keep adding regular spaces to an HTML document and expect a string of spaces, you'll end up with just a single space.

As it turns out, there are multiple ways to add spaces that you may not know about and may come in handy at some point in your coding journey. Let's explore these methods and figure out which ones are best for your project.

Table of Contents

• How to Insert a Space in HTML
• 6 Easy Ways to Insert Spaces in HTML
• How to Insert a Space in CSS
• Accessibility Concerns with HTML Spaces

How to Insert a Space in HTML

First, let me clarify what we mean by "space." We'll mainly be talking about how to add space between words inside of an element like a paragraph. If you want to add space for styling purposes (for instance, whitespace between page elements), we recommend using CSS instead - jump to the section below to learn how.

Now, as you probably know, you can use the spacebar to add a standard white space character between characters in HTML, and this is the method that you should use most of the time.

But, as mentioned, if you try to use this method to add multiple adjacent spaces, the browser will condense these spaces down to just one. See the example below:

See the Pen Whitespace Collapse Example by HubSpot (@hubspot) on CodePen.

This behavior is called whitespace collapse. Browsers will display multiple HTML spaces as one space, and will also ignore spaces before and after elements and outside of elements. Doing this ensures that web page content displays consistently across browsers.

So what if you still want to add multiple spaces? Here are some HTML hacks that you can try.

6 Easy Ways to Insert Spaces in HTML

1. Add Space in HTML with a Non-Breaking Space ( )

Best for: Adding a space where you don't want a line break to occur.

The quickest and easiest way to add a space in HTML (besides hitting the spacebar) is with the non-breaking space entity, written as  . This HTML space code will render like a regular space on the page, but it preserves whitespace - you can put multiple of them together, and the browser will render multiple visible spaces.

See the Pen HTML Space: nbsp example by HubSpot (@hubspot) on CodePen.

The only difference between a non-breaking space and a standard whitespace character is that a non-breaking space will never break to a new line - two words or elements separated by   will always appear on the same line.

See the example below: Moving the slider changes the width of the bounding box, causing line breaks between words. Words that are separated by   will stay on the same line because the space is non-breaking:

See the Pen HTML Space: nbsp example (with resizing) by HubSpot (@hubspot) on CodePen.

Non-breaking spaces are especially useful when splitting two pieces of text would be confusing for the reader, such as:

• Time displays: "9:00 AM"
• Phone numbers: "Call us at 1 800 555 5555."
• Numbers with units: "10 mph" or "30 kg"
• Currency: "$ 50"

However, if you use   be careful that it doesn't cause the text to overflow its container, as the purpose of line breaks is to avoid content overflow. To reduce the chance of this happening, only use   in special cases. You can also control how content overflow behaves with CSS overflow properties.

Instructions

• Find the text where you'd like to add a space.
• Click between the two words you'd like to separate.
• Type in the entity  .
• Add as many as you want; one   equals one space.

2. Add Space in HTML with Longer Spaces (   )

Best for: Adding a space that is longer than usual between characters.

You can also use the additional HTML entities   (em space) and   (en space). An em space is equal to the current font size, and an en space is half of an em space. For example, if the font size is 16px, an   is 16 pixels wide and an   is 8 pixels wide.

See the Pen HTML Space: ensp and emsp example by HubSpot (@hubspot) on CodePen.

As you can see, em spaces and en spaces are usually wider than a standard whitespace character, making them a good alternative to using   multiple times. They originally got their names from being the same width as the characters "M" and "N" but this is no longer true for most typefaces.

Lastly, as with  , both   and   are not collapsible, so you can add multiple together to put more space between words.

Instructions

• Find the text where you'd like to add a space.
• Click between the two words you'd like to separate.
• Type in the entity   or  .

Learn More: The Beginner's Guide to HTML & CSS

Want to learn more about HTML? Download our free guide for best practices for getting started with HTML.

3. Add Space in HTML with Thin space ( )

Best for: Adding a space that is shorter than usual between characters.

The last HTML entity you can use is the thin space entity, written in HTML as  . You can use a thin space to create an even smaller space between characters. Its width is 1/5 to 1/6 of an em space and usually looks slightly smaller than a standard whitespace character.

You probably won't need thin spaces all that much, but they can give you more precise spacing that you might want for things like equations or currency.

See the Pen HTML Space: thin space example by HubSpot (@hubspot) on CodePen.

Instructions

• Find the text where you'd like to add a space.
• Click between the two words you'd like to separate.
• Type in the entity  .

4. Add Space in HTML with the Preformatted Text (

) Tag

Best for: Adding text when you want to preserve the exact appearance/formatting of the text.

Another way to prevent your HTML spaces from collapsing is by preformatting your HTML text with the (preformatted) element. Text inside a tag will appear on the front end exactly as it does in the HTML code. It retains all spaces and line breaks in your HTML.

See the Pen HTML Space: pre example 1 by HubSpot (@hubspot) on CodePen.

is useful when you want to preserve the aesthetic of the text itself - for instance, if you're sharing a poem:

See the Pen HTML Space: pre example 2 by HubSpot (@hubspot) on CodePen.

Or, if you want to share ASCII art. If I wanted to display this cool ASCII art piece of the HubSpot logo on my website, pasting it into a paragraph would mess up the formatting.

But if I paste the art into my html file and put it inside a element, it displays exactly as pasted:

See the Pen HTML Space: pre example 3 by HubSpot (@hubspot) on CodePen.

Note that web browsers apply a monospaced font to text inside tags, but you can easily override this with the CSS font-family property.

Instructions

• Type to open up your preformatted section.
• Paste your pre-formatted text below the tag. Pre-formatted text can include line breaks and multiple spaces between words and characters.
• Type to close your pre-formatted section.

5. Add Space in HTML with the Break (
) Tag

Best for: Inserting a line break without creating a new paragraph.

So far, we've discussed different ways of adding spaces between text while keeping the text on the same line. But what if you want to insert a line break instead?

In that case, use the HTML break tag, written as
. You don't need a closing tag - just writing
adds a line break.

The break tag is useful if a line break is necessary to understand the content, but you don't want to necessarily use a new paragraph element, such as in an address:

See the Pen HTML Space: br example by HubSpot (@hubspot) on CodePen.

Every break element you insert will create a new line break, so you can place multiple
tags to put more space between lines of text.

See the Pen HTML Space: br example 2 by HubSpot (@hubspot) on CodePen.

However, the break element is meant for single line breaks - If you want to add extra whitespace between lines of text, use CSS padding and margins instead for cleaner code. Or, you can use an HTML tag, as we'll see next.

Additionally, while
works well for adding line breaks when essential for the content's structure - like with addresses, email signatures, or poetry - it should be used sparingly otherwise, in favor of the tag.

Instructions

• Find the text where you'd like to add a line break.
• Type
  to add a line break.
• I recommend using no more than one
  per instance.
• If you need more space than a line break offers, consider using the tag or using CSS margin and padding instead.

6. Add Space in HTML with the Paragraph () Tag

Best for: Creating a new paragraph of text.

The paragraph element is one of the first you'll learn as a beginner, and for good reason. The tag denotes a paragraph in HTML, so it shows up everywhere.

is a block-level element, which means that (1) its default width is set to the full width of its parent container, and (2) there is a line break before and after the block element.

With , browsers will add some extra whitespace with this line break to make consecutive paragraphs more readable, so it can be used any time you're using blocks of text that are distinct from each other.

See the Pen HTML Space: p example by HubSpot (@hubspot) on CodePen.

The element also has the benefit of being a semantic HTML element. This means that the tag itself indicates what the element does (i.e., the paragraph tag denotes a paragraph of text), which makes your content more accessible for assistive technologies and helps search engines better index your web page.

Instructions

• Wrap your text inside a tag.
• tags usually come with automatic spacing before and after. But if you'd like to add more spacing, head over to your CSS document.
• Find the p CSS selector.
• Add margin and padding properties to increase whitespace, which we explain further below.

How to Insert a Space in CSS

We've talked about how to put spaces in your content. If the spaces you want to add have more to do with the style of your page than the content, then use CSS.

Why is CSS better in this case? Because with CSS, you can apply and alter page-wide and site-wide styling rules by changing just one or two pieces of code, instead of changing each instance of your HTML (just make sure you're applying CSS externally).

Here are some handy uses of CSS for adding spacing between your content.

CSS text-indent

If you want to indent paragraphs on your page, it's easiest to use the CSS text-indent property. This property indents the first line of the target element to your specification.

For example, if I want a paragraph to have an indent that is four spaces wide, I apply the rule text-indent: 4em to the paragraph. You can also use a different length unit like px or cm, or set the indent as a percentage of the page width:

See the Pen HTML Space: text-indent example by HubSpot (@hubspot) on CodePen.

With this method, I can quickly lengthen or shorten all of the indentations by changing the value of text-indent. Whereas, if you used   entities to make indents, you would have to add or remove them manually for every indented paragraph.

CSS text-align

Instead of using HTML spaces to align your text a certain way (like centering it), opt for the much cleaner solution of the CSS text-align property. With this property, you can align the text inside a block element to the left or right, as well as center or justify the text.

See the Pen HTML Space: text-align example by HubSpot (@hubspot) on CodePen.

See our full tutorial of the CSS text-align property for more info.

Margins and Padding

Most HTML elements can be given margins and padding, as illustrated by the CSS box model:

To add whitespace outside an element's border, I can adjust its margin value in CSS. For spacing inside a border, I can alter its padding value for a similar effect. Both are demonstrated below:

See the Pen HTML Space: margins and padding by HubSpot (@hubspot) on CodePen.

Accessibility Concerns with HTML Spaces

While the tips I've shared above are helpful for the occasional quick fix, one reason they shouldn't be overused is that they present accessibility problems.

Screen Reader Issues

As a best practice, the content of HTML itself should resemble what is visible on screen as closely as possible because this allows screen readers to parse the document and provide a clear output to users.

HTML space entities like  ,  ,  , and   may be read differently from a standard space character by a screen reader, or cause unnecessary pauses if multiple adjacent entities are used.

Using too many
tags can cause screen readers to incorrectly parse the page structure and give the user an inaccurate overview of the page content. For example, if you have two paragraphs of text and separate them with a break element instead of placing them in two separate paragraph elements, a screen reader may interpret these as one paragraph. Then, when a screen reader user is toggling through paragraphs on the page, they'll unintentionally skip over the second paragraph.

Similarly, with the tag, a screen reader may read out text inside of this tag differently if you use it as a substitute for a paragraph element.

What this all ultimately boils down to is using semantic HTML as much as possible in order for assistive technologies to parse the content correctly: Paragraph elements should be used for paragraphs, line breaks should be used sparingly, and standard whitespace characters should be used for spaces whenever possible.

Screen Resizing Issues

Many users with low vision need to resize the page content or zoom in on the content to see it. Because special HTML space entities may sometimes cause formatting issues, it's another reason to avoid them when possible.

Specifically, non-breaking spaces and the element can cause text overflow when a user zooms in, or on a mobile device, making text harder or even impossible to read. Again, I recommend using these methods sparingly to make your website as usable as possible for everyone.

Adding Extra Spaces in HTML

Dealing with whitespace collapse in HTML can sometimes feel like a minor annoyance, but through my experience, I've learned it's just part of the game. Luckily, there are numerous strategies to effectively manage it.

Here's a bit of wisdom from my experience: Leverage HTML tricks for managing content spaces, like adding spaces between words or creating single line breaks. These little tricks have often been my first line of defense in ensuring my content appears exactly as I want it to.

But when it comes to styling, CSS is your best ally. Using CSS to manage spaces, margins, and alignments allows for a cleaner, more efficient approach to designing your webpage layout. And even when you need to resort to HTML tricks, use them sparingly to preserve accessibility.

As a final piece of advice, remember that balancing HTML and CSS effectively is key to creating web pages that are not only functional but also visually appealing. It's this blend of structure and style that makes web design such an exciting field to work in.

Editor's note: This post was originally published in May 2021 and has been updated for comprehensiveness.

Topics:HTML

Don't forget to share this post!