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.