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.