Headings, structure, 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.

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.

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@​}.