Avoiding deprecated tags in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ rendering

intermediate

What will this HTML render in a modern browser?

Consider this HTML snippet using a deprecated tag:

<center><strong>Hello World!</strong></center>

What will the browser display?

HTML

<center><strong>Hello World!</strong></center>

A The text 'Hello World!' centered but not bolded.

B The text 'Hello World!' left aligned and bolded on the page.

C An error message because <center> is deprecated and not supported.

D The text 'Hello World!' centered and bolded on the page.

💡 Hint

Deprecated tags often still work but should be avoided for future compatibility.

The <center> tag is deprecated but browsers still render it by centering the content. The <strong> tag makes the text bold. So the text appears bold and centered.

❓ selector

intermediate

Which CSS selector replaces the deprecated <font> tag for setting text color?

The <font color="red"> tag is deprecated. Which CSS selector correctly styles all paragraphs with red text instead?

A p { color: red; }

B font { color: red; }

C p { font-color: red; }

D p { text-color: red; }

💡 Hint

Use standard CSS properties for color.

The correct CSS property to set text color is 'color'. The selector 'p' targets all paragraphs. So 'p { color: red; }' styles all paragraphs with red text.

🧠 Conceptual

advanced

Why should you avoid using the <marquee> tag in modern web pages?

The <marquee> tag creates scrolling text but is deprecated. What is the main reason to avoid it?

A It is not supported by any modern browser and causes errors.

B It requires JavaScript to work properly.

C It is deprecated and does not provide accessible or responsive content.

D It slows down page loading significantly.

💡 Hint

Think about accessibility and modern web standards.

The <marquee> tag is deprecated because it does not support accessibility well and does not adapt to different screen sizes. Modern CSS animations are preferred.

📝 Syntax

advanced

What error will this HTML cause in modern browsers?

This snippet uses a deprecated tag incorrectly:

<font color='blue' size=4>Welcome</font>

What is the likely result?

HTML

<font color='blue' size=4>Welcome</font>

A The text 'Welcome' appears blue and sized correctly.

B The text appears but the size attribute is ignored.

C A syntax error prevents the page from loading.

D The browser ignores the &lt;font&gt; tag and shows default text styling.

💡 Hint

Browsers support many deprecated features for backward compatibility.

Although <font> is deprecated, modern browsers still render both the color='blue' and size=4 attributes for backward compatibility. The text 'Welcome' appears blue and larger (size 4 is bigger than the default size 3).

❓ accessibility

expert

Which modern HTML element best replaces the deprecated <b> tag for emphasizing text without implying importance?

The <b> tag is deprecated for styling only. Which element should you use to style text bold without adding extra meaning?

A &lt;mark&gt;

B &lt;span&gt; with CSS font-weight:bold;

C &lt;strong&gt;

D &lt;em&gt;

💡 Hint

Think about semantic meaning vs visual styling.

The <b> tag is deprecated because it only styles text bold without semantic meaning. <strong> and <em> add importance or emphasis. Using <span> with CSS font-weight:bold styles text visually without adding meaning, which is the modern approach.

Practice

1. Which of the following tags is deprecated and should be avoided in modern HTML?

easy

A. <article>

B. <center>

C. <section>

D. <nav>

Solution

1. Step 1: Understand deprecated tags

   The <center> tag was used to center content but is now deprecated in favor of CSS styling.

2. Step 2: Identify semantic tags

   <section>, <article>, and <nav> are semantic HTML5 tags and are not deprecated.

3. Final Answer:

   <center> -> Option B

4. Quick Check:

   Deprecated tag = <center> [OK]

Hint: Deprecated tags are old layout tags replaced by CSS [OK]

Common Mistakes:

• Confusing semantic tags with deprecated tags
• Thinking all tags with angle brackets are deprecated
• Assuming <b> is semantic

2. Which is the correct modern way to make text bold instead of using the deprecated <b> tag?

easy

A. <i>Text</i>

B. <bold>Text</bold>

C. <em>Text</em>

D. <strong>Text</strong>

Solution

1. Step 1: Identify semantic bold tag

   The <strong> tag is the semantic way to indicate important or bold text.

2. Step 2: Recognize deprecated and incorrect tags

   <b> is deprecated for styling; <bold> is invalid; <em> and <i> are for emphasis and italic style, not bold.

3. Final Answer:

   <strong>Text</strong> -> Option D

4. Quick Check:

   Use <strong> for bold text [OK]

Hint: Use semantic tags like strong for bold, not <b> [OK]

Common Mistakes:

• Using <b> for styling instead of <strong>
• Confusing <em> with bold
• Using invalid tags like <bold>

3. What will the following HTML code render in a modern browser?

<center><h1>Welcome</h1></center>

medium

A. The heading 'Welcome' centered horizontally

B. The heading 'Welcome' left aligned (default)

C. A syntax error, page won't load

D. The heading 'Welcome' in italic style

Solution

1. Step 1: Recognize deprecated tag behavior

   Although the <center> tag is deprecated in HTML5, modern browsers continue to support it for backward compatibility and will center the content.

2. Step 2: Default heading alignment

   The <h1> inside <center> will be rendered centered horizontally.

3. Final Answer:

   The heading 'Welcome' centered horizontally -> Option A

4. Quick Check:

   Deprecated <center> still centers [OK]

Hint: Deprecated tags like <center> still render their effect in modern browsers [OK]

Common Mistakes:

• Thinking deprecated tags are completely ignored
• Believing deprecated tags cause syntax errors
• Confusing <center> with italic or bold

4. Identify the error in this HTML snippet and choose the best fix:

<font color='red'>Warning!</font>

medium

A. Replace <font> with <span> and use CSS color

B. Keep <font> but add style attribute

C. Change color attribute to text-color

D. Use <b> instead of <font>

Solution

1. Step 1: Recognize deprecated tag usage

   The <font> tag is deprecated and should not be used for styling.

2. Step 2: Use semantic tag with CSS

   Use a <span> tag and apply color with CSS, e.g., style="color:red;".

3. Final Answer:

   Replace <font> with <span> and use CSS color -> Option A

4. Quick Check:

   Use CSS for styling, not <font> [OK]

Hint: Use <span> + CSS instead of deprecated <font> [OK]

Common Mistakes:

• Trying to fix <font> with invalid attributes
• Using <b> for color styling
• Ignoring CSS for styling

5. You want to center a paragraph and make its text italic without using deprecated tags. Which is the best modern HTML and CSS approach?

hard

A. <center><i>Text</i></center>

B. <p><font align='center'><i>Text</i></font></p>

C. <p style='text-align:center; font-style:italic;'>Text</p>

D. <p><b><em>Text</em></b></p>

Solution

1. Step 1: Avoid deprecated tags

   <center> and <font> are deprecated and should not be used.

2. Step 2: Use CSS for styling

   Apply text-align:center; and font-style:italic; using the style attribute or external CSS on a semantic tag like <p>.

3. Final Answer:

   <p style='text-align:center; font-style:italic;'>Text</p> -> Option C

4. Quick Check:

   Use CSS styles, not deprecated tags [OK]

Hint: Use CSS styles on semantic tags, never deprecated tags [OK]

Common Mistakes:

• Using <center> or <font> for layout and style
• Mixing bold and italic tags incorrectly
• Not applying CSS for alignment or style