---
title: "About Block and Inline Elements"
description: "Learn the difference between block and inline elements in Contentstack's JSON RTE to create structured, well-formatted content easily."
url: "https://www.contentstack.com/docs/headless-cms/about-block-and-inline-elements"
product: "Contentstack"
doc_type: "guide"
audience:
  - developers
  - admins
version: "current"
last_updated: "2026-07-22"
---

# About Block and Inline Elements

In the [JSON Rich Text Editor](/docs/headless-cms/about-json-rich-text-editor) (RTE), content is organized into **block elements** and **inline elements**. Understanding the distinction between these two types of elements is essential for content managers to create structured and well-formatted content.

This guide will walk you through what block and inline elements are, how they function, and when to use them, ensuring a smooth content authoring experience.

## Block Elements

Block elements are used to structure the content into **meaningful sections** or **blocks**. These elements typically occupy the full width of the container they are placed in and are used to organize larger sections of content.

### Characteristics of Block Elements

*   Start on a **new line**.
*   Take up the **entire width** of the content area.
*   Contain other block elements or multiple inline elements inside them.
*   Commonly used for layout organization (e.g., paragraphs, lists, images).

### Examples of Block Elements

1.  **Paragraphs** (<p>): Used for normal text blocks.
2.  **Headings** (<h1>, <h2>, etc.): Represent section titles.
3.  **Lists** (<ul>, <ol>): Create ordered and unordered lists.
4.  **Blockquotes** (<blockquote>): Used for long quotes.
5.  **Images or Media Embeds**: Placed as standalone content sections.

### JSON Example of a Block Element

```
{  "type": "paragraph",  "children": [    { "text": "This is a paragraph inside a block element." }  ]}
```

## Inline Elements

Inline elements are used to format content **within block elements**. Unlike block elements, inline elements only occupy as much space as their content requires. They are placed **within the flow of text**, allowing content authors to apply styling and enhancements to parts of a sentence or paragraph.

### Characteristics of Inline Elements

*   Appear **inside block elements** (like a paragraph or list).
*   Do not start on a new line; they flow with the text.
*   Typically used for **styling** or **special formatting** (like bold or links).
*   Cannot contain block elements inside them.

### Examples of Inline Elements

1.  **Bold Text** (<strong>): Highlights important content.
2.  **Italic Text** (<em>): Emphasizes specific words.
3.  **Hyperlinks** (<a>): Embeds links within text.
4.  **Code** (<code>): Formats inline code snippets.

### JSON Example of an Inline Element

```
{  "type": "text",  "marks": ["bold"],  "text": "This text is bold."}
```

## When to Use Block and Inline Elements

*   **Block Elements**: Use these elements to structure content into logical sections like headings, paragraphs, lists, or quotes.
*   **Inline Elements**: Use these elements to format specific words or phrases within a block element, such as applying bold to highlight important text or adding links.

## Working with Block and Inline Elements in JSON RTE

Content authors can create rich content by combining block and inline elements. For example, you can insert a bolded word inside a paragraph or create a heading followed by a list. These elements work together to provide structure and formatting flexibility within your content.

Here’s a **nested example** demonstrating both block and inline elements:

```
{  "type": "paragraph",  "children": [    {      "text": "This is a ",      "marks": []    },    {      "text": "bold",      "marks": ["bold"]    },    {      "text": " word within a paragraph block.",      "marks": []    }  ]}
```

Understanding block and inline elements will help you create well-structured and visually appealing content. Use **block elements** to organize content into meaningful sections and **inline elements** to format specific words or phrases within those sections.

For more details, explore our [API reference on GitHub](https://github.com/contentstack/rte-plugin-boilerplate/blob/main/docs/api-reference.md) to understand how these elements work behind the scenes.