Self-closing tags in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a self-closing tag in HTML?

A self-closing tag is an HTML tag that does not need a separate closing tag. It ends with a slash before the closing angle bracket, like <br />. It is used for elements that don’t wrap any content.

beginner

Give three examples of common self-closing tags in HTML.

Common self-closing tags include:

• <br /> for line breaks
• <img /> for images
• <input /> for form inputs

beginner

Why do self-closing tags not have separate closing tags?

Because these tags do not contain any content inside them, they don’t need a closing tag. The slash at the end tells the browser the tag is complete on its own.

intermediate

Is <br> valid without the slash in HTML5?

Yes, in HTML5 the slash is optional for self-closing tags like <br>. Browsers understand it as self-closing even without the slash.

intermediate

What is the difference between self-closing tags in HTML and XHTML?

In XHTML, self-closing tags must always have the slash (e.g., <br />) because it is XML-based and requires strict syntax. HTML5 is more flexible and allows the slash to be optional.

Which of these is a correct self-closing tag in HTML5?

A <span />

B <div />

C <p />

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

Only <img> is a self-closing tag. Tags like <div>, <p>, and <span> need separate closing tags.

What does the slash in a self-closing tag mean?

A It closes the previous tag

B It starts a comment

C It marks the tag as complete without content inside

D It is optional and has no meaning

The slash indicates the tag is complete and does not wrap any content.

Which tag is NOT typically self-closing?

A <input />

B <section />

C <hr />

D <br />

<section> is a container tag and requires a separate closing tag.

In HTML5, is <br> without a slash valid?

A Yes, it is valid

B No, it must have a slash

C Only in XHTML

D Only in older HTML versions

HTML5 allows self-closing tags without the slash.

Why do self-closing tags improve writing HTML?

A They reduce code by not needing closing tags

B They add comments automatically

C They make tags colorful

D They slow down the browser

Self-closing tags make code shorter and easier to read by not requiring closing tags.

Explain what a self-closing tag is and why it is used in HTML.

Think about tags that don’t wrap text or other elements.

Describe the difference between self-closing tags in HTML5 and XHTML.

Consider the syntax rules of XML vs HTML.

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