What is an HTML element - Practice Questions & Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

Identify the correct definition of an HTML element

Which option best describes what an HTML element is?

A A style rule that changes the color and font of text on a webpage.

B A script that runs in the browser to add interactivity to a webpage.

C A piece of content enclosed by opening and closing tags, possibly with attributes, that defines structure or meaning in a webpage.

D A file that contains images and videos used in a webpage.

💡 Hint

Think about what parts of HTML create the structure and content on a page.

An HTML element consists of a start tag, content, and an end tag. It can also have attributes. It defines parts of the webpage like paragraphs, headings, links, etc.

📝 Syntax

intermediate

Find the valid HTML element syntax

Which option shows a valid HTML element syntax?

A <p>This is a paragraph.</p>

B <p>This is a paragraph.

C <p>This is a paragraph.<p>

D p>This is a paragraph.</p>

💡 Hint

Check if the element has both opening and closing tags correctly placed.

A valid HTML element must have an opening tag and a matching closing tag. Option A correctly shows this.

❓ rendering

advanced

What will the browser display for this HTML element?

Given the HTML code below, what will the browser show on the page?

HTML

<strong>Welcome</strong> to the site!

A Welcome to the site! (all normal text)

B Welcome to the site! (with 'Welcome' in bold)

C <strong>Welcome</strong> to the site! (tags visible as text)

D Welcome to the site! (with 'to the site!' in bold)

💡 Hint

The tag makes text bold.

The tag makes the enclosed text bold. So only 'Welcome' is bold, the rest is normal.

❓ selector

advanced

Which CSS selector targets all HTML elements of type

?

You want to style all

elements on your page. Which CSS selector should you use?

A *article

B #article

C .article

D article

💡 Hint

Think about how to select elements by their tag name in CSS.

Using the tag name alone (article) selects all elements of that type. #article selects an element with id 'article', .article selects elements with class 'article'.

❓ accessibility

expert

Which HTML element and attribute combination improves accessibility for a navigation menu?

You have a navigation menu on your webpage. Which element and attribute combination best helps screen readers understand it?

A <nav aria-label="Main navigation">...</nav>

B <div id="nav">...</div>

C <section>...</section>

D <header role="banner">...</header>

💡 Hint

Consider semantic elements and ARIA labels for accessibility.

The

element is semantic for navigation. Adding aria-label="Main navigation" helps screen readers identify the menu purpose clearly.

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