Avoiding deprecated tags in HTML

Introduction

Deprecated tags are old HTML tags that browsers no longer support well. Avoiding them helps your website work better and look good on all devices.

When writing new web pages to ensure they follow modern standards.

When updating old websites to improve compatibility and accessibility.

When you want your site to be easier to maintain and style with CSS.

When you want your website to work well on phones, tablets, and computers.

Syntax

HTML

<strong>Old (deprecated) tag:</strong>
<center>Centered text</center>

<strong>New (recommended) way:</strong>
<p style="text-align: center;">Centered text</p>

Use CSS for styling instead of old tags like <center> or <font>.

Modern HTML uses semantic tags and CSS for layout and appearance.

Examples

Use <strong> instead of <b> because it means important text, not just bold style.

HTML

<b>Bold text</b>

<strong>Bold text</strong>

Use <em> for emphasized text instead of <i> which is just for style.

HTML

<i>Italic text</i>

<em>Italic text</em>

Use CSS styles instead of the <font> tag to change colors.

HTML

<font color="red">Red text</font>

<span style="color: red;">Red text</span>

Use CSS text-align property instead of the <center> tag.

HTML

<center>Centered text</center>

<p style="text-align: center;">Centered text</p>

Sample Program

This example shows how to center and style text using CSS instead of deprecated tags like <center> or <font>. It uses semantic tags like <header>, <main>, and <footer> for better structure and accessibility.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Avoid Deprecated Tags</title>
  <style>
    .centered {
      text-align: center;
      color: darkblue;
      font-weight: bold;
      font-style: italic;
    }
  </style>
</head>
<body>
  <header>
    <h1 class="centered">Welcome to My Website</h1>
  </header>
  <main>
    <p>This paragraph uses modern HTML and CSS.</p>
    <p class="centered">This text is centered and styled without deprecated tags.</p>
  </main>
  <footer>
    <p>© 2024 My Website</p>
  </footer>
</body>
</html>

Important Notes

Deprecated tags may still work in some browsers but can cause problems in the future.

Using CSS keeps your HTML clean and separates content from design.

Semantic HTML helps screen readers and improves SEO.

Summary

Avoid old tags like <center>, <font>, <b>, and <i>.

Use CSS for styling and layout instead.

Use semantic HTML tags for better structure and accessibility.

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