When the semantic element <section> met style cont’d

Introduction

I could have picked up this post right where the story left off—frustrated, unresolved, still chasing answers. No introduction, directly to that same stubborn question, turning it over again with fresh angles, new attempts, maybe inching closer to clarity. Or I could have asked you—yes, you who follow this blog, or you who read one of my last two posts and chose not to leave a comment—for ideas once more. That would’ve been easier to draft, and it might’ve bought me more time to stumble upon something. But maybe there is no elegant solution. Maybe it’s not that you’re withholding your thoughts—it’s that there’s simply nothing to say. And yet, I thought of you, the new reader who lands here first. So let me rewind…

It all began with a seemingly simple question: how do I turn my headings into anchor points for links? I thought I had the answer—just add an id attribute to the <h2> tag (or any other heading) and voilà. Problem solved. Or so I believed. But as I dug deeper, I discovered there was a better way to do so—a recommended way, to be accurate.

Recommended:
<section id="introduction-to-everything">
<h2>Introduction to everything</h2>
...
</section>

This was my first encounter with the <section> element. After months of research—and a 29-minute post that nearly broke me—I finally grasped its power and put it to use. Not just as a semantic wrapper, but as a structural upgrade: anchoring headings, clarifying outlines, and restoring order to the chaos of implicit hierarchy. With <section>, assistive technologies and search engines can identify not only where a content block begins, but—crucially—where it ends. Structure is no longer a guessing game, as illustrated below (visual grouping of sections is simulated using red-dashed borders):

That’s the problem I left unresolved. The <section> element may be semantically elegant, but to the human eye, it’s invisible. It defines boundaries—yes—but only in markup. Visually, it says nothing. And when paragraphs drift ambiguously between nested headings, clarity suffers.

So I looked for a styling solution—one that respects structure, aesthetics, and sanity. Actually, I wasn’t just chasing a solution—I was chasing an elegant solution. And elegance, it seems, was nowhere to be found. Background colors? Too patchwork. Left borders? Too invasive. Typographic cues? Not an option. And as for the suggestions offered by the so-called Artificial Intelligences… let me spare you. I won’t share them here—not out of secrecy, but mercy. I endured them so you don’t have to.

So here I am. The semantic scaffolding is in place. The document outline is pristine. But how do I make it visible—not just parsed by machines—without compromising design, consistency, or clarity?

What is missing?

Let’s tackle the problem from a new angle. Let’s think logically. What does the <section> element actually provide? What does it offer that a heading alone cannot?

Headings alone can only show where a piece of content starts, not where it ends, which makes it difficult to tell what belongs to what.Heydon Pickering

Exactly. That’s the crux of it. The <section> tag doesn’t just mark a beginning—it defines an end. It wraps content in a semantic boundary, making it clear where one block concludes and another begins. In the previous post, every styling attempt focused on the section as a whole—coloring the entire box, outlining it, decorating it. But maybe that’s not the point. Maybe I don’t need to highlight the entire container. Maybe I just need to show where it ends.

Just a visual cue that says: “This is where the section stops.” This could be easily implemented:

section {
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #eee;
}

I was already using this approach—quietly, experimentally—whenever I ran into that recurring structural dilemma. You know the one: I’d wrap up a subsection under an <h3> heading with a final paragraph that clearly belonged there. But then came a twist. I wanted to add one last paragraph—not for the <h3>, but for its parent <h2> section. No new heading. No visual cue. To the human eye, those two paragraphs looked like siblings. And that’s the rub.

To address this, I was indeed using Gutenberg’s separator block—the one with the three dots—as a visual divider. It was a trick, really. A stylistic sleight of hand meant to signal, “Hey, something’s changed.” But it never quite worked. Style aside, the real issue was that I wasn’t satisfied with this trick. First, it wasn’t automatic. I had to manually insert it every time. That could be solved with the CSS snippet above. Second—and this is the real issue—it didn’t help with attribution. The separator hinted at a break, yes, but it didn’t tell the reader, “The next paragraph belongs to a different section.”

So let’s be honest: what does a grey line at the end of each section actually accomplish? It signals the end—the missing part, granted—but it doesn’t inform about what’s next. It just splits the content without offering semantic guidance. No matter how elegant that line may appear, the result is anything but. Worse still, what’s the point of having that line at the end of the post? ¹

Not a solution. A dead end. (Pun unintended.)

Outside of the box

Okay, so I’ve done the whole “think inside the container” thing. That was the last post, right? I tried dressing up the box, giving it some flair, making it say something. Total flop. Then I thought, maybe underscoring the end of the box would do the trick (see above). Nope. So here I am, still staring at the box, still trying to make it behave, still not quite sure what to do.

“So what if I think outside the box? Literally. Outside of the box!”

Let’s be bold. Let’s pretend I’m a developer. Just for this section. I’m not, of course—but let’s imagine I am. Someone who can bend a website to their will like it’s second nature. HTML, CSS, JavaScript—whatever. Nothing’s impossible. The only limit? My imagination.

What if I had a floating… thing? What do you call it? A widget? Something that hovers on the left side of the screen—not a sidebar, mind you. My actual sidebar in Twenty Seventeen is on the right. But on my laptop, with its gloriously wide screen, there’s all this unused white space on both sides. Prime real estate!

Now imagine a little hand with a pointing finger—yes, I hear your groans about my emoji allergy—and next to it, a message like: “This paragraph is part of the section titled ‘[Heading Name]’.” Or something more general, like: “You’re now viewing the ‘[Heading Name]’ section.” Even better, imagine a floating Table of Contents. One that updates as you scroll, highlighting the current section in a different color. Elegant. Informative. Dynamic. The kind of thing I’d love to implement—if I were a real developer, or if I weren’t so plugin-averse.

“Awesome, right?”

Let’s be honest: smartphones have taken over. They’re fast, convenient, and always within reach. Even I, despite my resistance, find myself scrolling more often than I’d like to admit. But when I open my blog on a laptop—because yes, I still do that, and frankly, it’s way better—I see a layout that mobile quietly erases. That left-side white space? Gone. My right sidebar? Gone too ². And unlike the blank space on the left, that one actually serves a purpose. My cherished left and right asides? Compressed into the main content like sardines in a tin. Cruel.

So my high-tech floating solution? Poof. Vanished. Next…