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
<hr>element. - 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.
QUICK SLIDES
[web_stories_embed url=”https://code-boxx.com/web-stories/how-to-create-horizontal-lines-in-html-css/” title=”Create Horizontal Lines In HTML CSS” poster=”https://code-boxx.com/wp-content/uploads/2022/03/STORY-HTML-20230505.webp” width=”360″ height=”600″ align=”center”]
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.
QUICK NOTES
If you spot a bug, feel free to comment below. I try to answer short 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.
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.
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.
ANOTHER EXAMPLE
<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.
CSS BORDER
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.
BORDER EXAMPLE
<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 <hr> tag.
<!-- 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 <header>, <div>, and <footer>. Using <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 border. The <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.
LINKS & REFERENCES
- <hr>: The Thematic Break (Horizontal Rule) element – MDN
- Border – MDN
- HTML CSS Vertical Lines – Code Boxx
INFOGRAPHIC CHEAT SHEET
THE END
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!
