Opening and closing tags in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

Identify the correct closing tag

Which option correctly closes the <section> tag in HTML?

HTML

<section>
  <p>Welcome to the section.</p>
</section>

A </sect>

B </section>

C </div>

D </article>

💡 Hint

Remember, the closing tag must match the opening tag exactly.

In HTML, every opening tag like

must be closed with the exact same tag name preceded by a slash, so

is correct.

❓ rendering

intermediate

What is the visual output of missing closing tag?

What will the browser display if the <h1> tag is not closed properly?

HTML

<h1>Welcome to my site
<p>This is a paragraph.</p>

A The heading text includes the paragraph text inside it, styled as heading.

B The heading and paragraph appear normally, heading styled as large text.

C Only the paragraph text appears, heading is ignored.

D The browser shows a syntax error message.

💡 Hint

Browsers automatically close heading tags like <h1> before block elements like <p> due to HTML parsing rules.

Browsers have error recovery mechanisms; they implicitly close the <h1> before the <p>, so the heading and paragraph render normally.

🧠 Conceptual

advanced

Why are closing tags important in HTML?

Which option best explains why closing tags are necessary in HTML?

A They improve page loading speed by reducing code size.

B They are optional and only used for styling purposes.

C They tell the browser where an element ends, helping structure the page correctly.

D They are only needed for self-closing tags like <img>.

💡 Hint

Think about how the browser understands where content belongs.

Closing tags mark the end of an element, so the browser knows which content belongs inside it and how to display it properly.

❓ selector

advanced

Which tag pair is correctly opened and closed?

Select the option where both opening and closing tags are correct and match each other.

A &lt;header&gt; ... &lt;/head&gt;

B &lt;nav&gt; ... &lt;/navigation&gt;

C &lt;footer&gt; ... &lt;/foot&gt;

D &lt;article&gt; ... &lt;/article&gt;

💡 Hint

Check if the closing tag exactly matches the opening tag name.

Only

is closed correctly with

. Others have mismatched closing tags.

❓ accessibility

expert

How do proper closing tags affect screen readers?

Why is it important for accessibility tools like screen readers to have correct opening and closing tags in HTML?

A They help screen readers understand the page structure and read content in the right order.

B They allow screen readers to skip all content inside tags.

C They are not important because screen readers ignore HTML tags.

D They make the page load faster for screen readers.

💡 Hint

Think about how screen readers navigate content.

Screen readers rely on correct HTML structure to present content logically and clearly to users with disabilities.

Practice

1. What is the purpose of an opening tag in HTML?

easy

A. To add comments inside the code

B. To close an element and stop the content

C. To start an element and tell the browser what content follows

D. To link to external files like CSS or JavaScript

Solution

1. Step 1: Understand what an opening tag does

   An opening tag tells the browser to start an element and what type it is, like <p> for a paragraph.

2. Step 2: Differentiate from other tags

   Closing tags end elements, comments add notes, and links connect files, so they are not the purpose of opening tags.

3. Final Answer:

   To start an element and tell the browser what content follows -> Option C

4. Quick Check:

   Opening tag = start element [OK]

Hint: Opening tags start elements; closing tags end them [OK]

Common Mistakes:

• Confusing opening tags with closing tags
• Thinking opening tags add comments
• Mixing opening tags with linking external files

2. Which of the following is the correct way to write a closing tag for a paragraph element?

easy

A. </p>

B. <p>

C. <p/>

D. <endp>

Solution

1. Step 1: Recall closing tag syntax

   Closing tags start with </ followed by the tag name, then >. For paragraph, it is </p>.

2. Step 2: Check each option

   <p> is an opening tag. Self-closing syntax like <p/> is not valid for paragraphs. <endp> is not a valid HTML tag.

3. Final Answer:

   </p> -> Option A

4. Quick Check:

   Closing tag = </tag> [OK]

Hint: Closing tags always start with [OK]

Common Mistakes:

• Using self-closing syntax for non-void elements
• Forgetting the slash in closing tags
• Writing invalid tag names

3. What will the browser display for this HTML snippet?

<h1>Welcome</h1><p>Hello World</p>

medium

A. Syntax error, nothing is displayed

B. WelcomeHello World (both on the same line)

C. Only Welcome is shown, Hello World is ignored

D. Welcome (big heading) and Hello World (paragraph below)

Solution

1. Step 1: Understand tag meanings

   <h1> creates a large heading, and <p> creates a paragraph below it.

2. Step 2: Predict browser rendering

   The browser shows "Welcome" as a big heading on one line, then "Hello World" as a paragraph on the next line.

3. Final Answer:

   Welcome (big heading) and Hello World (paragraph below) -> Option D

4. Quick Check:

   Heading + paragraph = separate lines [OK]

Hint: Headings and paragraphs display on separate lines [OK]

Common Mistakes:

• Thinking all text appears on one line
• Assuming paragraph is ignored
• Believing invalid syntax causes no display

4. Find the error in this HTML snippet:

<div>Hello<p>World</div></p>

medium

A. The <div> tag should be self-closing

B. The closing tags are in the wrong order

C. The <p> tag is not closed before

D. There is no error; this is valid HTML

Solution

1. Step 1: Check tag nesting rules

   HTML tags must close in the reverse order they open. Here, <div> opens first, then <p>. So </p> must close before </div>.

2. Step 2: Identify the error

   The snippet closes </div> before </p>, which breaks proper nesting.

3. Final Answer:

   The closing tags are in the wrong order -> Option B

4. Quick Check:

   Tags must close in reverse order [OK]

Hint: Close tags in reverse order of opening [OK]

Common Mistakes:

• Closing tags in the wrong order
• Using self-closing on container tags
• Ignoring nesting rules

5. You want to create a list with three items in HTML. Which snippet correctly uses opening and closing tags?

hard

A. <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul>

B. <ul><li>Item 1</li><li>Item 2</li><li>Item 3</ul></li>

C. <ul><li>Item 1</li><li>Item 2<li>Item 3</li></ul>

D. <ul><li>Item 1<li>Item 2<li>Item 3</ul>

Solution

1. Step 1: Understand list tag structure

   An unordered list <ul> contains list items <li>. Each <li> must have a matching closing tag </li>.

2. Step 2: Check each option for correct tag pairs

   The correct snippet <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul> closes every <li> with a matching </li>. Some options miss closing </li> tags, while another closes tags in the wrong order.

3. Final Answer:

   <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li></ul> -> Option A

4. Quick Check:

   Every must have a closing [OK]

Hint: Close every <li> before starting the next [OK]

Common Mistakes:

• Skipping closing tags
• Closing tags in wrong order
• Mixing closing and tags