HTML Elements <section> vs <div> vs <article>

HTML Elements <section>, <div> and <article> are all block elements. But they have different semantics.

<section>

The <section> element represents a generic section of a document or application.

• A section, in this context, is a thematic grouping of content:

— chapter

— various tabbed pages in a tabbed dialog box

— numbered sections of a thesis …

• A Web site’s home page could be split into sections for an introduction, news items, and contact information.
• The section element is not a generic container element. The section element is appropriate only if the contents would be listed explicitly in the document’s outline. [Example A]
• A section typically with a heading.

<div>

The <div> element has no special meaning at all.

• It can be used with the class, lang, and title attributes to mark up semantics common to a group of consecutive elements.
• When no other element is suitable, the div element is used as an element of last resort. Otherwise, it leads to poor accessibility for reader.

<article>

The <article> element represents a independent item section of content. It must have a <h1> tag for title.

• Independent item section of content:

— forum post

— magazine article

— newspaper article

— blog entry [Example A]

— user-submitted comment [Example B] …

• In principle, content in the article element should be independently distributable or reusable.

That’s a wrap! Happy codesign today 🧙🏻‍♀️🌿

✨📣 Frontendly.io is helping people become a really good frontend engineer 🌿, practice with real-world scenarios, and level up your front-end skills. Check it out! 🚀