• Cheat sheets
  • Documentation
  • API reference
  • Product updates
  • Sign in
Kontent.ai Learn
  • Try Kontent.ai
  • Plan
  • Set up
  • Model
  • Develop
  • Create
Copyright © 2024 Kontent.ai. All rights reserved.
  • Web
  • Privacy policy
  • Cookies policy
  • Consent settings
  • Security
  • GDPR
  • Overview
  • Intro to content modeling
  • Creator’s role in content modeling
  • Before you model content
  • Create your first content model
  • Content modeling accelerators 🚀
  • Master content modeling
  • Master modular content
  • Master taxonomies
  • Master metadata
  • Get inspiration from others
    • “Missing” CMS features
    • Content formatting
    • Curated content
    • Link authors to articles
    • Forms
    • Streamline information
    • Displaying locations
    • Social media posts in articles
    • Code samples in articles
    • Bulk publishing with taxonomies
    • App configuration
  • Maintain your model
  • Content modeling checklist

Format content semantically, not visually

Boris Pocatko, Tomas Nosek
4 minutes
Taxonomy
Download PDF
0% complete
Separating form and content is difficult if editors are used to having control over both. Try incorporating a taxonomy to help them shape the look and feel of the content. This way, you don’t need to allow too many disruptive changes, yet enable authors to choose what they need.
The usual mistake is to push visual settings into semantic content types. For example, if you have an Article content type, do not model content types such as Block Image-Left and Block Image-Right to be used as components. When you display it via another channel (or even the responsive design), left and right will lose their meanings.

Use semantics for formatting

Instead, semantically, think about what the alignment means. Create a Block Image type and either decide on your front end what happens with the attached image or add a meaningful taxonomy group to the Article content type directly to determine the order. For example, include a taxonomy called Voice & Tone, which can have options such as Playful, Professional, or Inspiring. Selecting an option will then render a different appearance on the front end.
You can go even further with the design differences. For example, the Professional option would create a layout of a list view, while choosing Playful would display the content with a big hero image at the top. In all cases, content creators choose the semantics while the front end chooses the appropriate appearance.

Other channels benefit from semantics too

The same taxonomy is still valid for responsive design and can be later reused in other channels to adjust the actual tone of your assistant. Imagine the need to create a home assistant chatbot or an automated hotline later. You can adjust how the robot says the content with voice and tone settings. You can’t achieve that with left and right alignment.

How others do it

Google uses advanced content models on their Think with Google website. They reuse interesting facts, graphics, charts, and other shareable information across articles. Not only is it highly reusable, but it’s also easy to add CTAs to that content. In the following example, they allow you to share or download the given piece of content.

Sign in with your Kontent.ai credentials or sign up for free to unlock the full lesson, track your progress, and access exclusive expert insights and tips!
Sign in
  • Use semantics for formatting
  • Other channels benefit from semantics too
  • How others do it