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).
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 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 (h1 … h6). If you make sure you have well organized headings on your page then your page will be much more accessible to everyone.
“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.
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 (