Section and article in HTML - Mini Project: Build & Apply

Building a Simple Blog Layout with <section> and <article>

📖 Scenario: You are creating a simple blog page. The page will have different sections for topics, and each section will contain articles with blog posts.

🎯 Goal: Build a basic HTML structure using &lt;section&gt; and &lt;article&gt; elements to organize blog content clearly and semantically.

📋 What You'll Learn

Use semantic HTML5 elements <section> and <article>

Create a main container for the blog content

Add two sections with distinct topics

Add two articles inside each section with headings and paragraphs

💡 Why This Matters

🌍 Real World

Websites often use <code>&lt;section&gt;</code> and <code>&lt;article&gt;</code> to organize content clearly for readers and search engines.

💼 Career

Understanding semantic HTML is essential for front-end developers to create accessible and well-structured web pages.

1

Create the main blog container and first section

Create a <main> element with the class blog. Inside it, add a <section> element with the class technology.

HTML

Hint

Use <main> for the main content and <section> for a topic area.

2

Add a second section for lifestyle topic

Inside the <main> element, after the technology section, add another <section> element with the class lifestyle.

HTML

Hint

Remember to place the new section inside <main> but after the first section.

3

Add two articles inside the technology section

Inside the technology section, add two <article> elements. Each article should have a <h2> heading and a <p> paragraph with any text.

HTML

Hint

Use two <article> blocks with headings and paragraphs inside the technology section.

4

Add two articles inside the lifestyle section

Inside the lifestyle section, add two <article> elements. Each article should have a <h2> heading and a <p> paragraph with any text.

HTML

  
    
      Latest Gadgets
      Discover the newest tech gadgets released this year.
    
    
      AI Innovations
      How artificial intelligence is changing the world.
    
  
  
    
  

Hint

Add two articles with headings and paragraphs inside the lifestyle section.

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