Another crucial component of the HTML language that you will use to create the content that users’ browsers see is the paragraph. A paragraph is typically a block of text that always begins on a new line. And the HTML <p> element defines a paragraph.
Read on to learn more about the <p> tag.
About the <p> Tag
Browsers place a margin (white space) before and after a paragraph that begins on a new line. The addition of these spaces is automated. So no matter how much space you add to your HTML code, it will only add one space.
<!DOCTYPE html>
<html>
<head>
<title>FanielTech HTML Tutorial</title>
</head>
<body>
<p>This is a paragraph example using </p>
<p>This is a paragraph example using </p>
</body>
</html>However, there are times when you might need more than just one line space for the contents of a p tag. This is where the “non-breaking space” strategy is incorporated.
Non-breaking Space
As mentioned above, HTML only adds one line space to paragraph content. So even if you add twelve blank spaces to your HTML code, you’ll only see one space in the browser.
One of the challenges this rule presents is the possibility that one or more words that should be together may separate into a new line. Therefore, by using the non-breaking space element, you can add the space you require and override the paragraph spacing’s default organization. The “ ” character entity is used to insert a non-breaking space to accomplish this.
Character entities are reserved symbols or a combination of displayed characters. For instance, in HTML tags, the less than symbol () and greater than symbol (>) are reserved. If you want them to act as the mathematical operators they are, you must write them as “< and >.”
Therefore, to add the space, use the   character entity. It overrides the HTML infrastructure’s one-space rule, allowing multiple blank spaces to be displayed.
HTML CODE
<!DOCTYPE html>
<html>
<head>
<title>FanielTech HTML Tutorial</title>
<link rel="stylesheet" href="myStyle.css" >
</head>
<body>
<!-- The placement of equals to one line space, so homany times you enter determines how many line spacing you get -->
<p>
One of the challenges this rule causes is that one or more of the words that are supposed to be together might break into a new line. So with the non-breaking space element, you can create the space you need, overriding the default structure of the paragraph spacing.
</p>
</body>
</html>
For two non-breaking spaces and four non-breaking spaces, respectively, HTML offers the   and   character entities.
<!DOCTYPE html>
<html>
<head>
<title>FanielTech HTML Tutorial</title>
<link rel="stylesheet" href="myStyle.css" >
</head>
<body>
<!-- The placement of   equals to 2 line space,   equals 4 line line spacing on each application -->
<p>
One of the challenges this rule causes is that   one or more of the words that are supposed to be together might break into a new line. So with the non-breaking space element, you can create the space you need,     overriding the default structure of the paragraph spacing.
</p>
</body>
</html>
What is the <hr> Function in a Paragraph Tag?
You can use the <hr> tag to make a thematic break in an HTML page. This horizontal rule can be applied to an HTML page to separate content or denote a change.
The <hr> is valuable when you want to break the flow of content by drawing a horizontal line between paragraphs.
As a block element in HTML, the hr tag fills the entire width of the page and begins a new line. Line breaks are present both before and after block elements. And a closing tag is not necessary for the HTML <hr> tag.
<!DOCTYPE html>
<html>
<head>
<title>FanielTech HTML Tutorial</title>
</head>
<body>
<h1>In this example, we are using the hr tag to change the focus of the content in p tag</h1>
<p>This is a paragraph example using </p>
<!-- the hr tag will introduce a line which will separate the above p tag content from the one below -->
<hr>
<p>This is a paragraph example using </p>
</body>
</html>
The HTML<br> element, which defines a line break, is another element you can use to make paragraph content easier to read. It allows you to begin a new line (or paragraph) without initiating a new paragraph.
<!DOCTYPE html>
<html>
<head>
<title>FanielTech HTML Tutorial</title>
</head>
<body>
<h1>In this example, we are using the br tag to break into a new line</h1>
<!-- the br tag will break into a new line depending on the placement -->
<p> Learning how to <br>design a website is one of<br> the easiest things you can<br> do in the world of programming.<br> Learning HTML is the core to this profession. </p>
</body>
</html>Conclusion
In this article, you learned about paragraph spacing, line breaks in HTML, and non-breaking spaces.