Self-closing tags in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Identify the correct self-closing tag syntax

Which option shows the correct way to write a self-closing tag in HTML5?

A <img src="image.png" / >

B <img src="image.png" />

C <img src="image.png">

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

💡 Hint

In HTML5, some tags do not need a closing slash to be self-closing.

In HTML5, the tag is self-closing and does not require a closing slash. Option C is correct. Options A and B include a slash which is optional but not required in HTML5. Option C incorrectly uses a closing tag which is invalid for .

❓ rendering

intermediate

Visual output of self-closing tags

What will the browser display when rendering this HTML snippet?

<input type="text" value="Hello">

HTML

<input type="text" value="Hello">

A An error message in the browser

B The text 'Hello' displayed as plain text

C Nothing visible on the page

D A text input box with the text 'Hello' inside

💡 Hint

Think about what an tag does in a form.

The tag creates an interactive text box. The value attribute sets the initial text inside the box. So the browser shows a text input box with 'Hello' inside.

🧠 Conceptual

advanced

Understanding self-closing tags in HTML5

Which statement about self-closing tags in HTML5 is true?

A Self-closing tags like <br> and <img> do not require a closing slash in HTML5.

B All self-closing tags must include a slash before the closing angle bracket.

C Self-closing tags cannot have any attributes.

D Self-closing tags must always have a separate closing tag.

💡 Hint

Think about how HTML5 simplified tag syntax compared to XHTML.

HTML5 allows self-closing tags like
and to be written without a closing slash. The slash is optional and mostly used for compatibility with XHTML. Attributes are allowed, and these tags do not have separate closing tags.

❓ selector

advanced

CSS selector targeting self-closing tags

Which CSS selector correctly targets all elements that are self-closing in the HTML document?

A input

B input:empty

C input::before

D input > *

💡 Hint

Remember how self-closing tags behave in the DOM tree.

Self-closing tags like do not have child elements, but they are still selected simply by their tag name. The selector 'input' targets all input elements regardless of being self-closing. The other selectors either look for children or pseudo-elements which do not apply here.

❓ accessibility

expert

Accessibility considerations for self-closing tags

Which practice improves accessibility for self-closing tags?

A Use a closing tag like <img></img> to improve screen reader support.

B Always include an alt attribute describing the image content.

C Avoid using alt attributes to reduce page size.

D Use inline styles to hide the image from screen readers.

💡 Hint

Think about how screen readers understand images.

The alt attribute provides a text description of the image for screen readers and improves accessibility. Using a closing tag for is invalid HTML. Avoiding alt attributes or hiding images from screen readers reduces accessibility.

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