🧾 Using Breaks and Horizontal Rules in HTML
In HTML, a line break can be added using the <br> tag and a horizontal line can be created using the <hr> tag.
🔹 Line Break (<br>)
The <br> tag breaks a line but it doesn't start a new paragraph.
This is line one.
This is line two.
This is line two.
🔸 Example: Breaking a line manually using <br>
🔹 Horizontal Rule (<hr>)
The <hr> tag creates a line that can be used for dividing the content or formatting it based on styling preference.
Content above the line.
Content below the line.
Content below the line.
🔸 Example: Visual separation using <hr>
❌ Common Mistakes
<br> is overused to control a part of layout. It should have space above and below the paragraph that can be added using CSS margin/padding.
<hr> is used just for decorating purposes without meaning it.
<hr> is used just for decorating purposes without meaning it.
⚠️ Use these tags semantically and not for layout or design hacks.
🎨 Styling with Tailwind
Using Tailwind makes styling <hr> easier without changing the look in any way.
<hr class="my-6 border-t border-gray-300" />
⚊ Adds spacing and a styled horizontal rule.
📌 Best Practices
- Do not use
<br>often. It should only be used with examples like poems or addresses. - Use
<hr>for indicating breaks, but never for decoration. - Using CSS/Tailwind, improve the visual styling of these tags for better readability.
.webp&w=256&q=75)
.webp&w=256&q=75)
.webp&w=256&q=75)
.webp&w=256&q=75)
%20copy.webp&w=256&q=75)
