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

Need a 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

Need a 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

Need a 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.
    
  
  
    
  

Need a hint?

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