What is an HTML element - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a paragraph element in HTML.

HTML

<[1]>This is a paragraph.</[1]>

Drag options to blanks, or click blank then click option'

Adiv

Bp

Cspan

Dheader

Attempts:

3 left

💡 Hint

Common Mistakes

Using

instead of

for paragraphs.

Using which is inline, not block.

is the correct tag for a paragraph element in HTML.

2fill in blank

medium

Complete the code to create a heading element in HTML.

HTML

<[1]>Welcome to my website</[1]>

Drag options to blanks, or click blank then click option'

Ah4

Bh3

Ch1

Dh6

Attempts:

3 left

💡 Hint

Common Mistakes

Using smaller heading tags like h3 or h6 for main titles.

Confusing heading tags with paragraph tags.

is the largest heading element in HTML, used for main titles.

3fill in blank

hard

Fix the error in the HTML element by completing the closing tag correctly.

HTML

<div>This is a container[1]

Drag options to blanks, or click blank then click option'

A</div>

B<span>

C</span>

D<div>

Attempts:

3 left

💡 Hint

Common Mistakes

Using opening tags instead of closing tags.

Using a different tag name in the closing tag.

The closing tag for a

element is

.

4fill in blank

hard

Fill both blanks to create a link element with the correct opening and closing tags.

HTML

<[1] href="https://example.com">Visit Example[2]

Drag options to blanks, or click blank then click option'

Aa

Blink

C</a>

D</link>

Attempts:

3 left

💡 Hint

Common Mistakes

Using which is for stylesheets, not links.

Forgetting to close the tag.

The tag is used for links, and it must be closed with .

5fill in blank

hard

Fill all three blanks to create an image element with alt text and a source URL.

HTML

<[1] src="[2]" alt="[3]">

Drag options to blanks, or click blank then click option'

Aimg

Bhttps://example.com/image.jpg

CA descriptive text

Dimage

Attempts:

3 left

💡 Hint

Common Mistakes

Using instead of .

Forgetting the alt attribute for accessibility.

The tag displays images. The src attribute sets the image URL, and alt provides descriptive text for accessibility.

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