HTMLmarkup~15 mins

Self-closing tags in HTML - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Building a Simple HTML Page with Self-Closing Tags

📖 Scenario: You are creating a simple webpage for a small business. The page needs to include a title, a logo image, and a horizontal line to separate sections. You will practice using self-closing tags correctly in HTML.

🎯 Goal: Build a basic HTML page that uses self-closing tags for the <img> and <hr> elements, ensuring the page is valid and displays the content properly.

📋 What You'll Learn

Create a basic HTML5 skeleton with <!DOCTYPE html>, <html>, <head>, and <body> tags

Add a page title inside the <title> tag

Include an image using the <img> tag with a source and alt text

Add a horizontal line using the <hr> tag

Use self-closing syntax for <img> and <hr> tags

💡 Why This Matters

🌍 Real World

Web developers often need to create clean, valid HTML pages that include images and separators. Using self-closing tags correctly helps browsers render pages properly and keeps code neat.

💼 Career

Understanding HTML structure and self-closing tags is essential for front-end web development roles, ensuring websites are accessible and standards-compliant.

Progress0 / 4 steps

Create the basic HTML structure

Write the basic HTML5 skeleton with <!DOCTYPE html>, <html lang="en">, <head>, and <body> tags. Inside the <head>, add a <title> tag with the text My Business.

HTML

Need a hint?

Remember to include the lang="en" attribute in the <html> tag for accessibility.

Add an image with a self-closing <img> tag

Inside the <body> tag, add an <img> tag with the source set to logo.png and the alt text set to Company Logo. Use the self-closing syntax for the <img> tag.

HTML




    My Business

Need a hint?

Use <img src="logo.png" alt="Company Logo" /> to add the image with self-closing syntax.

Add a horizontal line with a self-closing <hr> tag

Below the <img> tag inside the <body>, add a horizontal line using the <hr> tag with self-closing syntax.

HTML




    My Business

Need a hint?

Use <hr /> to add a horizontal line with self-closing syntax.

Complete the HTML page with proper closing tags

Ensure the HTML page has all required closing tags and the self-closing tags are correctly formatted. The full page should include the <!DOCTYPE html>, <html lang="en">, <head> with title, and <body> with the self-closing <img /> and <hr /> tags.

HTML




    My Business

Need a hint?

Check that all tags are properly opened and closed, and self-closing tags end with />.