Avoiding deprecated tags in HTML - Browser Rendering Trace

Render Flow - Avoiding deprecated tags

Read <html>

→Create HTML root node

↓

Read <body>

→Create BODY node

↓

Read <center>

→Create CENTER node

↓

Add text 'Hello World'

↓

Close CENTER

↓

Close BODY

↓

Close HTML

The browser reads the HTML tags in order, creates nodes for each element, and nests them according to the tag structure. Deprecated tags like <center> still create nodes but are discouraged.

Render Steps - 3 Steps

Code Added:<center>Hello World</center>

Before

[body]
  |
  +-- (empty space)

Text is left aligned by default.

→

After

[body]
  |
  +-- [center]
        |
        +-- Hello World (centered horizontally)

Text is visually centered horizontally inside the body.

The <center> tag centers its content horizontally by default, changing the text alignment from left to center.

🔧 Browser Action:Creates CENTER element node and applies default centering style.

Code Sample

This code shows text centered using the deprecated <center> tag, which visually centers the text but is not recommended.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Deprecated Tags Example</title>
</head>
<body>
  <center>Hello World</center>
</body>
</html>

HTML

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}

Render Quiz - 3 Questions

After applying step 1, how is the text 'Hello World' positioned?

A Centered vertically only

B Aligned to the left by default

C Centered horizontally inside the body

D Centered both horizontally and vertically

Common Confusions - 3 Topics

Why does my <center> tag still work even though it's deprecated?

Browsers keep supporting deprecated tags like <center> for backward compatibility, so it still centers content visually but should not be used in new code.

💡 Deprecated tags may still show effects but modern CSS is the correct way to style.

Why doesn't text-align: center center my block element vertically?

text-align: center only centers inline content horizontally. Vertical centering requires other CSS like flexbox or grid (see render_step 2).

💡 Use flexbox for vertical and horizontal centering, not text-align alone.

If I remove <center> without CSS, why does my text shift left?

Without <center> or CSS centering, text defaults to left alignment (render_step 3). You must add CSS to keep it centered.

💡 Centering requires either HTML tag or CSS; removing one needs replacing with the other.

Property Reference

Tag/Property	Type	Default Behavior	Visual Effect	Recommended Use
<center>	HTML tag	Centers content horizontally	Centers text horizontally	Avoid; use CSS instead
text-align: center;	CSS property	Centers inline content horizontally	Centers text horizontally	Use for inline text centering
display: flex;	CSS property	Creates flex container	Enables flexible layout	Use for modern layout control
justify-content: center;	CSS property	Aligns flex items horizontally	Centers items horizontally	Use with flex containers
align-items: center;	CSS property	Aligns flex items vertically	Centers items vertically	Use with flex containers

Concept Snapshot

<center> tag centers text horizontally but is deprecated. Use CSS properties like display:flex, justify-content, and align-items for modern centering. text-align:center centers inline text horizontally only. Removing deprecated tags improves accessibility and future-proofs code. Flexbox can center content both horizontally and vertically.

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