Self Closing Tags

Understanding HTML Void Elements

🟠 What Are Void Elements?

Void elements are HTML tags that are self-closing and do not contain any content between an opening and closing tag.

Example:

<hr />
<br />

Compare this with a non-void element like:

<p>This is a paragraph</p>

Here, <p> is not a void element because it has content inside it.

---

🟠 How Void Elements Look

A void element usually looks like this:

<hr />

or like this:

<br />

• <hr /> is used to insert a horizontal line.

• <br /> is used to break a line (new line inside a paragraph).

📌 Note: You might also see them written without the slash:

<hr>
<br>

This is also valid in HTML5, but using / at the end helps keep your code clean and easy to understand.

---

🟠 Example Use of <hr />

You can use <hr /> to separate sections of your web page.

<p>Paragraph 1</p>
<hr />
<p>Paragraph 2</p>

This will display a horizontal line between the two paragraphs.

---

🟠 Example Use of <br />

The <br /> tag is great when you want to add a line break without starting a new paragraph — like in addresses or poems.

<p>
221B Baker Street<br />
London<br />
England
</p>

This will show each part of the address on a new line.

Another example with a poem:

<p>
To see a World in a Grain of Sand<br />
And Heaven in a Wild Flower,<br />
Hold Infinity in the palm of your hand<br />
And Eternity in an hour.
</p>

---

🟠 Best Practices

• ✅ Use <br /> for line breaks inside a single paragraph (like addresses or poems).

• ❌ Don’t use <br /> to separate paragraphs. Use <p> for that.

• ✅ Use <hr /> to create visual separation between different sections of content.

---

🟠 Final Tip

Even though HTML5 allows writing <br> and <hr> without the slash /, it’s better to use the self-closing format like <br /> and <hr /> to make your code more readable.