Common HTML mistakes - Cheat Sheet & Quick Revision

Recall & Review

beginner

What happens if you forget to include the <!DOCTYPE html> declaration at the top of your HTML file?

The browser may enter quirks mode, causing inconsistent rendering and unexpected layout issues. Always include <!DOCTYPE html> to ensure standards mode.

beginner

Why should you avoid using deprecated tags like <center> or <font> in HTML?

Deprecated tags are outdated and not supported in modern HTML. They reduce accessibility and make your code harder to maintain. Use CSS for styling and layout instead.

intermediate

What is a common mistake when nesting HTML elements?

Placing block-level elements inside inline elements (like putting a <div> inside a <span>) is invalid and can break layout or cause unexpected behavior.

beginner

Why is it important to always close your HTML tags properly?

Unclosed tags can cause browsers to guess the structure, leading to broken layouts and accessibility problems. Always close tags like <p>, <li>, and others.

beginner

What mistake do developers often make with alt attributes on images?

Leaving the alt attribute empty or missing reduces accessibility for users with screen readers. Always provide meaningful alt text describing the image content.

Which of the following is the correct way to start an HTML5 document?

A <!DOCTYPE html>

B <html5>

C <!DOCTYPE HTML5>

D <html lang="en">

The correct declaration to start an HTML5 document is <!DOCTYPE html>. It tells the browser to use standards mode.

What is wrong with this HTML snippet? <span><div>Content</div></span>

A Nothing, this is valid HTML.

B The <code>span</code> tag is deprecated.

C The <code>div</code> tag must be self-closing.

D A <code>div</code> cannot be inside a <code>span</code> because <code>div</code> is block-level and <code>span</code> is inline.

Block-level elements like div should not be placed inside inline elements like span. This breaks HTML rules.

Why should you avoid using inline styles like style="color:red;" directly in HTML?

A Inline styles are faster to load.

B Inline styles make the HTML file invalid.

C Inline styles mix content with design, making maintenance harder.

D Inline styles are required for accessibility.

Using inline styles mixes content and design, which makes your code harder to maintain and less reusable. Use CSS files instead.

What is the purpose of the alt attribute in an <img> tag?

A To provide alternative text for screen readers and when the image fails to load.

B To add a tooltip when hovering over the image.

C To specify the image file path.

D To style the image with CSS.

The alt attribute provides descriptive text for screen readers and displays if the image cannot load, improving accessibility.

Which tag is used to create a clickable link in HTML?

A <link>

B <a>

C <href>

D <button>

The <a> tag creates clickable links. The href attribute inside it specifies the link destination.

List three common mistakes beginners make when writing HTML and explain why they cause problems.

Think about how browsers read HTML and how accessibility is affected.

Explain why semantic HTML and accessibility attributes are important in web development.

Consider users with disabilities and search engines.

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