HTMLmarkup~20 mins

HTML validation tools - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Using HTML Validation Tools

📖 Scenario: You are creating a simple webpage for a local bakery. You want to make sure your HTML code is correct and follows web standards so that everyone can see your page properly on any browser or device.

🎯 Goal: Build a basic HTML page with a heading and a paragraph, then prepare it so you can check it with an HTML validation tool to find and fix any errors.

📋 What You'll Learn

Create a valid HTML5 skeleton with lang, charset, and viewport meta tags

Add a <header> with a main heading

Add a <main> section with a paragraph describing the bakery

Include comments to mark where validation tool checks can be done

💡 Why This Matters

🌍 Real World

Web developers must write clean, valid HTML so websites work well on all browsers and devices. Validation tools help catch mistakes early.

💼 Career

Knowing how to structure HTML properly and use validation tools is essential for front-end developers, web designers, and anyone building websites professionally.

Progress0 / 4 steps

Create the basic HTML5 structure

Write the basic HTML5 skeleton with <!DOCTYPE html>, <html lang="en">, <head> containing <meta charset="UTF-8">, <meta name="viewport" content="width=device-width, initial-scale=1.0">, and a <title> with the text Bakery Home. Then open the <body> tag.

HTML

Need a hint?

Start with the standard HTML5 document setup. Remember to include the language attribute in the <html> tag and the charset and viewport meta tags inside <head>.

Add header with main heading

Inside the <body>, add a <header> element containing an <h1> with the text Welcome to Sweet Treats Bakery.

HTML




    
    
    Bakery Home

Need a hint?

Use semantic HTML by placing the main heading inside a <header> element.

Add main section with paragraph

Below the <header>, add a <main> element containing a <p> with the text We bake fresh bread and delicious pastries every day.

HTML




    
    
    Bakery Home


    
        Welcome to Sweet Treats Bakery

Need a hint?

Use the <main> element to hold the main content and add a paragraph inside it.

Close body and html tags and add validation comment

Close the <body> and <html> tags. Then add an HTML comment at the end of the file that says Check this file with an HTML validator.

HTML




    
    
    Bakery Home


    
        Welcome to Sweet Treats Bakery
    
    
        We bake fresh bread and delicious pastries every day.

Need a hint?

Don't forget to close the <body> and <html> tags. Adding a comment helps remind you to validate your HTML.