Difference between div, section, and article in HTML

Hello world,

I have been learning HTML and CSS for a few days now. I am immensely grateful to freecodecamp’s resources. While the curriculum provides required description, it is not very descriptive (and for good reasons). A key question I have been grappling with is how div, section, and articles are different.

I can pretty much do the same thing with all three. So then, which one should be used when?

Also, article seems like not needed at all, given that I can do pretty much everything-text with just h and p elements, categorized by divs (wherever needed).

Thank you for your insights.

The section and article elements are just ways of grouping related content together. To be honest, the vast majority of people will never notice if you use one or the other, but if you use a screen reader then you might notice a difference. Some screen readers will announce an article and allow the user to navigate by article. So the article element does possibly have some benefits for accessibility. The section element on the other hand does not provide any accessibility enhancements unless you give it an accessible name (which I won’t go into here). But if you don’t give it an accessible name then it is basically the same as a div.

As to when you should use one over the other, well, people still argue about that :slight_smile: Below are a few links for your reading pleasure if you want to go down that rabbit hole. Bottom line: Don’t stress too much about it. By far, the most important way to structure your page is with heading elements (h1h6). If you make sure you have well organized headings on your page then your page will be much more accessible to everyone.

Why You Should Choose HTML5 article Over section

Accessibility of the section element

The screenreader aspect makes sense and has to be given enough attention. Thank you for the elaboration and the links. Very helpful.

From my understanding, an article is like a house, sections are like the bedrooms, main is the neighborhood for that matter.

just my take on it. Hope you understand what I mean.

“div” elements are generic containers, nothing really specific about them. You can use them to group anything that you want to group.

The words “article” and “section” might not make much sense anymore to most people who might be “Gen Z” or younger, because those words kinda have their roots from newspapers and magazines which aren’t around as much nowadays.

An “article” is…an article - a longform piece of text that’s about something specific. Could be anything from a product review, to a blog post, to a written tutorial…really almost anything that could span up to pages of text. In the context of the Web, the text of an article will usually take up an entire web page.

A “section” is a section of an article. Articles traditionally used to be divided into sections (especially in the days of newspapers and magazines). You can use sections to designate sections of product reviews, or of blog posts, or tutorials, or anything else.

<article>
	<section></section>
	<section></section>
	<section></section>
</article>
1 Like

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.