What is the difference between <section> and <article> elements?

Read about section and article elements in Semantic HTML, but didn’t understand the difference between the two. I found it pretty much the same. Do they have in differences ?

Hey there @tag9382624324 :grinning:

The difference is mostly semantic.
A <section> is designed to simply divide up content on an HTML page, and usually contains content that does not have a more specific semantic HTML element, such as <article>.

<article> is designed to hold a composition that is able to stand alone and be reusable, such as a post from a website, or information about something specific.

For more reading you could see the documentation at MDN:


Thank you for your explanation ! :grinning:

I went through the links you provided. While going through ‘The Generic Section element’ link, I didn’t understand these two lines under ‘Usage Notes’ :

Do not use the <section> element as a generic container; this is what <div> is for, especially when the sectioning is only for styling purposes. A rule of thumb is that a section should logically appear in the outline of a document.

I have learnt that <div> element will come into use when I start learning about CSS and Web Design. But apart from that, does <div> element has any other use ?

My pleasure :slightly_smiling_face:

A generic container would be more for styling or dividing something to improve readability.
For example, you would use the <section> element to divide a large portion of a web-page from the rest, like a section full of pictures.

However if you wanted to style a single picture you would not use it, you would use a <div> element.

The <div> element is usually only used to add a class or id attribute to an element(s), in fact I have never heard of another use. By itself it does not effect the layout of the page.

However using the class and id attributes, you can add CSS to an element or refer to it with JavaScript or PHP.

1 Like