Section and article in HTML - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding semantic roles of

and

Which statement best describes the difference between the

and

elements in HTML5?

A <section> and <article> are interchangeable and have no semantic difference.

B <section> is used only for navigation menus, and <article> is used only for footers.

C <section> defines a thematic grouping of content, while <article> represents a self-contained composition that can be independently distributed.

D <section> is deprecated in HTML5, and <article> is used for all content grouping.

💡 Hint

Think about which element can stand alone and be shared separately.

groups related content under a theme, while

is for content that makes sense on its own, like a blog post or news story.

📝 Syntax

intermediate

Identify the correct HTML structure using

and

Which HTML snippet correctly uses

and

to structure a blog page with multiple posts?

A <section><article><h2>Post 1</h2><p>Content</p></article><article><h2>Post 2</h2><p>Content</p></article></section>

B <article><article><h2>Post 1</h2><p>Content</p></article><article><h2>Post 2</h2><p>Content</p></article></article>

C <section><section><h2>Post 1</h2><p>Content</p></section><section><h2>Post 2</h2><p>Content</p></section></section>

D <article><section><h2>Post 1</h2><p>Content</p></section><section><h2>Post 2</h2><p>Content</p></section></article>

💡 Hint

Think about which element groups multiple posts and which represents each post.

A

groups the blog posts, and each

represents a single post.

❓ rendering

advanced

Visual result of nested

and

What will the browser visually display for this HTML snippet?

HTML

<section>
  <h1>News</h1>
  <article>
    <h2>Headline 1</h2>
    <p>Details about headline 1.</p>
  </article>
  <article>
    <h2>Headline 2</h2>
    <p>Details about headline 2.</p>
  </article>
</section>

A A main heading 'News' followed by two separate subheadings 'Headline 1' and 'Headline 2' each with their paragraphs.

B The browser shows a bulleted list of headlines without paragraphs.

C Only the main heading 'News' is shown; articles are hidden by default.

D The content is displayed as a single paragraph without headings.

💡 Hint

Remember that semantic tags do not change default display but help organize content.

The

groups the news content with a main heading, and each

shows its own heading and paragraph.

❓ selector

advanced

CSS selector targeting

inside

Which CSS selector correctly styles only

elements that are direct children of a

?

A section + article { color: blue; }

B section article { color: blue; }

C article > section { color: blue; }

D section > article { color: blue; }

💡 Hint

The '>' selector targets direct children only.

The selector 'section > article' applies styles only to articles that are immediate children of a section.

❓ accessibility

expert

Improving accessibility with

and

Which practice improves screen reader navigation when using

and

elements?

A Avoid headings inside <article> to reduce clutter for screen readers.

B Add aria-label or aria-labelledby attributes to <section> and <article> to describe their content.

C Use only <div> elements with no semantic tags to keep it simple.

D Use inline styles to hide <section> and <article> from screen readers.

💡 Hint

Think about how screen readers identify sections and articles.

Adding aria-label or aria-labelledby helps screen readers understand the purpose of each section or article.