DEV Community

Talia
Talia

Posted on

What's the practical benefit of using <section>?

I'm honestly curious. I try to use semantic HTML when possible, so if I use <section> when it seems appropriate (when there's a semantic section of content containing a heading at the beginning). In general, semantic HTML helps with accessibility and SEO, but I'm unsure if <section> has much if any practical benefits, to be honest. I test with a screen reader and it doesn't acknowledge it at all, which makes sense I suppose, since it doesn't exactly have a meaning. So what is the point of it? I'll probably still keep using it even if no one can come up with anything since it just feels like a good policy to be semantic, but I'd love to know if there are some practical benefits.

Top comments (4)

Collapse
 
ben profile image
Ben Halpern

I think the benefits are, as you point out, related to SEO and a11y.

But whether in any individual instance they are 100% necessary or practical is debatable — I would say, however, that the more semantic your approach the more optimal your HTML can bb through the lens of scenarios you're not already 100% accounting for. So it's sort of a spectrum where the more effectively semantic the output, the more likely it is to be helpful across scenarios you're not already accounting for.

Collapse
 
taliastorymaker profile image
Talia

Yeah, that's basically my rationale for using it even if I don't exactly know a specific benefit for it. There's always the chance of future technology using it, even.

Collapse
 
samuraiseoul profile image
Sophie The Lionhart

As others, especially William said, its about communicating intent to people and bots reading the markup. If you're using your <div> to define an area rather than contain something to do some weird CSS hoopla, why not call a div being used to define a section, a <section>?

Collapse
 
welshapple profile image
William • Edited

I think pondering the practical benefits of the section element is the wrong mindset to have here to understand why it is useful.

You could say the same about most HTML elements like <p> or a <span>. Why not just <div> everything?

The main practical benefit for me though other than the SEO or accessibility that Ben has mentioned, is about readability.

If you open a HTML document I've coded you'll see a <header>, <nav>, <main>, <section>'s, a <footer>. And within seconds you can understand what markup relates to what part of the page. Everything just makes sense, you know? That alone is reason enough for me to use semantic elements. Added in with the SEO benefits and its really silly to not be using <section>'s as well as all the others.