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.

Practice

1. Which of the following is a semantic HTML element?

easy

A. <article>

B. <div>

C. <span>

D. <b>

Solution

1. Step 1: Understand semantic elements

   Semantic elements clearly describe their meaning, like <article> which represents an independent piece of content.

2. Step 2: Identify non-semantic elements

   <div> and <span> are generic containers without meaning. <b> is a presentational element without semantic meaning.

3. Final Answer:

   <article> -> Option A

4. Quick Check:

   Semantic element = <article> [OK]

Hint: Semantic tags describe content meaning, non-semantic don't [OK]

Common Mistakes:

• Confusing <div> as semantic
• Thinking <span> is semantic
• Thinking <b> is semantic

2. Which of these is the correct syntax for a semantic header element in HTML5?

easy

A. <heading>Welcome</heading>

B. <head>Welcome</head>

C. <header>Welcome</header>

D. <head><title>Welcome</title></head>

Solution

1. Step 1: Recognize semantic header tag

   <header> is the semantic tag for page or section headers.

2. Step 2: Differentiate from <head>

   <head> contains metadata, not visible content. <heading> is not a valid HTML tag.

3. Final Answer:

   <header>Welcome</header> -> Option C

4. Quick Check:

   Semantic header = <header> [OK]

Hint: Use <header> for visible headers, not <head> [OK]

Common Mistakes:

• Using <head> for visible content
• Writing invalid <heading> tag
• Confusing metadata with page content

3. What will the browser display when rendering this HTML snippet?

<div><h1>Title</h1><p>Paragraph</p></div>

Choose the best description.

medium

A. Only the paragraph 'Paragraph' is shown

B. A heading 'Title' and a paragraph 'Paragraph' inside a generic container

C. An error because <div> cannot contain <h1>

D. The heading 'Title' is bold but paragraph is hidden

Solution

1. Step 1: Understand <div> usage

   <div> is a non-semantic container that can hold any flow content including headings and paragraphs.

2. Step 2: Check rendering of heading and paragraph

   The <h1> will display as a large bold heading, and <p> as a paragraph below it, both visible inside the container.

3. Final Answer:

   A heading 'Title' and a paragraph 'Paragraph' inside a generic container -> Option B

4. Quick Check:

   Non-semantic container shows all content [OK]

Hint: Div can hold headings and paragraphs without errors [OK]

Common Mistakes:

• Thinking div restricts content types
• Assuming heading is hidden
• Believing invalid nesting error occurs

4. Identify the error in this HTML code:

<section><div>Content</section></div>

medium

A. The tags are correctly nested with no errors

B. The <section> tag cannot contain a <div>

C. The <section> tag is missing a closing tag

D. The <div> tag is not closed before </section>

Solution

1. Step 1: Check tag nesting order

   The <div> opens inside <section> but closes after </section>, breaking proper nesting.

2. Step 2: Understand correct nesting rules

   Tags must close in reverse order of opening. Here, <div> should close before </section>.

3. Final Answer:

   The <div> tag is not closed before </section> -> Option D

4. Quick Check:

   Proper nesting = close inner tags first [OK]

Hint: Close inner tags before outer tags to avoid nesting errors [OK]

Common Mistakes:

• Ignoring tag closing order
• Thinking div can't be inside section
• Missing closing tags

5. You want to improve accessibility and SEO by replacing non-semantic tags with semantic ones. Which change is best for this code?

<div><div>Main content</div><div>Footer info</div></div>

hard

A. Replace outer <div> with <main> and inner footer <div> with <footer>

B. Replace all <div> with <section>

C. Replace outer <div> with <article> and inner footer <div> with <aside>

D. Keep all <div> tags because semantic tags are optional

Solution

1. Step 1: Identify semantic tags for main content and footer

   <main> is the semantic tag for main page content, and <footer> is for footer information.

2. Step 2: Replace non-semantic <div> with semantic tags

   Changing the outer <div> to <main> and the footer <div> to <footer> improves meaning and accessibility.

3. Final Answer:

   Replace outer <div> with <main> and inner footer <div> with <footer> -> Option A

4. Quick Check:

   Use <main> and <footer> for better semantics [OK]

Hint: Use <main> for main content, <footer> for footer info [OK]

Common Mistakes:

• Using <article> instead of <main> for main content
• Replacing all divs with <section> unnecessarily
• Ignoring semantic improvements