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

Need a 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


    
        
    
    
        
    
    

Need a 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
        
    
    

Need a 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
        
    
    
        
    

Need a hint?

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