Previously on the CogitActive Saga:
Well, that’s the problem—I don’t really have a next. Not a solid one, anyway. I do have something in mind, but it’s far from perfect. And let’s be honest, my dear followers: you haven’t exactly flooded me with brilliant ideas either. So if you’ve got a magic trick up your sleeve, I’m all ears.
Introduction
That was how I left things last time, with another “To be continued…”. A cliffhanger, of sorts. Not the dramatic kind with explosions or plot twists—but the frustrating kind. The kind born not of narrative design, but of creative depletion. I had chased every lead, tested every styling trick (I could think of), and reasoned through every suggestion (from Copilot)—until there was nothing left to try. No breakthrough. No elegant fix. Just a lingering problem and a faint hope that someone—anyone—might offer a spark. You didn’t.
For those just joining the story, here’s the gist: I’ve built a semantically sound structure using the <section> element. It’s clean, logical, and machine-readable. But for sighted readers? It’s invisible. And that’s the problem. When paragraphs drift between nested headings, the visual hierarchy collapses. What belongs to what becomes a guessing game. To illustrate this, here’s a simplified example:
This paragraph belongs to heading level 1.
This paragraph belongs to heading level 2.
This paragraph belongs to heading level 2.
This paragraph belongs to heading level 1, not level 2!
To the human eye, that final paragraph looks like it belongs to the second heading level. But it doesn’t. And that subtle misalignment is exactly what I’ve been trying to fix.
In my previous posts, I documented my attempts to solve this—styling tricks, layout experiments, even a few AI-generated suggestions. I tried borders, backgrounds, typography, icons, separators, and more. Each idea had potential, but none delivered the clarity I was after. Desperate and out of ideas, I turned to my readers. I wrote a letter. Not metaphorically—a real one. Addressed to you, dear readers. I laid out the problem, the failed attempts, the mounting frustration. I didn’t ask for code. I asked for ideas. Concepts. Visual strategies. Anything that might help me bridge the gap between semantic structure and visual clarity. And what did I get in return?
No replies. No comments. Not even a carrier pigeon.
So here I am—still staring at the same dilemma, still trying to bridge the gap between semantic clarity and visual comprehension. Still searching. Still unwilling to give up entirely. Not willing to accept a hard truth: maybe the elegant solution I was chasing doesn’t exist. And yet, maybe it’s time to stop searching for perfection and start salvaging what almost worked.
And as I sift through the rubble of failed solutions, one idea keeps resurfacing. One that I dismissed early on—not because it lacked merit, but because it came with two caveats. But maybe those problems can be solved. Maybe it’s time to revisit the idea I abandoned from the very beginning (in the intro of the first post, actually)—and see if it can be rescued. Which brings me back to indentation.
The indentation idea—and its two fatal flaws
I considered it early on—back when the <section> element still felt like a promising frontier. It seemed intuitive: deeper hierarchy, deeper indent. A visual cue that mirrors the semantic structure. But as I quickly discovered, the simplicity of the concept belied two major caveats. And those caveats weren’t just minor inconveniences—they were deal-breakers. Let’s revisit them.
Before we dive into the topic, let’s clear up a common misunderstanding. When I searched for “indentation” in the context of web design, I wasn’t flooded with solutions—I was flooded with irrelevance. Not only did I find no resources about indenting sections (which, let’s be honest, almost nobody uses the way I do—without role="region" 1), but nearly every result focused on something else entirely: indenting the first line of a paragraph. You know the look—classic book formatting:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus. Suspendisse lectus tortor, dignissim sit amet, adipiscing nec, ultricies sed, dolor. Cras elementum ultrices diam. Maecenas ligula massa, varius a, semper congue, euismod non, mi.
Proin porttitor, orci nec nonummy molestie, enim est eleifend mi, non fermentum diam nisl sit amet erat. Duis semper. Duis arcu massa, scelerisque vitae, consequat in, pretium a, enim. Pellentesque congue. Ut in risus volutpat libero pharetra tempor.
It’s elegant, sure. That kind of indentation has its place—in print. But online? The consensus is clear: don’t do it. Instead, use spacing between paragraphs to signal separation. It’s cleaner, more readable, and better suited to digital layouts. And yet, if you search beyond the “don’t do it” crowd—into forums, Stack Exchange threads, or blog posts that aren’t just preaching against it—you’ll find a different kind of obsession: how to make it work 2.
But let me be crystal clear: that’s not the kind of indentation I’m talking about. I’m not trying to style paragraphs like a novel. I’m trying to reflect the structure. To make the hierarchy visible. To help readers understand which heading a paragraph belongs to, not where it begins. So no, this post will not be about text-indent.
Caveat #1: the indentation spiral
At first glance, indentation seems like a clean, intuitive way to reflect hierarchy. The deeper the heading level, the deeper the indent. Simple, right? Until it isn’t.
We only have a limited space on the screen, and we can not continue to indent sections indefinitely.Jacob Kristensen (Turbulentarius)
With five theoretical levels of headings—from <h2> to <h6>—indentation can quickly spiral out of control. What starts as a subtle nudge to the right becomes a full-blown layout crisis. Valuable screen space on the left vanishes, and paragraphs become awkwardly narrow. A staircase of content that looks more like a squeezed accordion than a structured layout. What was meant to clarify ends up distorting.
On a desktop, it’s annoying. On smartphones, it’s unforgivable.
Let’s face it: the age of wide screens and generous margins is fading. I might not be the last person reading blogs on a laptop—but it’s starting to feel that way. The war for attention has moved to smaller battlegrounds. The desktop days are over. And here I stand, like a relic from another era—I am the last of my kind—trying to make indentation work in a world ruled by thumbs and swipes.
“So yes, the spiral is real. But is it fatal? Maybe not. After all, not every spiral has to end in disaster.”
Yes, deep indentation can wreak havoc on small screens—but maybe it doesn’t have to. Maybe the solution isn’t to abandon indentation entirely, but to tame it. To constrain it. To make it responsive. What if the depth of each indent scaled with screen size? Or capped at a certain threshold? Or faded progressively, rather than stacking like bricks?
I’m not saying it’s easy. I’m not even saying it’ll work. But if we can soften the spiral—bend it back into something usable—then maybe indentation isn’t a lost cause after all.
Caveat #2: the compass-in-the-eye problem
Indentation only works if the reader can decode it. And once the hierarchy gets deep—or worse, starts jumping levels—indentation becomes a guessing game (again). The visual cue loses its meaning, and the structure collapses into ambiguity.
Let’s assume the top of the post resembles a neat staircase of nested content. So far, so good. Each heading level nudges the content slightly to the right, forming a clear visual hierarchy. But what happens when the structure shifts? Imagine you’re deep in a section—say, at heading level <h6>—and suddenly, a paragraph appears that belongs to <h4>. No new heading. No visual cue. Just a paragraph, sitting quietly in the flow. How is the reader supposed to know it belongs to <h4> and not <h5> or <h3>?
Well, in theory, it’s not that hard. A quick scroll up or down, a glance at the indentation alignment, and voilà—the paragraph lines up with its rightful heading. A minor caveat, really. Except I was already jumping ahead. Already trying to fix Caveat #1—the dreaded indentation spiral. And that’s when things got messy. To preserve screen space, I thought of introducing progressive increments: smaller indent steps as the depth increased. <h3> shifted by 2em, <h4> by 1.5em, <h5> by 1em, and so on.
But that trick came with a cost. The neat staircase? Warped. Suddenly, the steps weren’t evenly spaced. The visual rhythm broke. And now, to decode the structure, readers would need something more than intuition. They’d need a ruler. Or better yet… A precision instrument built into the brain. A compass in the eye—as we say in French, le compas dans l’œil.
“So yes, Caveat #2 is real. But only because I made it real—by trying to outsmart Caveat #1.”
If the indentation is clear and stable—if the staircase is well-defined—then even without a compass, most readers can follow the steps. Especially when moving back to a top-level heading like <h2>, where the indent disappears entirely. The shift is obvious. The hierarchy is readable.
Equal steps. Predictable rhythm. A staircase that actually looks like a staircase.
Which, of course, brings us right back to Caveat #1.
So here it is, standing awkwardly in the flow, trying to make a point:
- Caveat #1 says: don’t indent too much, or you’ll ruin the layout.
- Caveat #2 says: don’t indent too little, or readers won’t understand the structure.
Fix one, and you trigger the other. Caveat #1 creates Caveat #2. Caveat #2 can be fixed—but that recreates Caveat #1. A classic Catch-22.
Unless, of course, you strike the right balance. A sweet spot where indentation is deep enough to signal hierarchy, but shallow enough to preserve readability. That balance only works if heading levels stay within reason. And here’s the good news: nearly every guide on accessible web design and content structure recommends keeping things shallow—don’t go beyond <h3>. Maybe <h4> at most. Even in my sprawling, labyrinthine posts, I rarely venture deeper. Not because I’m disciplined, but because going further simply doesn’t help the reader. It muddies the structure and complicates the layout.
Avoid level 5 and deeper heading levels. Try to use only 3 or 4 heading levels at the most. A simpler structure is easier to read. You can use deeper heading levels (level 4 and below) for very complex documents, but try to avoid it. Deep and complex hierarchies of headings are a sign that you are probably trying to do too much on a webpage or in a chapter. It is likely that you will lose the reader.Australian Government Style Manual
So if I keep the indentation stable and the heading levels shallow, Caveat #2 fades into the background, and so does Caveat #1. Sort of 3.
That’s the challenge. That’s the goal.
Implementing indentation
There’s still a long road ahead. Many decisions to make. But I’m not chasing perfection anymore—I’m building something that works. Let’s begin.
A third caveat
If deep indentation punishes readability, maybe the answer is to skip it for top-level sections. After all, <h2> headings are the anchors of the post. Why waste precious space nudging them to the right? Starting indentation at <h3> would preserve the visual dominance of <h2> as a top-level heading and, more importantly, avoid cluttering the layout with unnecessary shifts. It was looking like a smart compromise—until…
The realization hit while drafting my pseudo-conclusion at the end of the post before the previous one. That final paragraph wasn’t part of the preceding <h2> section. It was a standalone conclusion. But even if indentation had already been implemented, that paragraph—sitting flush with the left margin, no indent, no heading, no separator—looked like it belonged. The structure collapsed not from lack of styling, but from a styling exception. By keeping <h2> content flush with the left margin, I had created a new ambiguity.
Of course, there were ways to avoid the ambiguity. As I alluded to in that earlier post—the one where the realization struck—a simple separator would have done the job. A horizontal line. A visual break. Anything to signal that the final paragraph wasn’t part of the section above. I didn’t use one. Not because I forgot, but because I wanted to make a point. I was still chasing that elusive, dazzling solution—something more elegant than a line or an indent.
That’s when another idea surfaced. A workaround and a potential Caveat #4. What if I only indented the content under each heading—not the heading itself? That way, the visual hierarchy would still emerge, but the top-level headings would remain flush with the margin, preserving their dominance. Admittedly, it’s not a fix for Caveat #1. And yes, it’s a bit odd. I’ve seen it in some scientific books, where the headings float like labels and the content shifts inward. But it’s not common. And it’s not elegant. I did hesitate about adopting it, but in the end, I rejected it.
But the best approach—the “do the right thing” one—would have been to wrap that paragraph in its own section. Give it a heading. “Conclusion,” maybe. Or something more creative. Something that says: this stands alone. I didn’t do that either. It wasn’t quite a conclusion, and again, I wanted to make my point. But that’s the irony: the very act of skipping structure to highlight a structural problem.
“So no, Caveat #3 isn’t real. The fix? Just with structure. Honest, semantic structure.”
Targeting the hierarchy
With the decision to use indentation made, and to start it only at <h3> (and for the entire section), the next challenge was implementation, beginning with the targeting. How do you apply indentation selectively, based on depth? How do you reflect the semantic hierarchy in CSS without cluttering your markup or overcomplicating your selectors? The answer, as it turns out, was already baked into the structure.
Some might suggest using classes (Copilot did during our conversations—though it also suggested emojis, so…). Assign a class to each section—.level-1, .level-2, .level-3, and so on—and style accordingly. According to Copliot, it’s explicit, flexible, and widely used. But I didn’t like it. It requires manual tagging, increases the risk of errors, and given the extra effort I already put into implementing <section>, it could have been the straw that broke the camel’s back.
It didn’t take long to find a simpler approach. Smarter. Semantic. Just use descendant selectors: section section for level two (i.e., my <h3>), section section section for level three (i.e., <h4>), and so on. No classes to add when encoding my post. No extra markup. Just pure structure. It’s clean, scalable, and perfectly aligned with the way the document is built.
section section {
}
section section section {
}
section section section section {
}
section section section section section {
}Which CSS property?
With the selector ready, the next step seemed obvious: apply the indentation — a simple matter of picking the right CSS property and moving on. In my earlier conversations about styling the <section> element with both Copilot and Gemini, the verdict had been unanimous: padding-left. But, as I’ve already alluded to above, I don’t take their word as gospel. So I decided to double‑check before committing, certain this was just a formality before the real work resumed.
Naturally, I found nothing about my particular <section> use case — not a single authoritative example — yet every forum thread I stumbled across about indenting whole paragraphs (not just the first line) was using margin-left. Odd. Why? I put the question to both AIs again. And again. Each time, they confidently assured me that padding-left was the correct choice… until I asked, “Are you sure?” At which point they would inevitably launch into their new‑model routine — apologising profusely, claiming to “finally understand fully,” and then flipping their answer completely. And don’t get me started on their “why it works!” explanations. That one gets on my nerves so much that I now find myself starting the next prompt with, “Why it does NOT work…”
So, padding‑left or margin‑left? Two properties that, at first glance, seem to do the same thing… until you realize they don’t. And that, dear reader, is where I’ll leave you hanging — because this question turned out to be anything but trivial, and it deserves a post of its own.
To be continued (after the “padding‑left vs. margin‑left” post interruption)…
1 There’s a persistent fog surrounding the <section> element—mostly because it suffers from a dual identity. One semantic: when used as a landmark (i.e., with role="region"). One structural: when used to organize content meaningfully. If you want the full story, I invite you to read my deep dive into the <section> element—a 29-minute read for you, a multi-month research marathon for me. TL;DR: I don’t use <section> to create landmarks. I use it to structure content semantically, wrap headings with meaningful IDs, and make the document’s hierarchy clear (at least for machines). ^
2 Turns out, many CMS platforms and WYSIWYG editors tend to strip out that subtle first-line indent, leaving frustrated users scrambling for solutions. Of course, if you hand-code your posts in HTML—like I do—you already know the answer: text-indent. That’s the tool. That’s the trick. And that’s exactly what this post is not about. ^
3 While searching for a solution, I browsed hundreds of sites—never mind the thousands I’ve read before that. Not a single one used indentation. Oh, the precious space! And remember, I’m using a laptop, not a smartphone. So if the price of making my content accessible to sighted readers is to go against the flow, I’m ready to pay it. ^