HTML Spacing for text, lines and paragraphs.
One of the commonest challenges when dealing with HTML is spacing of text, lines and paragraphs. This is because the way whitespace is dealt with when writing HTML code is quite different from other text documents that you may be used to. In this tutorial I’ll explain how to achieve the various forms of spacing needed in documents using HTML code.
What is whitespace?
This is a string of text composed of spaces, tabs or line breaks that is needed to make content on a webpage easier to read.
How does HTML handle whitespace?
Unlike other text editing programs like Microsoft word, which allow typing of spaces to separate words and other elements in a document, web development and design platforms do not work in this way.
HTML in particular follows the whitespace collapsing property. This means that regardless of the number of spaces you leave in between text and elements, the web browser will automatically reduce them to one space.
I’ll use the sample HTML code below to demonstrate the various aspects of spacing in HTML.
When this code is rendered in a web browser, the text in the paragraph will appear as shown below:
The whitespace in between words is treated as a single character, and whitespace at the start and end of elements and outside elements is ignored.
HTML text spacing.
To add spaces in text we use the non-breaking space character entity “ ”. This character acts as a standard space character but does not break into a new line. When two words are separated by this character, they will appear on the same line in the web browser.
You can also use “ ” to add two spaces and “ ” for four spaces as demonstrated in the diagram below.
HTML line spacing
Sometimes you may want add a line break to your content but without using a new paragraph. In this case you use the HTML break <br> tag. To create a line break simply write <br>. No need for a closing tag.
You can even use more than one of these line break tags to create larger spaces as I have demonstrated below.
Why using inline HTML elements for spacing is not advisable.
Although I have pointed out the use of inline HTML non-break spaces and line break <br> tags for creating spaces in a webpage, it is not the best way of achieving this. In modern web development and design, HTML is mainly used for structuring webpages and the styling and spacing is done using CSS.
Using the example given above, if you use three <br> tags to add a certain amount of space to your paragraphs, then you will have these tags all through your code to create the required space. This will create a lot of extra markup that will end up bloating your webpages and significantly slowing down your site.
Therefore, only use these inline HTML spacing elements where necessary otherwise it is always advisable to use CSS padding and margin properties for spacing HTML elements. This makes the code lighter and easier to maintain.
HTML paragraph spacing
Paragraphs are created using the HTML paragraph <p> tag and the paragraph element is a block-level element. This means that its default width is set to the width of the entire page and there is a line break before and after the block element.
When the HTML paragraph element is rendered in a browser, it 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.
Using the HTML <pre> Tag
This tag is used for preformatting your HTML text to prevent your HTML spaces from collapsing 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.
In the example below I have kept the spacing I had initially in my HTML code by changing the <p> to <pre> tags