Best practices for HTML elements in rich text

Last modified: June 1st, 2023

For the purposes of this article, rich text content is any HTML or Markdown content that can be edited in CloudCannon. Custom markup is any HTML or Markdown structure that cannot normally be produced in CloudCannon's WYSIWYG editor (for example, HTML elements like <footer> or data attributes).

If you want to include custom markup in your rich text content, there are some limitations you should be aware of.

HTML that cannot be reconstructed#

We don't recommend custom markup inside rich text content. The rich text editor cannot produce visible and unambiguous representations of any arbitrary markup, and your team might be unable to see the underlying structures. This means you can accidentally delete custom markup without noticing, and you won't be able to restore it without going back to the source code.

Templating code also falls within this category, since it cannot be properly represented, edited, or reconstructed within the editor.

HTML that cannot be rendered#

To prevent cross-site scripting attacks and other unwanted interactions between your code and the editing interface, some HTML elements will not be rendered normally in the rich text editor. These elements will be replaced with boxes, which you can edit around without worrying about the original HTML being altered.

script and style elements replaced with boxes

Some elements with simple text content, like kbd and main, will be included in this process and will become uneditable. These elements typically also fall into the category of HTML that cannot be reconstructed, and should be avoided in rich text content anyway.

Best practices#

The simplest approach is to ensure that all markup in your rich text content can be rendered and edited in CloudCannon. Any markup that can be straightforwardly converted between HTML and Markdown is most likely okay.

If you need custom markup in your rich text content, configure snippets to provide a safe, structured way to edit that content.

Open in a new tab