Common HTML mistakes - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add the correct language attribute to the HTML tag.

HTML

<!DOCTYPE html>
<html [1]>
<head>
  <meta charset="UTF-8">
  <title>My Page</title>
</head>
<body>
  <p>Hello, world!</p>
</body>
</html>

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

Alang='english'

Blanguage="en"

Clang=en

Dlang="en"

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'language' instead of 'lang' attribute.

Not using quotes around the attribute value.

Using full language name instead of code.

The correct way to specify the language of the document is using lang="en" on the <html> tag. This helps browsers and assistive technologies understand the language.

2fill in blank

medium

Complete the code to correctly include a meta viewport tag for responsive design.

HTML

<head>
  <meta charset="UTF-8">
  <meta [1]>
  <title>Responsive Page</title>
</head>

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

Aname=viewport content=width=device-width, initial-scale=1.0

Bviewport="width=device-width, initial-scale=1.0"

Cname="viewport" content="width=device-width, initial-scale=1.0"

Dname="view-port" content="width=device-width, initial-scale=1.0"

Attempts:

3 left

💡 Hint

Common Mistakes

Misspelling 'viewport' as 'view-port'.

Omitting quotes around attribute values.

Using incorrect attribute names.

The meta viewport tag must have name="viewport" and a content attribute with the correct values inside quotes. This tag helps the page scale properly on mobile devices.

3fill in blank

hard

Fix the error in the image tag by completing the missing attribute.

HTML

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

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

Atitle="A beautiful scenery"

Balt="A beautiful scenery"

Ccaption="A beautiful scenery"

Ddescription="A beautiful scenery"

Attempts:

3 left

💡 Hint

Common Mistakes

Using title instead of alt for accessibility.

Omitting the alt attribute entirely.

Using non-standard attributes like 'caption' or 'description'.

The alt attribute is required for images to describe the content for screen readers and when the image cannot load. It improves accessibility.

4fill in blank

hard

Fill both blanks to create a correct link that opens in a new tab safely.

HTML

<a href=[1] target=[2]>Visit Site</a>

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

A"https://example.com"

B"_blank"

C"_self"

D"noopener noreferrer"

Attempts:

3 left

💡 Hint

Common Mistakes

Not quoting the URL in href.

Using _self instead of _blank for new tab.

Forgetting to add rel attributes for security (not asked here).

The href attribute needs a URL in quotes. The target attribute with value "_blank" opens the link in a new tab. For safety, rel="noopener noreferrer" should also be added but is not asked here.

5fill in blank

hard

Fill all three blanks to create a correct unordered list with three items.

HTML

<ul>
  <li>[1]</li>
  <li>[2]</li>
  <li>[3]</li>
</ul>

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

AApple

BBanana

CCherry

DOrange

Attempts:

3 left

💡 Hint

Common Mistakes

Using <ol> instead of <ul> for unordered list.

Putting multiple items inside one <li> tag.

Forgetting to close <li> tags.

An unordered list uses <ul> with list items inside <li> tags. Each blank should be filled with a single item name as text.

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