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.

Practice

1. Which HTML tag is best used to group related content with a heading on a webpage?

easy

A. <article>

B. <section>

C. <div>

D. <span>

Solution

1. Step 1: Understand the purpose of <section>

   The <section> tag is designed to group related content, often with a heading, to organize the page logically.

2. Step 2: Compare with other tags

   <article> is for independent content, <div> and <span> are generic containers without semantic meaning.

3. Final Answer:

   <section> -> Option B

4. Quick Check:

   Grouping related content = <section> [OK]

Hint: Use <section> for grouped content with headings [OK]

Common Mistakes:

• Confusing <article> with <section>
• Using <div> instead of semantic tags
• Thinking <span> can group block content

2. Which of the following is the correct syntax to start an article section in HTML?

easy

A. <article>

B.

C.

D. <article>

Solution

1. Step 1: Identify correct opening tag syntax

   The correct way to start an article is with an opening tag <article> without a slash.

2. Step 2: Check other options for correctness

   <article/> is self-closing and invalid for this tag; <article></article> is a full element, not just start; <article></section> mismatches tags.

3. Final Answer:

   <article> -> Option D

4. Quick Check:

   Opening tag syntax = <article> [OK]

Hint: Opening tag never has a slash inside brackets [OK]

Common Mistakes:

• Using self-closing syntax for non-void tags
• Mismatching start and end tags
• Confusing full element with just opening tag

3. What will the browser display when this HTML code is rendered?

<section>
  <h2>News</h2>
  <article>
    <h3>Article 1</h3>
    <p>Content of article 1.</p>
  </article>
  <article>
    <h3>Article 2</h3>
    <p>Content of article 2.</p>
  </article>
</section>

medium

A. A heading 'News' with two separate articles each having their own heading and paragraph

B. Only the heading 'News' is shown, articles are hidden

C. Two articles shown without the 'News' heading

D. Syntax error, nothing is displayed

Solution

1. Step 1: Understand the structure of the code

   The <section> contains a heading <h2> 'News' and two <article> elements each with their own <h3> and paragraph.

2. Step 2: Predict browser rendering

   The browser will display the 'News' heading, then each article's heading and paragraph as separate blocks.

3. Final Answer:

   A heading 'News' with two separate articles each having their own heading and paragraph -> Option A

4. Quick Check:

   Section with heading + articles = full content shown [OK]

Hint: Section heading shows above articles content [OK]

Common Mistakes:

• Thinking articles are hidden by default
• Ignoring the section heading
• Assuming syntax error from nested tags

4. Identify the error in this HTML snippet:

<section>
  <article>
    <h2>Title</h3>
    <p>Paragraph content.</p>
  </article>
</section>

medium

A. Paragraph tag is not allowed inside article

B. Missing closing tag for <article>

C. Mismatched heading tags: <h2> opened but </h3> closed

D. Section tag cannot contain article tag

Solution

1. Step 1: Check tag pairs for correctness

   The heading starts with <h2> but incorrectly closes with </h3>, which is a mismatch.

2. Step 2: Verify other tags

   The <article> and <section> tags are properly opened and closed; paragraph tag is valid inside article.

3. Final Answer:

   Mismatched heading tags: <h2> opened but </h3> closed -> Option C

4. Quick Check:

   Matching tags must open and close the same [OK]

Hint: Match opening and closing tags exactly [OK]

Common Mistakes:

• Ignoring tag mismatch errors
• Assuming section cannot contain article
• Thinking paragraph is invalid inside article

5. You want to create a blog page with multiple posts. Each post has a title, author, and content. Which is the best HTML structure to organize this content semantically?

hard

A. \n \n Post Title\n By Author\n Post content here.\n \n \n Another Post\n By Another Author\n More content here.\n \n

B. \n \n Post Title\n By Author\n Post content here.\n \n \n Another Post\n By Another Author\n More content here.\n \n

C. \n \n Post Title\n By Author\n Post content here.\n \n \n Another Post\n By Another Author\n More content here.\n \n

D. \n \n Post Title\n By Author\n Post content here.\n \n \n Another Post\n By Another Author\n More content here.\n \n

Solution

1. Step 1: Understand semantic roles of <section> and <article>

   <section> groups related content; <article> is for independent, self-contained content like blog posts.

2. Step 2: Analyze each option's structure

   <section>\n <article>\n <h2>Post Title</h2>\n <p>By Author</p>\n <p>Post content here.</p>\n </article>\n <article>\n <h2>Another Post</h2>\n <p>By Another Author</p>\n <p>More content here.</p>\n </article>\n</section> uses one <section> to group all posts, each post is an <article> with title, author, and content. This is semantically correct. <article>\n <section>\n <h2>Post Title</h2>\n <p>By Author</p>\n <p>Post content here.</p>\n </section>\n <section>\n <h2>Another Post</h2>\n <p>By Another Author</p>\n <p>More content here.</p>\n </section>\n</article> wrongly nests <section> inside <article>. <div>\n <div>\n <h2>Post Title</h2>\n <p>By Author</p>\n <p>Post content here.</p>\n </div>\n <div>\n <h2>Another Post</h2>\n <p>By Another Author</p>\n <p>More content here.</p>\n </div>\n</div> uses generic <div> without semantic meaning. <section>\n <section>\n <h2>Post Title</h2>\n <p>By Author</p>\n <p>Post content here.</p>\n </section>\n <section>\n <h2>Another Post</h2>\n <p>By Another Author</p>\n <p>More content here.</p>\n </section>\n</section> nests <section> inside <section> for posts, which is less clear than using <article> for posts.

3. Final Answer:

   Option A: section grouping articles for posts -> Option A

4. Quick Check:

   Posts = articles inside a section [OK]

Hint: Use <article> for posts inside a <section> container [OK]

Common Mistakes:

• Using <section> instead of <article> for posts
• Nesting <section> inside <article> incorrectly
• Using only <div> without semantic tags