@Kai
Section isn’t used on its own, it’s usually within other elements. And it isn’t the only one.
You can for example have a header, main and footer, instead of three divs. And inside the main, have three sections with different contents and titles. Or within a single main, have an article with multiple sections inside, or multiple sections with different articles.
dividing a webpage up into different parts, which is what sections do as well! that’s why i’m confused still, like these two tags are like the same thing to me haha
@Kai
One important distinction on the code side is you will often use divs for reasons other than content. Like for example if you need two elements to be grouped together for styling reasons you can put them in a div and then you can style that div’s class and select it through JS if needed, but this doesn’t have any meaning in your document, it’s just to make the interface easier to work with. That leaves section free to be used for actual document semantic reasons.
Also worth noting that div is a much older tag than section. Div was specifically intended to be a generic block tag, while section was introduced with HTML5 specifically as a semantic tag along with many other semantic tags.
I honestly think that thinking of divs as dividers isn’t super helpful. I think it’s better to think of them as containers of other elements. They’re used for things like grouping elements together for layout purposes.
I guess the confusing aspect about the divider analogy is that they don’t really go between content, but around content.
@Kai
I’m pretty new too!
So here’s why in basic terms:
Let’s say you have a webpage. One page. With the following sections: About Us, Our Services, and Contact Us.
You understand what that means in plain English, I’m certain.
A tag just tells the browser in non-English that each of those sections are sections. No different from your own understanding!
Now it understands that your home page has content arranged in parts.
Meanwhile, a
You might have a div around your section. And you might have several divs inside a section. And you might have divs inside those divs. They are just containers.
And each container can be given some different properties.
One container might say that anything inside is a series of “benefits”. But each of those benefits needs to be laid out in a certain way, so each “benefit” card might have a div around it too. And each benefit might contain a paragraph, and image, an icon, and a link. Those elements too, might have a div around it. And why? Well, you can add classes to divs to ensure that certain elements take on certain traits from those classes (such as styling a paragraph a certain way).
@Kai
You’re just not listening.
The word “semantic” means descriptive of the structure and context of the document.
Div means “divider” it has no particular meaning. It’s not the header or the body or the title or anything that has any structural meaning to a document.
@Kai
Think of it from a web crawler point of view.
To humans, it makes zero difference whether you use a div or a section. But crawlers care. They get more information if they run into a section vs a div. They’ll just interpret them differently. Or a div vs an tag.
@Kai
dont know about studies, but im lead developer for ugh, over 15 years now. i can speak for at least 50 other coders i worked closely with. obv private corpo.
here it comes:
the whole web structure is commonly built on divs as its default block element. thats that.
now regards semantics, are we talking SEO or readability?
regards SEO, you could replace a relevant div with a section when needed, nobody usually does this, and still we achieve top 1 so who gives a shit.
regards readability, its bullshit, nobody makes web in plain html, that is not split into components in one framework or another. it makes absolutelly no sense to care about semantics when it comes to the tag types.
however, you have to do what your teacher wants you to, so i suppose it would not be a miss to ask him to explain his opinion so you could give him the exact result he wants and pretend that it makes sense.
@Taylor
As a fellow old-timer dev who came up before semantic HTML, I was a bit out of date on their use as well. Respectfully, you could use a refresher on it, because this is not great advice for a new dev.
SEO is much more than showing up at #1 for a specific keyphrase (although I respect that if you’re getting the results you want, this is a tough sell). And A11y-compliant code matters. Semantic HTML provides better results for screen readers, web crawlers, and context for frontend devs who are reading code they’re not as familiar with.
Semantic HTML does nothing for readability on a rendered page, so I’m not sure why you mention that. Overall, this answer just strikes me as someone who refused to update their knowledge, just because their job didn’t require it.
@Cort
not a seo specialist myself, we do cooperate with dedicated teams for that. certainly not primary goal for pre-junior, would you not agree with the obvious.
never does anyone ever base the project seo first, that being my point. adjustments towards seo, and load speeds are done at earliest after first stage. exactly why i wonder why the fella is concerned so much with the section tag.
other than that, if you have anything specific in mind to share with us, ehy dont you do so, instead of just being salty.
@Taylor
My comment was salty? No, not at all, I was attempting to be informative. Respectfully, it sounds like you’re conflating YOUR job with general wisdom.
I have most definitely worked on projects where SEO was first and foremost - it informed how we approached every design and implementation decision. Easily the fastest loading site I’ve ever built, it was very cool.
And semantic HTML is most definitely a pre-junior learning task. It’s very simple to learn, and in modern curricula, it’s taught at the start along with the rest of basic HTML.
I don’t know why my last response made you defensive. It’s ok to disagree - a mature dev should be used to that. But again, respectfully, I don’t think your response is good advice to OP, or any new web dev outside your company’s current needs.
@Cort
and i think youre confusing your uncommon opinion with general wisdom, how you call it. perhaps we have too much opposing experiences, in general.
anyways, this conversation is not informative and leads neither of us anywhere, nor is amusing or have anything positive.
therefore, have a nice evening, sir.
Think of div as a box. It’s just a box. You can style it, you can put things in it, you can write things on it. But by default, it’s just a plain box. A plain box doesn’t mean anything.
Semantic elements like section are also boxes. They can also be styled, can contain things, etc. But they aren’t plain boxes by default. They have inherent meaning. In this case, a section is a logical chunk of a document.
You might wonder why this matters. If you can make sections and divs look visually exactly the same, who cares what their inherent meaning is? Well, not everyone is fortunate enough to be able to see the visual styling you apply to elements. Some users rely on technologies that provide them with better representation of the page if the page has better semantics. Because of this, it’s worth thinking about which element you use, so that you can provide a good experience to all your users.
Because a div could be anything. You most often use it as a wrapper or container that could contain… whatever you want. You don’t even need to use it for that purpose either.
On the other hand, when you create a section, you signal very specific intentions. Screen readers (and web crawlers/site indexes) will know that this will be a section of content that follows semantic standards, meaning it HAS to contain at least a header element.
A div has no such standards or meaning to a screen reader. They actually actively ignore those elements.
Section is semantic, because it’s [supposed to be] a section.
You’ll quickly start to realize that everything is actually just a div with a name. The thing that makes it semantic is that the content fits with the name of the tag. It’s your job to actually use the section tag as a separate section, and not as an img container or a paragraph.
> professor’s a bit of an unhelpful condescending jackass when it comes to questions
Are you one of my students? (kidding)
div is a generic element that can be used for anything.
section is like a section of text on a page with subheadings. It breaks up the main content of the page into digestible chunks.
