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.
Talia @taliastorymaker
About: Front end web dev. Lover of CSS, TypeScript, and semantic, accessible HTML. Been using React lately; also experienced with Alpine.js, Vue, NativeScript, WordPress, and AEM.
Location:
Florida, United States
Joined:
Jun 29, 2020
What's the practical benefit of using <section>?
Publish Date: Aug 22 '24
4 4Comments 4 total
TaliaAug 22, 2024Yeah, 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.
WilliamAug 23, 2024I 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.
Sophie The LionhartAug 23, 2024As 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>?
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.