I have an HTML question I either don't know how to google or nobody has asked before:
I have a web-based editor for a content bank. Users can write HTML descriptions for items, which will be shown on a details page. They might want to use heading tags in their description. What should I do with heading tags so they don't mess up the page navigation when the description is embedded in a page? Shift everything down, so h1 → h3, h2 → h4, ...? Just leave them as they are?

· · Web · 5 · 4 · 1

@christianp I wanted to say <section> with h tags inside, but searching online apparently that never got implemented properly by browsers so probably the shifting down is the best bet

I think the keyword you're after is "document outline"

@mathr thanks! "Document outline" seems to be exaxctly the right phrase to search for


Haven't tested this, but wrapping the embedded content in a web component with shadow DOM enabled might prevent the problem.


Allowing users to add HTML to a web-editor and then inserting that directly into the page is the real hack.

@jcbrand what would you suggest I do otherwise? It's reasonable that they can write formatted text



Then it's probably also easier to generate HTML markup in a way that doesn't break headings.

In the end it depends on the time and energy available to you.

Sometimes a hack is fine if you don't want to spend a lot of time on something.

@jcbrand I'd still have to rewrite the markdown heading levels, wouldn't I?


yeah, but at least markdown places some constraints on what users can do.

I hope you make sure to sanitize the user-created HTML before putting it into the page.


Add a class="userContent" inside every tag inserted by users and manage that with a CSS.

@GustavinoBevilacqua that doesn't affect the document structure given to things like screenreaders


And a parser to warn the user that HTML will be automatically modified (with a warning text before the text field) to fit the tags with the website structure?

So nobody can complain the post doesn't show as typed.

@christianp Curious if you found anything yet. I'd be tempted to explicitly tell the users up front that their headings must start at h3, and reject any descriptions that include h1's or h2's.

@narain at the moment, I'm going with shifting when necessary. So if I need the next level to be h3, and the first heading level in the description is h2, shift everything down 1 step. If the first level is h1, shift everything down 2 steps.

Sign in to participate in the conversation

The social network of the future: No ads, no corporate surveillance, ethical design, and decentralization! Own your data with Mastodon!