HTML Hr Tutorial

<hr> element stands for horizontal and we it to add a horizontal line.
<hr> is a single tag element which means there's no </hr>.

Wherever you put <hr> element, browsers will produce a line in that position.

Example:

<!DOCTYPE html>
<html>
<title> Learning HTML is fun 🙂 </title>
<head>
</head>
<body >
<h1>This is heading h1</h1>
<p>A simple paragraph is comprised of three major components.<hr> The first sentence, which is often a declarative sentence, is called the “topic sentence.” <hr>It introduces the topic of the paragraph, setting its tone and mood. The next few sentences elaborate, explain, and exemplify the topic introduced in it.</p>
<hr>
<hr>
<hr>
<h2>This is heading h2</h2>
<p>A simple paragraph is comprised of three major components.<br> The first sentence, which is often a declarative sentence, is called the “topic sentence.” <br>It introduces the topic of the paragraph, setting its tone and mood. The next few sentences elaborate, explain, and exemplify the topic introduced in it.</p>
</body>
</html>

Here I have added 2 <hr> elements to the first paragraph and 3 <hr> elements between the two paragraphs.

As the result shows, using <hr> element will cause a horizontal line in a new line even though you put <hr> element within a sentence.

Note: The use of <hr> element is mostly for stylistic reason and to separate each paragraph or other elements like a picture or a link from another element. But there are other more practical ways in which you can add horizontal line to a letter/ word/ sentence or even the entire paragraph or any other HTML element, which we will talk about in CSS tutorial.