Avoiding deprecated tags in HTML - Mini Project: Build & Apply

Avoiding Deprecated HTML Tags

📖 Scenario: You are creating a simple webpage for a local bakery. The bakery wants a clean and modern page that works well on all devices and is easy to read.

🎯 Goal: Build a basic HTML page using only modern, non-deprecated tags to structure the content semantically and accessibly.

📋 What You'll Learn

Use semantic HTML5 tags like

,

,

,

, and

Avoid deprecated tags such as , , and for styling

Use and for emphasizing text instead of and

Include a responsive meta viewport tag

Add meaningful aria-labels where appropriate for accessibility

💡 Why This Matters

🌍 Real World

Modern websites must use semantic HTML to improve accessibility, SEO, and maintainability. Avoiding deprecated tags ensures your site works well on all browsers and devices.

💼 Career

Web developers need to write clean, semantic HTML that meets current standards and accessibility guidelines. This skill is essential for front-end development roles.

1

Create the HTML skeleton with semantic tags

Write the basic HTML5 structure with doctype, html with lang="en", head containing meta charset="UTF-8", meta name="viewport" content="width=device-width, initial-scale=1.0", and a title of "Bakery Home". Then add body with header, main, and footer tags.

HTML

Hint

Start with the basic HTML5 page structure and add semantic tags inside the body.

2

Add navigation and main content sections

Inside the header, add a nav element with an unordered list containing three links: Home, Menu, and Contact. Inside main, add two section elements with headings: one with h2 "Welcome to Our Bakery" and another with h2 "Our Specialties".

HTML

    
    
    Bakery Home


    
        
    
    
        
    
    

Hint

Use nav inside header with a list of links. Use two section tags inside main each with an h2 heading.

3

Add emphasized text using modern tags

Inside the first section with heading "Welcome to Our Bakery", add a paragraph that says: "We bake the freshest bread and delicious pastries every day." Use strong to emphasize "freshest" and em to emphasize "delicious". Do not use deprecated tags like b or i.

HTML

    
    
    Bakery Home


    
        
            
                Home
                Menu
                Contact
            
        
    
    
        
            Welcome to Our Bakery
            
        
        
            Our Specialties
        
    
    

Hint

Use strong for strong importance and em for emphasis inside the paragraph.

4

Add footer content with accessibility

Inside the footer, add a paragraph with the text "© 2024 Bakery Inc.". Add an aria-label attribute to the footer with the value "Site footer" for accessibility.

HTML

    
    
    Bakery Home


    
        
            
                Home
                Menu
                Contact
            
        
    
    
        
            Welcome to Our Bakery
            We bake the freshest bread and delicious pastries every day.
        
        
            Our Specialties
        
    
    
        
    

Hint

Add a paragraph inside the footer and include an aria-label on the footer tag for screen readers.

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