Accessibility. Divs are more for visual structure alone, but the semantic elements are for communicating information. Think about how the site would be used by somebody with vision difficulties. Then think about how much HTML there is on the page. They aren’t going to be concerned with every tag. They will however be concerned with where’s the nav, I want to go to a different page, where are the articles I want to listen to know what articles are there, I don’t care about this sidebar let me find where the main section of the page is. So basically we need something to just help us make things look good but we also need something that allows for those of us that cannot see/don’t need the visual aspects of the site to still be able to use the site in the most non-annoying way.
Semantics is the study of the meaning of words. Semantic elements use words that have meaning to humans. div as a word contains no meaning, at best it is a shortened version of an actual word. Section is an actual word with actual semantics. If I use section in a sentence, you can use your understanding of the word and no more explanation is necessary. If I use div in a sentence I probably need more words to describe what I mean.
@Micah
section and divider are synonyms though! and both words don’t say much aside from that they break a bigger thing into smaller parts, therefore in my head these two words hold the same amount of context, if that makes sense >_<
@Kai
I’m afraid not, a section is a member of a larger group. A divider (if that’s what we think div stands for) is something that separates elements of a group.
@Kai
The words aren’t synonyms, but I can understand the confusion. You could always use a div instead of a section if you don’t care about semantic elements, but using a section instead of a div would not always be semantically correct.
Section elements represent distinct parts of a site with some specific purpose.
Imagine a page that presents information about a company as you scroll down the page. This information would feel natural to divide into multiple sections, like “About us”, “Reviews”, or “Contact”. All these sections have some distinct meaning and purpose.
A div, on the other hand, can group any elements together without any particular meaning for styling and layout purposes. Imagine you want to layout some buttons in a particular way. You can put them in a div and apply some flexbox styling to the div, for example.
@Kai
Maybe in English, but not in the industry-specific terminology that they are being used for here.
The main thing for you to do at the moment is to really dive into accessibility and listen to how screen readers read off a site you create. A div won’t change the flow of how a page is read to the user, but a section, aside, and others will. One of the best use cases for section is near the end of an article where you may want to list links to other articles that relate to the main article. You’re creating a way to provide context to auxiliary content.
The section tag has an additional feature from divs as in they become a named section of whatever h# it has at the beginning, otherwise it turns as dull as a regular div.
Divs, as they don’t have that feature, don’t have to worry about unintentional accessibility mistakes, therefore they can be used as blocks to encapsulate content easily for styling or scripting purposes.
When people talk about semantics, it’s mostly talking about how things are described in the accessibility tree. That’s a pretty big rabbit hole that I would not suggest going down just yet. Focus for now on using the appropriate tags (as you are now) and that stuff will mostly work itself out.
<div> isn’t semantic because it has no meaning whatsoever, it is just for grouping arbitrary contents.
<section> is a generic element, but one that represents a standalone section of a document when there isn’t a more specific semantic element to use. Because it’s supposed to be standalone, it should pretty much always include a header. So it’s really only one step above <div> in terms of semantics.
btw, <header> can be equivalent to <section> in the accessibility tree when used in certain ways.
@Weston
my professor uses sections with no headers in them all the time, which is why i get confused on what sets them apart from divs, since he uses both these elements the same way!
he also says that there can’t be more than one header in a single webpage, is this true??
@Kai
Just to be clear, when I say header I mean h1, h2, etc. You want those to make sense relative to the entire page. So maybe he was saying no more than a single <h1>? That would be good and correct advice.
As far as <header>, it’s perfectly valid and reasonable to have multiple of those in a single page, if appropriate.
When in doubt, check the MDN page for the tag/element.
@Weston
yeah, he said that there shouldn’t be more than one in a single webpage
that’s why i was confused
EDIT: my bad, i just remembered correctly: he said no more than one , not . got mixed up there.
Well… First, get used to “semantic” being thrown around a lot, usually with very little substance. 
Second, get used to reading the docs and specs.
The
<div>HTML element is the generic container for flow content. [… ] As a “pure” container, the<div>element does not inherently represent anything. Instead, it’s used to group content so it can be easily styled using theclassoridattributes, marking a section of a document as being written in a different language (using thelangattribute), and so on.
The
<section>HTML element represents a generic standalone section of a document, which doesn’t have a more specific semantic element to represent it. Sections should always have a heading, with very few exceptions. [… ] If you are only using the element as a styling wrapper, use a<div>instead.
So that’s about it in general.
Div doesn’t impose any meaning on what it contains, its purpose is technical.
Section imposes some meaning on what it contains, implying that it’s a portion of a larger document.
Web design is ultimately still about a user who views the page/document. And that user wants something, and won’t see a page as a stack of block-level elements, but as things having meaning: You as a user post a question with explanation and others reply to that. So the meaning is in those things. With semantic HTML, you try to be as close to that actual meaning for the user, while still being general enough to be relevant to multiple sites. (The general concept of a header or sidebar or post is something that’s useful, but something like ‘flair’ is pretty specific for reddit, so it doesn’t really make sense as a general element in the browser.)
A div is basically: we don’t know ANYTHING about its meaning or use for the user. Just that it’s a block-level element, nothing else. Browsers, assistive technology, auto-summary tools, print stylesheets—they can assume nothing about a div without further info.
A section is still a very general element, but it’s at least meant to be a group of sorts: fairly high-level. You don’t use ‘section’ for a single indicator, you do it for something larger, and as the html-specs say: usually for something that also has a heading. The heading is not mandatory, but it gives you an indication of what things could be sections: part of the sidebar for example (say recently visited reddits or the rules summation for this subreddit), or a group of articles that belong to a category.
You’ll also get a feel for that if you wanted to rearrange a layout. Things you wouldn’t split up but rather move in its entirety can be sections. (I could see the sidebars switching sides, or the individual parts of the sidebars being moved around, but you would never subdivide the ‘recent links’ section to have it partly in one sidebar and another bit in the other. It’s so much a ‘section’ that I couldn’t even describe it properly without using the word ‘section.’ Which usually is a pretty strong indicator.)
Still broad and generic, but the meaning is much more defined.
I’ll give you an example.
Let’s say you’re making a resume page.
Often resumes are divided into logical parts. Skills, Experience, References, etc.
Each of those could be semantically represented with a section element. A div could also do it if you gave it a meaningful class, however often other elements better convey the meaning.
Or you could split each section of a particular job into smaller sections.