What is an HTML element - Hands-On Activity

Understanding an HTML Element

📖 Scenario: You want to create a simple webpage that shows a greeting message.

🎯 Goal: Build a basic HTML page with a single heading element that displays the text "Hello, friend!".

📋 What You'll Learn

Create an HTML document with the correct structure

Add a <h1> element inside the <body>

Set the text inside the <h1> element to exactly "Hello, friend!"

💡 Why This Matters

🌍 Real World

Every webpage you visit is made of HTML elements like headings, paragraphs, and images.

💼 Career

Knowing how to create and structure HTML elements is the first step to becoming a web developer.

1

Create the basic HTML structure

Write the basic HTML skeleton including <!DOCTYPE html>, <html lang="en">, <head> with <meta charset="UTF-8"> and <title> "Greeting Page", and an empty <body>.

HTML

    
    Greeting Page


    

Hint

Start by typing the basic HTML tags that every page needs.

2

Add a heading element

Inside the <body> tag, add an <h1> element.

HTML

    
    Greeting Page


    

Hint

Use the <h1> tag to create a big heading.

3

Add text inside the heading

Write the exact text Hello, friend! inside the <h1> element.

HTML

    
    Greeting Page


    

Hint

Put the greeting text exactly between the opening and closing <h1> tags.

4

Add a language attribute and meta viewport

Make sure the <html> tag has lang="en" and add a <meta name="viewport" content="width=device-width, initial-scale=1.0"> inside the <head> for mobile-friendly design.

HTML

    
    Greeting Page
    


    Hello, friend!

Hint

This helps browsers know the page language and make it look good on phones.

Practice

1. What is an HTML element?

easy

A. A tag that wraps content to tell the browser how to display it

B. A style rule that changes colors on a page

C. A script that runs in the browser

D. A file format for images

Solution

1. Step 1: Understand the role of tags in HTML

   HTML elements use tags to wrap content and give instructions to the browser.

2. Step 2: Differentiate elements from styles and scripts

   Styles and scripts are separate parts; elements define structure and content.

3. Final Answer:

   A tag that wraps content to tell the browser how to display it -> Option A

4. Quick Check:

   HTML element = tag wrapping content [OK]

Hint: Elements wrap content with tags to show in browser [OK]

Common Mistakes:

• Confusing elements with CSS styles
• Thinking elements are scripts
• Believing elements are image files

2. Which of the following is the correct syntax for an HTML element?

easy

A. <div>This is content</div>

B. {div}This is content{/div}

C. [div]This is content[/div]

D. (div)This is content(/div)

Solution

1. Step 1: Identify the correct tag format in HTML

   HTML elements use angle brackets < and > for tags, not braces or brackets.

2. Step 2: Check opening and closing tags

   The opening tag <div> and closing tag </div> correctly wrap the content.

3. Final Answer:

   <div>This is content</div> -> Option A

4. Quick Check:

   HTML tags use < > brackets [OK]

Hint: HTML tags always use < and > brackets [OK]

Common Mistakes:

• Using curly braces or square brackets instead of angle brackets
• Forgetting the slash in closing tags
• Mixing tag symbols

3. What will the browser display for this HTML code?

<p>Hello <strong>World</strong>!</p>

medium

A. Hello <strong>World</strong>!

B. Hello World!

C. Hello <p>World</p>!

D. !;tg&gnorts/;tl&dlroW;tg&gnorts;tl& olleH

Solution

1. Step 1: Understand how tags affect display

   The <p> tag creates a paragraph, and <strong> makes text bold but does not show tags.

2. Step 2: Visualize the rendered text

   The browser shows "Hello " normal, "World" bold, and "!" normal, but tags are hidden.

3. Final Answer:

   Hello World! -> Option B

4. Quick Check:

   Tags format text, not show tags [OK]

Hint: Tags format text; browser hides tag symbols [OK]

Common Mistakes:

• Thinking tags appear as text
• Ignoring the effect of <strong>
• Confusing tags with visible characters

4. Find the error in this HTML element:

<h1>Welcome to my site<h1>

medium

A. There is no error

B. The opening tag should be <h2> instead

C. The closing tag should be </h1>, not <h1>

D. The text should be inside <p> tags

Solution

1. Step 1: Check the closing tag syntax

   HTML closing tags must have a slash, so <h1> is incorrect as a closing tag.

2. Step 2: Correct the closing tag

   The correct closing tag is </h1> to properly close the heading element.

3. Final Answer:

   The closing tag should be </h1>, not <h1> -> Option C

4. Quick Check:

   Closing tags need a slash / [OK]

Hint: Closing tags always start with [OK]

Common Mistakes:

• Forgetting the slash in closing tags
• Using wrong tag names for closing
• Thinking opening and closing tags are identical

5. Which of these is a self-closing HTML element?

hard

A. <p>Text</p>

B. <div></div>

C. <h1>Title</h1>

D. <br />

Solution

1. Step 1: Identify self-closing elements

   Self-closing elements do not have separate closing tags and end with a slash inside the opening tag.

2. Step 2: Check each option

   <br /> is a line break and self-closes; others have separate closing tags.

3. Final Answer:

   <br /> -> Option D

4. Quick Check:

   Self-closing tags end with / inside < > [OK]

Hint: Self-closing tags end with /> inside angle brackets [OK]

Common Mistakes:

• Thinking all elements need closing tags
• Confusing self-closing with empty tags
• Missing the slash in self-closing tags