Rich Text

What is rich text?

Rich text is text that carries formatting along with the characters: bold, italics, headings, lists, links, colors and sometimes images or tables. Plain text holds only characters. Rich text needs a format to store the formatting, most often HTML on the web, or Rich Text Format (RTF) in word processors. Editors that let you write it visually are called rich text editors or WYSIWYG editors.

How rich text works

Behind the toolbar, a rich text editor stores your formatting as markup or as a structured document. On the web, the browser can make an element editable with the contenteditable attribute. According to MDN, the value true keeps rich formatting on paste, while plaintext-only strips it. Most production editors build their own document model on top of this and then export HTML.

Once stored as HTML, the text becomes part of the page structure, which browsers expose as the DOM. In a CMS, a rich text field is often one content block among others.

Example

A blog editor offers bold, a heading menu, a link button and bullet lists. An author writes a heading, one bold sentence and a list. The editor saves <h2>, <strong> and <ul><li> elements. A screen reader can then announce the heading and list correctly. If the author had instead made a line big and bold with font settings, it would look the same but carry no heading meaning.

Common mistakes

• Fake headings: large bold text instead of a real heading level, which removes navigation for screen reader users.
• Pasting from Word or the web: pulls in inline styles and stray markup. Paste as plain text or clean the HTML on save.
• Saving unsanitized HTML: user-written rich text must be sanitized on the server, or it can carry scripts (cross-site scripting).
• Too many styles: several fonts, colors and sizes make content look inconsistent. Limit the toolbar to what the design system allows.
• Color or underline as the only signal: underlined text that is not a link confuses people, and red text alone does not convey a warning.

Rich text, accessibility and testing

Formatting should carry meaning that assistive technology can read: real headings, real lists, descriptive link text and alt text on images (see accessible images and WCAG). Check text contrast too, covered in accessible color palettes. Our guide to website accessibility testing tools lists ways to check rendered content, and page speed monitoring tracks the Lighthouse accessibility score of the pages that show your rich text, so a template change that breaks heading structure or contrast is easier to notice.

FAQ

What is the difference between rich text and plain text?

Plain text holds only characters. Rich text adds formatting such as bold, headings, lists and links, stored in a format like HTML or RTF.

Is HTML rich text?

HTML is a markup format that rich text editors commonly use to store formatting. The rich text is what the reader sees. HTML is how it is written down.

Is Markdown rich text?

Not by itself. Markdown is plain text with simple markers that a renderer turns into formatted output, usually HTML.

What is a WYSIWYG editor?

A WYSIWYG ("what you see is what you get") editor shows formatting as you type, instead of showing markup. Rich text editors are usually WYSIWYG.

Is it safe to accept rich text from users?

Only if you sanitize it on the server and allow a fixed list of tags and attributes. Never trust the HTML a browser editor sends.