DEV Community

Joel Diharce
Joel Diharce

Posted on • Updated on

Line breaks and Horizontal Rules: A journey through time

Line Breaks

The <br> tag brings the text after the tag down to the next line, creating a line break, hence the name. If you've ever used the line break formatting option in Microsoft Word, you've seen this in action already.
"Wait, but why use that when you can simply use the <body> tags to create a new line?"
Good question! The answer: I don't know yet... but it does seem to be something that saves time and effort! Something I know developers seek out ways to do.

Example time!

Here is the code as written:
I will always order pepperoni on my pizza. <br> I love Italian sausage too, but pepperoni takes the cake!
Enter fullscreen mode Exit fullscreen mode
Now, here is the code as I intend the user to view it:

I will always order pepperoni on my pizza.
I love Italian sausage too, but pepperoni takes the cake!

What happens when you use multiple line break tags at once?

According to this video, it just pushes the lines down further!

Example time!

Here is the code as written (5x <br> tags):
I will always order pepperoni on my pizza. <br><br><br><br><br> I love Italian sausage too, but pepperoni takes the cake!
Enter fullscreen mode Exit fullscreen mode
Here is the code as I intend the user to view it:

I will always order pepperoni on my pizza.




I love Italian sausage too, but pepperoni takes the cake!

Horizontal Rules

The <hr> tag creates a Horizontal Rule. This includes what the line break does, as it puts the text following the tag down to the next line, but it also adds a horizontal line above it, dividing the text that comes before the <hr> tag from what comes after. I imagine this is great for when you're trying to infer to a reader of the website that they're beginning a new chapter, or a new section.

Example time!

Here is the code as written:
I went to bed early again, so I tried to sleep as soon as I could. <hr> The next morning, the sun was in my face, so I woke up too early. "Damn you sun!!" I yelled as I sharply closed the curtains I had apparently forgotten to close before bed.
Enter fullscreen mode Exit fullscreen mode
Now, here is the code as I intend the user to view it:

I went to bed early again, so I tried to sleep as soon as I could.


The next morning, the sun was in my face, so I woke up too early. "Damn you sun!!" I yelled as I sharply closed the curtains I had apparently forgotten to close before bed.


Yes, the horizontal rule's line is small, but it's there!

Ok, I'm curious... What happens when I use multiple horizontal rules at once?

Example time!

Here is the code as written (3x <hr> tags:
I went to bed early again, so I tried to sleep as soon as I could. <hr><hr><hr> The next morning, the sun was in my face, so I woke up too early. "Damn you sun!!" I yelled as I sharply closed the curtains I had apparently forgotten to close before bed.
Enter fullscreen mode Exit fullscreen mode
Now, here is the code as I intend the user to view it:

I went to bed early again, so I tried to sleep as soon as I could.




The next morning, the sun was in my face, so I woke up too early. "Damn you sun!!" I yelled as I sharply closed the curtains I had apparently forgotten to close before bed.

Eyyyyy! It makes multiple horizontal rules!! I can't imagine that ever being useful...
o_____o

Well, that's the end of that video!


It's bed time! ;D

Top comments (0)