Self-closing tags in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to correctly write a self-closing image tag.

HTML

<img src="image.jpg" alt="A photo" [1]>

Drag options to blanks, or click blank then click option'

A>

B/>

C</img>

D<img>

Attempts:

3 left

💡 Hint

Common Mistakes

Using just > without the slash

Trying to write a separate closing tag like

The <img> tag is self-closing and should end with /> to be valid in XHTML and is optional in HTML5 but recommended for compatibility.

2fill in blank

medium

Complete the code to correctly write a self-closing line break tag.

HTML

<br[1]>

Drag options to blanks, or click blank then click option'

A/>

B>

C</br>

D<br>

Attempts:

3 left

💡 Hint

Common Mistakes

Writing a closing tag like

Omitting the slash in self-closing tag

The <br> tag is self-closing and should end with /> for proper syntax in XHTML; in HTML5, just > is valid but /> is recommended for compatibility.

3fill in blank

hard

Fix the error in the self-closing input tag.

HTML

<input type="text" name="username" [1]>

Drag options to blanks, or click blank then click option'

A</input>

B<input>

C/>

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using just > without slash

Trying to write a closing tag like

The <input> tag is self-closing and should end with /> to be valid XHTML; in HTML5, just > is valid but /> is recommended for compatibility.

4fill in blank

hard

Fill both blanks to correctly write a self-closing meta tag with charset attribute.

HTML

<meta charset=[1][2]>

Drag options to blanks, or click blank then click option'

A"UTF-8"

B'UTF-8'

C/>

D>

Attempts:

3 left

💡 Hint

Common Mistakes

Using single quotes instead of double quotes

Omitting the slash in the self-closing tag

The <meta> tag requires the charset value in quotes and should be self-closed with /> for XHTML compatibility; in HTML5, just > is valid but /> is recommended.

5fill in blank

hard

Fill all three blanks to write a self-closing link tag for a stylesheet.

HTML

<link rel=[1] href=[2] [3]>

Drag options to blanks, or click blank then click option'

A"stylesheet"

B"styles.css"

C/>

D"text/css"

Attempts:

3 left

💡 Hint

Common Mistakes

Omitting quotes around attribute values

Not self-closing the tag with a slash

The <link> tag for stylesheets needs rel and href attributes in quotes and should be self-closed with /> for XHTML compatibility; in HTML5, just > is valid but /> is recommended.

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