Thematic breaks (hr tag) in HTML

Hey you guys What’s up! Today in this post we will know about thematic breaks (Horizontal rule) in HTML. We will see how to use the hr tag to put a thematic break on your web page. So let’s understand the thematic break.

Suppose you are writing a paragraph for your webpage and you want to divide your paragraph from the middle or from somewhere within your paragraph. How would you do that? you can do this easily by using the HTML hr tag. What the hr element does is that it adds a logical divider between sections of a page or paragraphs without introducing a new heading level.

Let’s see it with example.

<!DOCTYPE html>
<html>
<body>

<h1>Thematic break in HTML</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Pellentesque tortor nunc, iaculis vel orci fringilla, 
    elementum gravida nisi. Morbi sem ligula, imperdiet et eros at, 
    vehicula tempor ante. Sed vulputate efficitur quam, nec blandit nisi. 
    Etiam imperdiet, orci quis dignissim tincidunt, ligula est semper nisl, 
    eget gravida urna nulla a risus. Suspendisse potenti. Pellentesque 
    faucibus a nulla id congue. Orci varius natoque penatibus et magnis
    dis parturient montes, nascetur ridiculus mus..</p>

<hr>

<p>Cras vel lorem a ante luctus aliquet. Cras tempor felis id eleifend dapibus.
    Duis ex odio, condimentum eget nibh congue, ultrices scelerisque augue.
    Nam eget eleifend elit. Pellentesque habitant morbi tristique senectus 
    et netus et malesuada fames ac turpis egestas. Suspendisse feugiat lorem
    quis laoreet tristique. Suspendisse quis urna metus. Curabitur felis tellus,
    eleifend quis consectetur id, bibendum id tortor.</p>


</body>
</html>

Output :

Notice the horizontal line in the output above. I have divided the paragraph using hr element.

And one more thing is that hr is an empty element. That means hr element does not have ending tag. you just put it at the place where you want the thematic break.

That’s it.

Now you know what thematic break is and how to use it.

Have any question in mind?

Comment below.

Goodbye.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: