Avoiding deprecated tags in HTML - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to add a semantic header section.

HTML

<[1]>
  <h1>Welcome to my website</h1>
</[2]>

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

Aheader

Bcenter

Cfont

Ddiv

Attempts:

3 left

💡 Hint

Common Mistakes

Using or tags which are deprecated.

Using

without semantic meaning.

The header tag is the correct semantic element for page headers. Tags like

and are deprecated and should be avoided.

2fill in blank

medium

Complete the code to emphasize text semantically.

HTML

<p>This is an <[1]>important</[2]> message.</p>

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

Ab

Bstrong

Cfont

Di

Attempts:

3 left

💡 Hint

Common Mistakes

Using which is only for styling.

Using which is deprecated.

The tag is used to give strong importance to text semantically. The tag only styles text bold without semantic meaning. Tags like are deprecated.

3fill in blank

hard

Fix the error in the code by replacing the deprecated tag with an appropriate alternative.

HTML

<[1] align="center">This text is centered.</[2]>

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

Adiv

Bcenter

Csection

Darticle

Attempts:

3 left

💡 Hint

Common Mistakes

Keeping the tag which is deprecated.

Using semantic tags that don't fit the content purpose.

The

tag is deprecated. Use a

with CSS for centering instead. Here, replacing with

is the first step to fix the error.

4fill in blank

hard

Fill both blanks to replace deprecated tags with semantic HTML5 tags.

HTML

<[1]>
  <[2]>This is the main navigation menu.</[2]>
</[1]>

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

Anav

Bmenu

Cul

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using which is deprecated.

Using

alone without semantic navigation.

The outer

tag defines the header section. The

tag is the semantic element for navigation menus. Deprecated tags like should be avoided.

5fill in blank

hard

Fill all three blanks to replace deprecated tags with semantic alternatives and proper structure.

HTML

<[1]>
  <[2]>Contact us at <a href="mailto:[e-mail]">[e-mail]</a></[2]>
  <[3]>© 2024 Company Name</[3]>
</[1]>

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

Afooter

Baddress

Csmall

Dsection

Attempts:

3 left

💡 Hint

Common Mistakes

Using

instead of

.

Using

instead of

for contact info.

Using or tags.

The

tag defines the footer section. The

tag is used for contact information. The tag is used for fine print or copyright text. Deprecated tags like or should not be used.

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