🏠 back to Observable

Set title with any level header

Are there any reason not to use any level header for notebook titles? As described in this topic only level 1 header changes the title now.

Hi Anatoli, can you describe what you’re trying to achieve?

Currently, you can set custom URLs and custom thumbnails, and you can style the h1 tag however you’d like (as described in that thread you linked to) — but the <h1> is the only way to set the notebook title.

I didn’t work here when that decision was made; I imagine the reason was the simplicity of matching the notebook metadata to the semantics of the HTML in the notebook. (If it could be based on <h2> tags, I imagine more ambiguity about which tag corresponds to the title, or more steps in the publishing workflow.) It has worked well for me, but of course there are cases it doesn’t cover, so let me know what you’re going for!

I don’t like the default overcapitalization of <h1> tag, therefore I use less screaming headers. I thought that the first title found is used. But recently discovered that my notebooks are Untitled because of that.

Ah, so like it’s too big? You can make the <h1> any size you’d like; e.g., <h1 style="font-size: 1.5em;">My Chart Title</h1> makes it the same size as our standard <h2>, with the advantage of being semantically clearer about being the topmost title.

If you want to do this on all your notebooks, you could make a style cell that you import into every notebook, like:

style = html`<style>
h1 {
  font-size: 1.5em;
}
</style>`

If the url of that is @abitrolly/style, you can import it like:

import {style} from "@abitrolly/style"

And then apply the styles by rendering style in a new cell:

style

(It’d be nice if you could make your default new notebook include that, which is something we sometimes talk about, but for now it’s a couple manual steps each time.)