04/02/2024 | News release | Distributed by Public on 04/01/2024 22:08
Published: April 02, 2024
If there's one thing I've learned in my journey as a web developer, it's that HTML, while straightforward, can have its quirks. Take, for instance, the challenge of adding more than one space between words or characters in HTML. When I first encountered this, I naively thought pressing the spacebar repeatedly would do the trick, just like in a word processor. But, oh, was I wrong!
Here's the thing about HTML space management: it doesn't play by the rules of regular text editors. I found out the hard way that if you keep hitting the spacebar in an HTML document, expecting a string of spaces, you'll end up with just a single space. This is because HTML has a unique way of handling whitespace, something I've come to appreciate (and sometimes grumble about) over my coding journey.
So, let's dive into how you can master the art of spacing in HTML.
) Tag
Tangible tips and coding templates from experts to help you code better and faster.
HTML handles the content of a web page. If your content requires extra spacing to make sense, you can try any of the methods below.
However, if you want to add space for styling purposes (for instance, whitespace between elements), we recommend using CSS instead - jump to the next section to learn how.
If you just mash the spacebar in HTML, the browser will condense the spaces you add down to just one, like in the example below:
See the Pen Whitespace Collapse Example by Christina Perricone (@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.
While this rule is sometimes inconvenient, there are a few workarounds that beginner HTML programmers should know.
The simplest way to add a space in HTML (besides hitting the spacebar) is with the non-breaking space entity, written as or  .
Multiple adjacent non-breaking spaces won't be collapsed by the browser, letting you "force" several visible spaces between words or other page elements.
See the Pen HTML Space: nbsp example by Christina Perricone (@hubspot) on CodePen.
When rendered in the browser, a non-breaking space will look just like a normal space.
The only difference is that this space will never break to a new line - two words or elements separated by will always appear on the same line. This is useful if splitting two pieces of text would be confusing for the reader, such as in the case of "9:00 AM" or "1 000 000."
You can also use the additional HTML entities   and   to add two and four non-breaking spaces respectively:
See the Pen HTML Space: ensp and emsp example by Christina Perricone (@hubspot) on CodePen.
Follow the same instructions as above to take advantage of this handy piece of code.
While ,  , and  , can come in handy, it shouldn't be used excessively, since avoiding line breaks may cause problems with rendering the content in the browser.
Also, avoid using a non-breaking space for styling reasons, like indenting or centering an element on a page - styling should be handled with CSS.
Want to learn more about HTML? Download our free guide for best practices for getting started with HTML.
) Tag
Another way to prevent your HTML spaces from collapsing is by preformatting your HTML text, which retains all spaces and line breaks in your HTML.
When the HTML is rendered in the browser, the text will look like it does in the HTML file. Preformatting is useful for text content with a visual component, like poetry or ASCII art.
To preformat your text, place it inside a tag:
See the Pen HTML Space: pre example by Christina Perricone (@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.
If you want to prevent a line break between two words, use a non-breaking space. If you want to insert a line break, use the HTML break tag, written as
. You don't need a closing tag here - just writing
adds a line break.
The break tag is useful for instances where a line break is necessary to understand the content, but where you don't want to necessarily use a new paragraph element, such as in an address:
See the Pen HTML Space: br example by Christina Perricone (@hubspot) on CodePen.
The break tag is meant for single line breaks, and not more than one in a row. If you want to add extra whitespace between pieces of text, use CSS padding and margins instead for cleaner code. Or, you can use an HTML tag, as we'll see next.
The 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 width of the entire page, 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 Christina Perricone (@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.
For placing spaces that have more to do with the styling of your page than the content, use Cascading Style Sheets (CSS). With CSS, you can apply and alter page-wide and site-wide styling rules with just one or two small rule changes, instead of changing each instance in your HTML - just make sure you're adding CSS externally.
Here are some handy uses of CSS for adding spacing between your content.
If you want to place an indent on the first line of a block element like , use the CSS text-indent property. For example, to add an indent of 4 spaces, apply the rule text-indent: 4em; to the element. 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 Christina Perricone (@hubspot) on CodePen.
By using this technique, you can quickly lengthen or shorten all your indentations by changing the value of text-indent. This is much easier than adding or removing multiple instances of for every indented paragraph.
Instead of using HTML spaces to align your text a certain way, 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 Christina Perricone (@hubspot) on CodePen.
Every HTML element can be given margins and padding, as illustrated by the CSS box model:
To add whitespace outside an element's border, we can adjust its margin value in CSS. For spacing inside a border, we can alter its padding value for a similar effect. Both are demonstrated below:
See the Pen HTML Space: margins and padding by Christina Perricone (@hubspot) on CodePen.
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.
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.