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

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.

1

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

Hint

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

2

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


    

Hint

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

3

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


    
    

Hint

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

4

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


    
    
    

Hint

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

Practice

1. Which of the following HTML tags is a self-closing tag?

easy

A. <br>

B. <div>

C. <p>

D. <section>

Solution

1. Step 1: Understand what a self-closing tag is

   A self-closing tag does not need a separate closing tag like </tag>.

2. Step 2: Identify the self-closing tag among options

   <br> inserts a line break and is self-closing. The others require closing tags.

3. Final Answer:

   <br> -> Option A

4. Quick Check:

   Self-closing tag = <br> [OK]

Hint: Self-closing tags don't have separate closing tags [OK]

Common Mistakes:

• Thinking <div> is self-closing
• Confusing paragraph <p> as self-closing
• Assuming all tags without content are self-closing

2. Which of these is the correct syntax for a self-closing img tag in HTML5?

easy

A. <img src='image.jpg'>

B. <img src='image.jpg'></img>

C. <img src='image.jpg' />

D. <img src='image.jpg'</>

Solution

1. Step 1: Recall HTML5 self-closing tag syntax

   In HTML5, self-closing tags like img can be written with or without a slash before the closing angle bracket, but the slash is optional and allowed.

2. Step 2: Check each option's correctness

   <img src='image.jpg' /> is correct and valid HTML5 syntax. <img src='image.jpg'></img> wrongly adds a closing tag. <img src='image.jpg'> is also valid but less explicit. <img src='image.jpg'</> is invalid syntax.

3. Final Answer:

   <img src='image.jpg' /> -> Option C

4. Quick Check:

   HTML5 self-closing img = <img src='...' /> [OK]

Hint: In HTML5, slash before closing bracket is optional but allowed for self-closing tags [OK]

Common Mistakes:

• Adding a closing tag to <img>
• Using incorrect slash placement
• Confusing XHTML syntax with HTML5

3. What will the following HTML code display in a browser?

<p>Hello<br>World</p>

medium

A. Hello and World on separate lines

B. Hello World on the same line

C. Hello<br>World as text

D. Syntax error, page won't load

Solution

1. Step 1: Understand the role of <br> tag

   The <br> tag inserts a line break, moving content after it to a new line.

2. Step 2: Analyze the given code output

   The paragraph shows "Hello" then a line break, then "World" on the next line.

3. Final Answer:

   Hello and World on separate lines -> Option A

4. Quick Check:

   <br> creates line break = separate lines [OK]

Hint: Remember <br> breaks line, no closing tag needed [OK]

Common Mistakes:

• Thinking <br> shows as text
• Expecting <br> to need closing tag
• Assuming no line break happens

4. Identify the error in this HTML snippet:

<img src='photo.jpg'></img>

medium

A. The src attribute is missing

B. The <img> tag should not have a closing tag

C. The tag should be written as <image>

D. The quotes around the attribute value are incorrect

Solution

1. Step 1: Recall rules for <img> tag

   The <img> tag is self-closing and does not require a closing tag like </img>.

2. Step 2: Identify the error in the snippet

   The snippet incorrectly uses </img> which is invalid HTML and should be removed.

3. Final Answer:

   The <img> tag should not have a closing tag -> Option B

4. Quick Check:

   Self-closing tags don't have closing tags [OK]

Hint: Self-closing tags never have separate closing tags [OK]

Common Mistakes:

• Adding closing tag to <img>
• Confusing <img> with container tags
• Ignoring HTML5 syntax rules

5. You want to add a horizontal line and a line break between two paragraphs. Which is the correct HTML code using self-closing tags?

hard

A. <p>First paragraph.</p><hr/><br><p>Second paragraph.</p>

B. <p>First paragraph.</p><hr/><br/><p>Second paragraph.</p>

C. <p>First paragraph.</p><hr><br/><p>Second paragraph.</p>

D. <p>First paragraph.</p><hr><br><p>Second paragraph.</p>

Solution

1. Step 1: Understand HTML5 self-closing tag usage

   In HTML5, self-closing tags like <hr> and <br> do not require a slash before the closing bracket.

2. Step 2: Check each option for correct syntax

   <p>First paragraph.</p><hr><br><p>Second paragraph.</p> uses <hr> and <br> without slashes, which is correct. Options B and C mix slash and no slash inconsistently. <p>First paragraph.</p><hr/><br><p>Second paragraph.</p> uses slash on <hr/> but not on <br>, inconsistent but valid in XHTML, not preferred in HTML5.

3. Final Answer:

   <p>First paragraph.</p><hr><br><p>Second paragraph.</p> -> Option D

4. Quick Check:

   HTML5 self-closing tags don't need slash [OK]

Hint: Use no slash for self-closing tags in HTML5 [OK]

Common Mistakes:

• Adding slash for self-closing tags unnecessarily
• Mixing XHTML and HTML5 syntax
• Forgetting to close paragraphs properly