Articles vs. Sections
What are Articles & Sections?
Think of a physical newspaper. A single page has multiple independent news reports. Each report is self-contained—you could cut it out and read it on its own, and it would still make sense (this is an<article>). Inside a single report, there might be sub-chapters or parts like "Introduction", "The Background", or "Timeline" (these are <section> blocks).
<article>: Represents a complete, self-contained composition that is independently distributable or reusable (e.g., a blog post, forum post, product card, or news story).<section>: Represents a generic standalone section of a document that groups related content together, typically starting with a heading.Why does it matter?
Using<article> and <section> instead of generic <div> tags tells the browser and search engines exactly how your content is structured. It helps search engine crawlers index your blog posts or news articles more accurately.
How to write it
Use<article> for self-contained components and <section> to divide themes inside them:
<article>
<h1>Blog Post Title</h1>
<section>
<h2>Introduction</h2>
<p>Intro paragraph text.</p>
</section>
<section>
<h2>Main Details</h2>
<p>Main content text.</p>
</section>
</article>
Article container wrapper
Section block 1
Common Mistakes
<section> as a wrapper for styling: If you only need a box to apply background colors, borders, or margins, use a <div>. Only use <section> if the content inside shares a common theme and has a heading.<section> should start with a heading (<h2>-<h6>) explaining what the section is about.Quick Reference
<article> — Complete self-contained content card or post.<section> — Theme-based grouping, usually requires a heading.Your Task
Create an `<article>` container. Inside it, place a `<section>` containing an `<h2>` with 'Documentation'.
index.html
Type code above to start the lesson.
Live Preview