<section> vs <article> vs <div>

Im not able to understand the difference between section element vs article element vs div element and where should I use them in my webpage as if in what scenario I should prefer one of the above element over the other.

Hello, @suyash_0007 Welcome to the forums.
<section> and <article> are semantic. <div> is not. The purpose of all these tags is to create chunks of HTML, so when you come to CSS and JavaScript, it is easier to manipulate the various chunks of HTML.
Here are the differences:
The <section> tag should be used when you are separating a whole section of a webpage.

"More on the <section>" tag.

For example, I might have a webpage on ‘The Brown Bear’(remember this one?). I have three sections-‘About’, ‘Habitat’, and ‘Media’. Each one of those would be contained within a section.

But within each section, I have multiple self-contained <article>s (they all make sense on their own).

More on the <article> tag.

For example, I may have, in the ‘Habitat’ section, an <article> tag for ‘Countries with large brown bear populations’ and one for ‘Countries with small brown bear populations’.

<div> Tags are non-semantic, so they can be used in place of any semantic tag.
I hope this helps.

2 Likes

Is there a right or wrong way to decide which to use? For example in the Dasmotos project later in the course. My page and the key were identical in look. The key used

tags to separate brushes, paint, etc. I used the tag for each product figuring each product needed its own section rather than a generic division of content.

Hello @data0536296466, welcome to the forums! There isn’t exactly a right way to decide, but it you look at the second post, you’ll get a quick run down of when is considered the norm. Another matter that determines how many tags you put in (div, section, etc), is how many different components you want styled.

1 Like