What is an HTML element - Quick Revision & Key Takeaways

Recall & Review

beginner

What is an HTML element?

An HTML element is a building block of a webpage. It usually has a start tag, content, and an end tag. For example, <p>Hello</p> is a paragraph element.

beginner

What are the parts of a typical HTML element?

A typical HTML element has three parts: a start tag (like <div>), content (like text or other elements), and an end tag (like </div>).

beginner

Can an HTML element have no content?

Yes, some HTML elements are empty and do not have content or an end tag. These are called self-closing elements, like <br> for a line break.

beginner

Give an example of an HTML element with content.

Example: <h1>Welcome to my site</h1>. Here, <h1> is the start tag, 'Welcome to my site' is the content, and </h1> is the end tag.

beginner

Why are HTML elements important?

HTML elements tell the browser how to display content. They create structure and meaning for text, images, links, and more on a webpage.

Which of the following is a correct HTML element?

A <div Hello World>

B <p>Hello World</p>

C <p Hello World>

D <Hello World></p>

Option B shows a proper start tag <p>, content, and end tag </p>.

What part of an HTML element tells the browser where the element ends?

A End tag

B Content

C Attribute

D Start tag

The end tag, like </p>, tells the browser where the element finishes.

Which element is self-closing (empty) in HTML?

A <h1>

B <p>

C <br>

D <div>

The <br> element inserts a line break and does not have content or an end tag.

What does an HTML element do?

A Runs JavaScript code

B Stores data in a database

C Styles the webpage

D Creates structure and meaning on a webpage

HTML elements build the structure and meaning of webpage content.

Which is the correct way to write a paragraph element with text 'Hi'?

A <p>Hi</p>

B <p />Hi

C <Hi></p>

D <p><Hi>

Option A correctly wraps the text 'Hi' inside paragraph tags.

Explain what an HTML element is and describe its main parts.

Think about how a webpage is built using tags.

Why do browsers need HTML elements to display webpages correctly?

Consider how browsers read and show webpage content.

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