The <hr> element is used to insert a horizontal line on a webpage. It represents a thematic break — for example, when you want to separate sections of content or signal a shift in topic.
Think of <hr> as a visual divider that helps make your page easier to read and navigate. It’s useful between paragraphs, sections, or headings when you want to clearly separate ideas. The <hr> tag is self-closing, which means it does not need a closing tag.
Understaning the layout of the <hr> Element
| Start tag | Element content | End tag |
|---|---|---|
| <hr> | none | none |
Note: Some HTML elements have no content (like the <hr> element). These elements are called empty elements. Empty elements do not have an end tag!
📘 Example Code
Below is an HTML example showing a title, a paragraph, and a horizontal line:
💡 This is what the code looks like inside an editor
🖥️ What This Will Look Like in a Browser
✅ Example output you would see on a webpage:
Here you will find guides, photos, and travel recommendations.
🧪 Time to Practise!
Now it’s your turn to create your own line divider using the <hr> tag.
Try this example first:
<p>Traveling makes life exciting!</p>
<hr>
<p>Let's explore the world together.</p>
What To Do
✅ Type the code above in the editor below
✅ Click Test Code to see the result
✅ Try changing the sentences to your own text
✅ Experiment by placing <hr> between different paragraphs or sections
Tip 💡
Use <hr> when you want to visually separate content and make your page look clean and professional.
It helps guide the reader and makes your webpage easier to follow — just don’t overuse it!
Keep practising and you’ll continue building strong HTML formatting skills! 🚀
