Section and article in HTML - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the purpose of the <section> element in HTML?

The <section> element groups related content together, like chapters in a book. It helps organize the page into meaningful parts.

beginner

How does the <article> element differ from <section>?

<article> is for self-contained content that can stand alone, like a blog post or news story. <section> is for grouping related content within a page.

intermediate

Can a <section> contain multiple <article> elements?

Yes, a <section> can contain multiple <article> elements if they are related and grouped together under a common theme.

beginner

Why is using semantic elements like <section> and <article> important?

They improve accessibility, help search engines understand content, and make the code easier to read and maintain.

beginner

Give an example of when to use <article> instead of <section>.

Use <article> for a blog post, news story, or user comment that can be shared or read independently.

Which HTML element is best for grouping related content under a common theme?

A <div>

B <article>

C <section>

D <header>

groups related content under a theme, while

is for independent content.

Which element should you use for a standalone blog post?

A <section>

B <article>

C <footer>

D <nav>

is for self-contained content like blog posts.

Can <article> elements be nested inside a <section>?

A Yes

B No

C Only if they have the same class

D Only inside <div>

elements can be grouped inside a

if related.

Why use semantic elements like <section> and <article> instead of just <div>?

A They improve accessibility and SEO

B They add style automatically

C They make the page load faster

D They are required for all HTML pages

Semantic elements help screen readers and search engines understand the page structure.

Which element is NOT typically used to organize page content semantically?

A <header>

B <article>

C <section>

D <span>

is an inline element used for styling, not for semantic grouping.

Explain the difference between

and

elements and when to use each.

Think about content that can stand alone versus content grouped by theme.

Describe why semantic HTML elements like

and

improve accessibility and SEO.

Consider how machines and people benefit from clear content structure.

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