Semantic vs non-semantic elements in HTML - Practice Questions

Challenge - 5 Problems

🧠 Conceptual

intermediate

Identify the semantic element

Which of the following HTML elements is semantic and clearly describes its content?

A <section>

B <span>

C <article>

D <div>

💡 Hint

Semantic elements describe the meaning of their content, not just structure.

The

element is semantic because it represents a self-contained composition in a document, like a blog post or news story.

and are non-semantic containers.

is also semantic but is more general than

.

📝 Syntax

intermediate

Which element is non-semantic?

Which HTML element below is considered non-semantic because it does not provide meaning about its content?

A <header>

B <div>

C <footer>

D <nav>

💡 Hint

Non-semantic elements are used only for grouping or styling without describing content.

is a generic container with no semantic meaning.

,

, and

all describe the role of their content.

❓ rendering

advanced

Visual difference between semantic and non-semantic elements

Given the following HTML, what will the browser display visually?

HTML

<header>
  <h1>Welcome</h1>
</header>
<div>
  <h1>Welcome</h1>
</div>

A Two headings styled differently by default

B An error message in the browser

C Only the header's heading is visible

D Two identical headings with no visual difference

💡 Hint

Browsers apply default styles mostly to headings, not containers.

Both

and

are block-level containers. The

inside each looks the same by default. Semantic elements do not change default visual style but help with meaning and accessibility.

❓ selector

advanced

CSS selector for semantic elements

Which CSS selector will select all semantic sectioning elements in HTML5?

A header, footer, nav, section, article, aside

B div, span, p, a

C *

D .semantic

💡 Hint

Semantic sectioning elements include those that define document structure.

The selector 'header, footer, nav, section, article, aside' targets all main semantic sectioning elements. Other options select non-semantic elements or classes.

❓ accessibility

expert

Accessibility benefit of semantic elements

Why do semantic HTML elements improve accessibility for screen reader users?

A They provide meaningful landmarks and structure for navigation

B They prevent users from copying content

C They reduce page load time by using fewer tags

D They automatically add color contrast for better visibility

💡 Hint

Think about how screen readers use page structure.

Semantic elements like

,

, and

give screen readers landmarks to help users navigate content easily. They do not affect colors or load time directly.