Avoiding deprecated tags in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What does it mean when an HTML tag is deprecated?

A deprecated tag is an old HTML tag that should no longer be used because it is outdated and may not work well in modern browsers.

beginner

Which tag should you use instead of the deprecated <center> tag?

Use CSS to center content, for example, text-align: center; on a container element instead of the <center> tag.

beginner

Why should you avoid using the <font> tag in HTML?

The <font> tag is deprecated because styling should be done with CSS, which separates content from design and makes pages easier to maintain.

beginner

What is a modern alternative to using <b> and <i> tags for styling text?

Use <strong> for important text and <em> for emphasized text, which also improves accessibility and meaning.

intermediate

How can you check if an HTML tag is deprecated?

You can check official HTML documentation or use browser developer tools and validators like the W3C Markup Validation Service.

Which tag is deprecated and should NOT be used in modern HTML?

A <article>

B <section>

C <center>

D <nav>

The tag is deprecated. Use CSS for centering instead.

What is the recommended way to change text color in HTML?

A Use inline styles with the style attribute or CSS

B Use the <font> tag

C Use the <color> tag

D Use the <b> tag

Use CSS or the style attribute to change text color, not the deprecated tag.

Which tag should you use to emphasize text semantically and accessibly?

A <em>

B <b>

C <i>

D <font>

is used to emphasize text and improves accessibility.

Why is it better to use CSS instead of deprecated tags for styling?

A CSS is faster to write

B CSS separates content from design and improves maintainability

C CSS works only in modern browsers

D CSS is deprecated too

CSS separates content from design, making code cleaner and easier to maintain.

Which tool can help you find deprecated tags in your HTML code?

A Image editor

B Text editor spell checker

C Browser bookmarks

D W3C Markup Validation Service

The W3C Markup Validation Service checks HTML for errors including deprecated tags.

Explain why avoiding deprecated HTML tags is important for modern web development.

Think about browser support and code quality.

List three deprecated HTML tags and their modern alternatives.

Focus on tags related to styling and layout.

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