Headings, hierarchy, and content formatting

Content structure and semantic formatting help your audience and search engines understand your content on a webpage or other channels. They improve:

Readability and navigation for users of your website or app
Excitement and motivation of the users as they grab the attention, focus the users on what’s relevant and keep them engaged
Search engine rankings and search relevancy from the SEO perspective
Accessibility as screen readers rely on formatting and structure to navigate content

As usual with headless, you can choose between the default built-in functionality, configure a custom option, or combine both approaches to achieve your desired outcome.

Approach A: Built-in rich text formatting

Kontent.ai provides a built-in rich text element with its toolbar. You can use it to set headings, highlight text, and more.

Pros	Cons
Built-in feature with easy setup Straightforward for content creators Usable for both block and inline formatting Usable within tables Formatting restrictions configurable using element limitations	A limited set of formatting options Your front-end app gets rich text content with hardcoded tags, such as heading levels, which can’t be easily changed

Approach B: Formatting content types

Another approach is to create a reusable content type for headings or other block formatting, like the callout boxes you see in this article. Content creators then use components or linked items in the built-in rich text editor to create the desired structure and semantics. You have two options on how to implement this approach:

Create a dedicated content type for each formatting option.
Create one content type with a taxonomy (or a multiple choice element if you don’t need to filter it in the content inventory) and let content creators select the specific type of formatting.

For example, headings can have one content type and a taxonomy with the terms large, medium, and small. Then, on your front end, you can decide how these sizes actually render.

This can come in handy when you have a more complex nesting scenario. For example, an item may use the H1 heading when used standalone but needs to switch to H2 when nested under another H1.

Pros	Cons
Easy dynamic front-end resolution (for example, a heading can be H2 in one channel and H3 in another) Usable for any block formatting options you define Reusable across content items Formatting restrictions configurable by white-listing component types per rich text element	Usable only for block formatting Unavailable in built-in tables Less comfortable for content creators

Approach C: Custom formatting markup

You can create a special syntax for both inline and block formatting that your front end will render based on your rules. For example, we use this approach here at Kontent.ai Learn for icons. To display an icon, such as

, we write {‎@icon-cogwheel@}.

Pros	Cons
You can define any formatting options Dynamic front-end resolution possibility (yet complex) Usable for both block and inline formatting in the native rich text editor Usable in built-in tables	The front end needs to transform rich texts to resolve the markup, which adds development complexity Restrictions available only via potentially cumbersome regular expressions Unpleasant for non-technical content creators Requires knowledge or very good guidelines to be used well

Headings, hierarchy, and content formatting

Headings, hierarchy, and content formatting

Approach A: Built-in rich text formatting

Approach B: Formatting content types

Approach C: Custom formatting markup

Approach A: Built-in rich text formatting

Approach B: Formatting content types

Approach C: Custom formatting markup

Why is this important?

Available solutions with Kontent.ai