Welcome to a beginner’s tutorial on how to create horizontal lines in HTML and CSS. So you have some content that you want to break up by drawing a line. Well, no sweat.
There are 2 easy ways to create horizontal lines in HTML:
- Use the horizontal rule
- Add a bottom border with CSS. For example:
<div style="border-bottom: 5px solid black">TEXT</div>
Take note that the
<hr> element carries a semantic meaning of “thematic break”, while the
border is purely cosmetic.
But just what does that mean? When should we use each one? Let us walk through some examples – Read on to find out!
ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.
REAL QUICK SLIDES
TABLE OF CONTENTS
|Download & Notes||Horizontal Rule||CSS Border|
|Useful Bits & Links||The End|
DOWNLOAD & NOTES
First, here is the download link to the example source code as promised.
EXAMPLE CODE DOWNLOAD
Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.
There is nothing to install, so just download and unzip into a folder. If you spot a bug, please feel free to comment below. I try to answer questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.
HORIZONTAL RULE <HR> HTML TAG
Once upon a time in the dark ages of the Internet, we have the <hr> HTML tag. All it does is to draw a straight horizontal line across the screen and that’s it. But today, that <hr> tag actually has a meaning of “thematic break”, just what the heck does that mean? Let’s walk through all of that in this section.
WHAT IS A THEMATIC BREAK!?
Thematic – Adjective. Relating to or based on subjects or a theme:
In layman’s terms, I will personally describe “thematic break” as something similar to a “section break” or “chapter break”. So yes, the
<hr> tag is not to be used for the purpose of cosmetic “I want to draw a line here”, but to specify “there are section breaks in-between the contents here”.
THEMATIC BREAK EXAMPLE
Enough talk, let us go through a simple example of
<hr> to better illustrate:
<h1>MY STORY</h1> <h2>CHAPTER 1</h2> <p> A tragic pedal overflows behind the hydrogen. </p> <hr> <h2>CHAPTER 2</h2> <p> A routine silver speaks. </p> <hr>
As you can see, the
<hr> tag is not just used to draw a line across, but it actually serves a purpose – To define the breaks in-between chapters.
<h1>GLOSSARY</h1> <h2>CLASSIFICATION</h2> <ul> <li>Doge: 4 legs 1 tail.</li> <li>Pupper: A smol doge.</li> <li>Good Boi: A good doge.</li> </ul> <hr> <h2>SOUNDS ACTIONS</h2> <ul> <li>Bark: How doges speak.</li> <li>Bork: Swag boi speak.</li> <li>Blep: Stick tongue out.</li> <li>Mlem: Tongue touches nose.</li> </ul> <hr>
Think you should catch the drift now. The
<hr> tag is used to signify breaks in-between chapters, sections, categories, classes, ranks, levels, tiers – You name it.
So far so good? You should now know that the <hr> tag has an actual purpose and to avoid using it as cosmetics. To draw lines that have no actual meaning – We should be using CSS borders instead.
<h1>MY STORY</h1> <section style="border-bottom: 1px solid #000"> <h2>CHAPTER 1</h2> <p> The trade complains. </p> </section> <section style="border-bottom: 1px solid #000"> <h2>CHAPTER 2</h2> <p> The guide composes outside the overwhelmed camp. </p> </section>
Adding a border using CSS is actually very easy, all it takes is literally one line of
border-bottom: THICKNESS STYLE COLOR. Also, take note of how we are using
<section> and not
<hr> above – We have semantically “zoned” the chapters here using
<section>, the horizontal lines simply become cosmetics.
WHEN TO NOT USE <HR>
While we are still at it, let us walk through one last example on when it does not make sense to use the
<!-- HEADER --> <header> MY SITE </header> <!-- MAIN CONTENTS --> <div style="border-top: 1px solid #000; border-bottom: 1px solid #000"> Welcome world! </div> <!-- FOOTER --> <footer> Copyright My Site </footer>
Here, we have a very simple “3 parts” website layout – The header, contents, and footer. So why does it not make sense to insert
<hr> after the header and main contents? Because we have already defined the areas with
<hr> will not carry any meaning, and we only want horizontal lines as a cosmetic effect.
USEFUL BITS & LINKS
That’s all for this guide, and here is a small section on some extras and links that may be useful to you.
DOES IT REALLY MATTER!?
Well, the true story is… For donkey years in my web development career, I have personally not cared about nor used the
<hr> tag much since the introduction of HTML5. There are so many semantic and structure tags in HTML 5 –
<header> <footer> <section> <div> <p>.
I find myself using those structure tags more, along with CSS
<hr> tag kind of became a useless white elephant. Does it matter? Not really. But if you want a semantically correct page for the purpose of search engine optimization (SEO) – Then yes, define all the “context boundaries” carefully.
INFOGRAPHIC CHEAT SHEET
LINKS & REFERENCES
Thank you for reading, and we have come to the end of this guide. I hope that it has helped you with your project, and if you want to share anything with this guide, please feel free to comment below. Good luck and happy coding!