Self-closing tags in HTML

Introduction

Self-closing tags let you write HTML elements that don't need a separate closing tag. They keep your code neat and simple.

When adding images to a webpage using the <img> tag.

When inserting a line break with the <br> tag.

When adding a horizontal line using the <hr> tag.

When including meta information in the <meta> tag inside the <head>.

When linking to external stylesheets with the <link> tag.

Syntax

HTML

<tag-name />

Self-closing tags end with a slash before the closing angle bracket.

In HTML5, the slash is optional but allowed for compatibility.

Examples

An image tag that shows a picture. It doesn't need a closing tag.

HTML

<img src="photo.jpg" alt="A photo" />

A line break tag that moves text to the next line.

HTML

<br />

A horizontal line to separate content visually.

HTML

<hr />

Defines the character encoding of the webpage.

HTML

<meta charset="UTF-8" />

Sample Program

This webpage uses several self-closing tags: <meta>, <link>, <br>, <img>, and <hr>. They don't need separate closing tags, making the code cleaner.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Self-closing Tags Example</title>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <h1>Welcome to Self-closing Tags</h1>
  <p>This is a paragraph.<br />Here is a line break.</p>
  <img src="https://via.placeholder.com/150" alt="Placeholder Image" />
  <hr />
  <p>End of example.</p>
</body>
</html>

Important Notes

In HTML5, self-closing tags like <br> and <img> do not require the slash (/), but including it is allowed for compatibility.

Always include the alt attribute in <img> tags for accessibility.

Self-closing tags cannot have any content inside them.

Summary

Self-closing tags simplify HTML by not needing a separate closing tag.

Common self-closing tags include <img>, <br>, <hr>, <meta>, and <link>.

Using self-closing tags keeps your code clean and easier to read.

Practice

1. Which of the following HTML tags is a self-closing tag?

easy

A. <br>

B. <div>

C. <p>

D. <section>

Solution

1. Step 1: Understand what a self-closing tag is

   A self-closing tag does not need a separate closing tag like </tag>.

2. Step 2: Identify the self-closing tag among options

   <br> inserts a line break and is self-closing. The others require closing tags.

3. Final Answer:

   <br> -> Option A

4. Quick Check:

   Self-closing tag = <br> [OK]

Hint: Self-closing tags don't have separate closing tags [OK]

Common Mistakes:

• Thinking <div> is self-closing
• Confusing paragraph <p> as self-closing
• Assuming all tags without content are self-closing

2. Which of these is the correct syntax for a self-closing img tag in HTML5?

easy

A. <img src='image.jpg'>

B. <img src='image.jpg'></img>

C. <img src='image.jpg' />

D. <img src='image.jpg'</>

Solution

1. Step 1: Recall HTML5 self-closing tag syntax

   In HTML5, self-closing tags like img can be written with or without a slash before the closing angle bracket, but the slash is optional and allowed.

2. Step 2: Check each option's correctness

   <img src='image.jpg' /> is correct and valid HTML5 syntax. <img src='image.jpg'></img> wrongly adds a closing tag. <img src='image.jpg'> is also valid but less explicit. <img src='image.jpg'</> is invalid syntax.

3. Final Answer:

   <img src='image.jpg' /> -> Option C

4. Quick Check:

   HTML5 self-closing img = <img src='...' /> [OK]

Hint: In HTML5, slash before closing bracket is optional but allowed for self-closing tags [OK]

Common Mistakes:

• Adding a closing tag to <img>
• Using incorrect slash placement
• Confusing XHTML syntax with HTML5

3. What will the following HTML code display in a browser?

<p>Hello<br>World</p>

medium

A. Hello and World on separate lines

B. Hello World on the same line

C. Hello<br>World as text

D. Syntax error, page won't load

Solution

1. Step 1: Understand the role of <br> tag

   The <br> tag inserts a line break, moving content after it to a new line.

2. Step 2: Analyze the given code output

   The paragraph shows "Hello" then a line break, then "World" on the next line.

3. Final Answer:

   Hello and World on separate lines -> Option A

4. Quick Check:

   <br> creates line break = separate lines [OK]

Hint: Remember <br> breaks line, no closing tag needed [OK]

Common Mistakes:

• Thinking <br> shows as text
• Expecting <br> to need closing tag
• Assuming no line break happens

4. Identify the error in this HTML snippet:

<img src='photo.jpg'></img>

medium

A. The src attribute is missing

B. The <img> tag should not have a closing tag

C. The tag should be written as <image>

D. The quotes around the attribute value are incorrect

Solution

1. Step 1: Recall rules for <img> tag

   The <img> tag is self-closing and does not require a closing tag like </img>.

2. Step 2: Identify the error in the snippet

   The snippet incorrectly uses </img> which is invalid HTML and should be removed.

3. Final Answer:

   The <img> tag should not have a closing tag -> Option B

4. Quick Check:

   Self-closing tags don't have closing tags [OK]

Hint: Self-closing tags never have separate closing tags [OK]

Common Mistakes:

• Adding closing tag to <img>
• Confusing <img> with container tags
• Ignoring HTML5 syntax rules

5. You want to add a horizontal line and a line break between two paragraphs. Which is the correct HTML code using self-closing tags?

hard

A. <p>First paragraph.</p><hr/><br><p>Second paragraph.</p>

B. <p>First paragraph.</p><hr/><br/><p>Second paragraph.</p>

C. <p>First paragraph.</p><hr><br/><p>Second paragraph.</p>

D. <p>First paragraph.</p><hr><br><p>Second paragraph.</p>

Solution

1. Step 1: Understand HTML5 self-closing tag usage

   In HTML5, self-closing tags like <hr> and <br> do not require a slash before the closing bracket.

2. Step 2: Check each option for correct syntax

   <p>First paragraph.</p><hr><br><p>Second paragraph.</p> uses <hr> and <br> without slashes, which is correct. Options B and C mix slash and no slash inconsistently. <p>First paragraph.</p><hr/><br><p>Second paragraph.</p> uses slash on <hr/> but not on <br>, inconsistent but valid in XHTML, not preferred in HTML5.

3. Final Answer:

   <p>First paragraph.</p><hr><br><p>Second paragraph.</p> -> Option D

4. Quick Check:

   HTML5 self-closing tags don't need slash [OK]

Hint: Use no slash for self-closing tags in HTML5 [OK]

Common Mistakes:

• Adding slash for self-closing tags unnecessarily
• Mixing XHTML and HTML5 syntax
• Forgetting to close paragraphs properly