HTML Line Break and Spacing Tutorial with Stone River eLearning

In one of our earlier blog posts, it was mentioned that there are separate HTML elements or tags to include a line break of an extra space between the texts. Well, now is the time that we introduce you to the HTML line break and spacing elements. However, before we start, it is important to understand that the web browser ignores all the extra white spacing between your texts and displays just a single space between two words.

CASE 1:

This is my text and I am checking something.

CASE 2 :

This is my text and I am checking something

The above two cases will have the same result on the browser window as it will ignore all the extra space between the words “and” and “I” in CASE 2, and display it in the same way as CASE 1.

How to insert extra space between texts?

The natural question that pops up in our mind after we realize that even by multiple click of the space button on the keyboard, the browser would still display only one space is, “How can I have extra spaces in my text then?” This is where the HTML’s non-breaking space comes into the picture. Typing“&ndsp;” gives you extra bit of space between your texts as non-breaking space is actually a standard space with the browser not breaking or wrapping a line of text at its point of occurrence.

When to use “ ”? When to avoid it?

The problem with “ ” is that many browsers ignore the consecutive appearance on the document and output a single or a couple of extra spaces. It depends on how your browser interprets the document, however; to be on the safer side, it is advisable to use “ ” only when you need one or two spaces between the texts in your document.

How to insert line break in HTML?

Now that we have discussed about inserting extra spaces between texts, the next hurdle is inserting a line break in the text displayed on the web browser. Since web browsers ignore all the extra spacing between texts, they will surely ignore if we try to give line break by pressing the “Enter button”. So how should be get a line break between texts? The answer is by using HTML elements, the element to be precise.

The HTML element falls under the inline elements category and is quite similar to the <hr> element discussed during the blog post on block level elements. Just like the <hr> tag, the tag does not need a closing tag and it gives a line break between the texts written just before and just after it.

Eg:

<!DOCTYPE html>
<html>
<head>
<meta charset =”UTF-8”>
<title> Line Break </title>
</head>
<body>
This text is before the line break 
<br> 
This text is after the line break. 
</body>
</html>

There is another way of inserting line breaks between texts in HTML, one that we have already discussed before. We discussed in length about the paragraph tag “” in the blog post on the block level elements, however; there is one added advantage of the paragraph tag and it is the line breaks that it inserts between the texts. The “” element arranges the text between it in the form of a paragraph and also introduces line spacing and breaks similar to that of a paragraph on the browser window. In simpler words, it means that two set of texts inside separate “” tags will have a line break similar to that of a paragraph between them.

Eg:

<!DOCTYPE html>
<html>
<head>
<meta charset =”UTF-8”>
<title> Line Break by Paragraph </title>
</head>
<body>
<p>This is the first paragraph </p>
<p>This is the second paragraph. </p> 
</body>
</html>

Download the source code here:

GET YOUR FREE HTML EBOOK!

(Visited 255 times, 1 visits today)