Headings, structure, and content formatting

Tomas Nosek, Carlo Vinci
4 minutes
Content items / Components / Rich text (formatting)
Clear content structure and formatting enhance readability, improve navigation, and boost SEO performance. When setting up your Kontent.ai project, decide on the right approach based on your business requirements.

Why is this important?

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

Available solutions with Kontent.ai

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.
If you integrated a 3rd-party rich text editor, you need to address the structure within the integrated tool.

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