Common HTML mistakes - Practice Problems & Coding Challenges

Challenge - 5 Problems

📝 Syntax

intermediate

What error does this HTML snippet cause?

Look at this HTML code:

<div>Hello<span>World</div></span>

What problem will this cause when rendered in a browser?

HTML

<div>Hello<span>World</span></div>

A The browser will close the <span> before the </div>, causing incorrect nesting.

B The browser will render correctly with no visible issues.

C The browser will throw a syntax error and stop rendering the page.

D The browser will ignore the <span> tag completely.

💡 Hint

Think about how tags must open and close in the right order.

HTML tags must be properly nested. Here, <span> is opened inside <div> but closed after </div>, which breaks nesting. Browsers fix this by closing <span> early, changing the structure.

❓ accessibility

intermediate

Which option improves accessibility for this image?

You have this image tag:

<img src="flower.jpg">

Which option adds the best accessibility improvement?

HTML

<img src="flower.jpg">

A <img src="flower.jpg" role="presentation">

B <img src="flower.jpg" title="flower">

C <img src="flower.jpg" aria-hidden="true">

D <img src="flower.jpg" alt="A red flower in a garden">

💡 Hint

Think about screen readers and what they need to describe images.

The alt attribute provides descriptive text for screen readers, helping visually impaired users understand the image content. Title is less reliable, aria-hidden hides the image from assistive tech, and role="presentation" removes semantic meaning.

❓ layout

advanced

What visual issue occurs with this CSS and HTML?

Given this HTML and CSS:

<div class="container"><div class="box">Box</div></div>

.container { display: flex; } .box { width: 100px; margin-left: auto; }

What will happen to the box inside the container?

HTML

<div class="container"><div class="box">Box</div></div>

A The box will be aligned to the left side ignoring margin-left.

B The box will be centered horizontally inside the container.

C The box will be aligned to the right side of the container.

D The box will overflow outside the container.

💡 Hint

Remember how margin auto works inside flex containers.

In a flex container, margin-left: auto pushes the item to the right, aligning it at the container's end.

❓ selector

advanced

Which CSS selector matches only direct children?

You want to style only <li> elements that are direct children of <ul>.
Which selector should you use?

A ul li

B ul > li

C ul + li

D ul ~ li

💡 Hint

Think about the difference between descendant and child selectors.

The '>' selector matches only direct children. 'ul li' matches all descendants, including nested ones. '+' and '~' select siblings, not children.

🧠 Conceptual

expert

What is the effect of missing viewport meta tag on mobile?

Consider a webpage without this tag:

<meta name="viewport" content="width=device-width, initial-scale=1">

What will happen when viewed on a mobile device?

A The page will zoom out and show a desktop-sized layout, making text small and hard to read.

B The page will automatically switch to a mobile-friendly layout.

C The page will not load at all on mobile devices.

D The page will scale to fit the device width and look good on mobile.

💡 Hint

Think about how browsers handle page scaling without instructions.

Without the viewport meta tag, mobile browsers assume a desktop width and zoom out, causing small text and poor usability.

Practice

1. Which of the following is a common mistake when writing HTML tags?

easy

A. Writing comments with <!-- comment -->

B. Using lowercase letters for tags

C. Adding spaces between attributes

D. Not closing tags properly, like forgetting </p>

Solution

1. Step 1: Understand proper tag closure

   HTML tags like <p> must be closed with </p> to define content boundaries.

2. Step 2: Identify the mistake

   Not closing tags properly breaks the page structure and can cause rendering issues.

3. Final Answer:

   Not closing tags properly, like forgetting </p> -> Option D

4. Quick Check:

   Close tags properly = A [OK]

Hint: Always match opening and closing tags exactly [OK]

Common Mistakes:

• Forgetting to close tags
• Self-closing tags without slash
• Mismatched tag names

2. Which of these is the correct way to write an image tag with an alt attribute?

easy

A. <img src='cat.jpg' alt='cat'>

B. <img src="cat.jpg" alt=cat>

C. <img src=cat.jpg alt=cat>

D. <img src=cat.jpg alt='cat'>

Solution

1. Step 1: Check attribute quoting rules

   HTML requires attribute values to be in quotes, either single or double quotes.

2. Step 2: Find the option with all attributes quoted

   <img src='cat.jpg' alt='cat'> uses single quotes around both src and alt values correctly.

3. Final Answer:

   <img src='cat.jpg' alt='cat'> -> Option A

4. Quick Check:

   Attributes need quotes = C [OK]

Hint: Always put quotes around attribute values [OK]

Common Mistakes:

• Missing quotes around attribute values
• Mixing quote types incorrectly
• Using invalid characters in attributes

3. What will the browser display when rendering this HTML snippet?

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

medium

A. Hello followed by World outside the paragraph

B. HelloWorld inside nested div and p tags correctly

C. Only Hello displayed, World ignored

D. A rendering error or broken layout

Solution

1. Step 1: Analyze tag nesting rules

   A <div> cannot be inside a <p> tag because <p> cannot contain block elements like <div>.

2. Step 2: Understand browser correction behavior

   The browser closes the <p> before the inner <div>, so "World" is outside the paragraph.

3. Final Answer:

   Hello followed by World outside the paragraph -> Option A

4. Quick Check:

   Invalid nesting moves content outside = A [OK]

Hint: Block tags can't go inside <p> tags [OK]

Common Mistakes:

• Placing block elements inside <p>
• Assuming browser ignores invalid nesting
• Not closing tags properly

4. Identify the error in this HTML snippet:

<ul>
  <li>Item 1
  <li>Item 2</li>
</ul>

medium

A. Using <li> inside <ul> is invalid

B. Missing closing tag for first <li> element

C. The <ul> tag should be <ol>

D. The second <li> tag is self-closing incorrectly

Solution

1. Step 1: Check list item tags

   Each <li> must be properly closed to separate list items.

2. Step 2: Identify missing closing tag

   The first <li> is not closed, so the browser may merge both items incorrectly.

3. Final Answer:

   Missing closing tag for first <li> element -> Option B

4. Quick Check:

   Close all
5. tags properly = B [OK]

Hint: Close every <li> tag to separate list items [OK]

Common Mistakes:

• Omitting closing
• Confusing <ul> and <ol>
• Incorrect nesting of list tags

5. You want to create a form with a label and input that is accessible and correct. Which snippet fixes the common mistake below?

<label>Name</label>
<input type="text" id="name">

hard

A. <label id="name">Name</label>\n<input type="text">

B. <label>Name<input type="text" id="name"></label>

C. <label for="name">Name</label>\n<input type="text" id="name">

D. <input type="text" id="name">\n<label>Name</label>

Solution

1. Step 1: Understand label-input association

   Labels should be linked to inputs using the for attribute matching the input's id.

2. Step 2: Check options for correct association

   <label for="name">Name</label>\n<input type="text" id="name"> uses for="name" on label and id="name" on input, making it accessible and correct.

3. Final Answer:

   <label for="name">Name</label>\n<input type="text" id="name"> -> Option C

4. Quick Check:

   Use for and id to link label and input = D [OK]

Hint: Use label's for attribute matching input's id [OK]

Common Mistakes:

• Not linking label and input
• Wrapping input inside label incorrectly
• Using id on label instead of for