DEV Community

loading...
Cover image for How to validate your headings in Ghost 🚩

How to validate your headings in Ghost 🚩

Benjamin Rancourt
A passionate Technology Analyst from Sherbrooke (Quebec) 🍁, who love almost everything about web development 🌐.
Originally published at benjaminrancourt.ca on ・2 min read

While reviewing one of my last posts, I struggled a bit with its headings. This is easy when the posts have only two levels of headings, h2 and h3, but if you want to go deeper, you have to rely on the heading shortcut (Ctrl + H) to switch from h2 to h6.

Have I clicked enough on the shortcut? Should I do it again? It can be difficult to see in preview mode if you have the correct headings. The titles can be really spaced from one to the other. Or the styles of the headings could be quite similar to each other, like in the default Casper theme (at least in the version that I currently have). 👻

Let's check an example where all the headings are side by side.

An example of headings, from h1 to h6.

Yeah, the h3 and h4 are pretty much the same and I would even say that h4 looks bigger than h3! 😮 The only way to check if the semantic is correct is to look directly at the source code. Not very practical, right?

Fortunately, for people like me who use Ghost as a backend , CSS can offers a pretty straightforward solution to make sure you have structured your headings correctly. Simply paste the following code in your SettingsCode injection section, and you are good to go!

<style>
  h1::before { content: "h1. "; color: blue; }
  h2::before { content: "h2. "; color: blue; }
  h3::before { content: "h3. "; color: blue; }
  h4::before { content: "h4. "; color: blue; }
  h5::before { content: "h5. "; color: blue; }
  h6::before { content: "h6. "; color: blue; }
</style>
Enter fullscreen mode Exit fullscreen mode
The magical code to easily check your headings.

So, the previous code will add the corresponding HTML tag to all headings and let you check if you need to enable the heading shortcut once more. 😉

The end result, where each heading is preceded by its HTML tag.

And yeah, another solution could be to just write my posts directly in Markdown , where the headings could not be more self-explanatory. 😋

## Title 2
### Title 3
#### Title 4
##### Title 5
###### Title 6
Enter fullscreen mode Exit fullscreen mode
Example of headings in Markdown.

Discussion (0)