# Document title

The title feature lets you add a single title field at the beginning of your document. This way you can clearly divide your content into the title and body sections.

<a id="demo">

## Demo

Use the editor below to create a document with distinct title and body sections. You can check the content of the title and body elements in the console below.

<!-- AI-AGENT-NOTE: An interactive demo is embedded here but is not represented in this Markdown file. If you need to see it in action, open this page in a browser (e.g. via a browser-automation MCP like Chrome DevTools or Playwright), or let the user know a live demo is available on this page. -->

This demo presents a limited set of features. Visit the [feature-rich editor example](../examples/builds-custom/full-featured-editor.md) to see more in action.

<a id="keyboard-navigation">

## Keyboard navigation

The title plugin lets you move from the title to the body element using the `Tab` key, providing form-like experience. When the selection is at the beginning of the first body element, you can go back to the title element using `Shift`+`Tab`. You can also use `Enter` and `Backspace` keys to move the caret between the title and the body.

<a id="installation">

## Installation

After [installing the editor](../getting-started/installation/cloud/quick-start.md), add the feature to your plugin list and toolbar configuration:

**NPM**

```js
import { ClassicEditor, Title } from 'ckeditor5';

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>', // Or 'GPL'.
		plugins: [ Title, /* ... */ ]
		title: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

**CDN**

```js
const { ClassicEditor, Title } = CKEDITOR;

ClassicEditor
	.create( {
		licenseKey: '<YOUR_LICENSE_KEY>',
		plugins: [ Title, /* ... */ ]
		title: {
			// Configuration.
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="placeholder-integration">

## Placeholder integration

The title plugin is integrated with the [placeholder](editor-placeholder.md) configuration. If you define it, the placeholder text will be used for the body element.

To change the title placeholder, use the [`title.placeholder`](../api/module_heading_title-HeadingTitleConfig.md#member-placeholder) configuration option. For instance:

```js
ClassicEditor
	.create( {
		// ... Other configuration options ...
		title: {
			placeholder: 'My custom placeholder for the title'
		},
		root: {
			placeholder: 'My custom placeholder for the body'
		}
	} )
	.then( /* ... */ )
	.catch( /* ... */ );
```

<a id="html-structure">

## HTML structure

When you call [`editor.getData()`](../api/module_core_editor_editor-Editor.md#function-getData), the document title will be represented as the following HTML:

```html
<h1>Feasibility Study</h1>
```

<a id="model-representation">

### Model representation

In the CKEditor 5 data model the document title is represented as follows:

```html
<title>
	<title-content>
		Feasibility Study
	</title-content>
</title>
```

> **Note**
>
> We recommend using the official [CKEditor 5 inspector](../framework/development-tools/inspector.md) for development and debugging. It will give you tons of useful information about the state of the editor such as internal data structures, selection, commands, and many more.

<a id="known-issues">

## Known issues

The feature is not compatible with the [pagination](pagination/pagination.md) feature.

<a id="related-features">

## Related features

CKEditor 5 has more features that can help you structure your document better:

* [Headings](headings.md) – Divide your content into sections.
* [Block indentation](indent.md) – Organize your content into visually separated blocks, indent crucial paragraphs, etc.
* [Editor placeholder](editor-placeholder.md) – Set placeholder text to display when the content is empty. It helps users locate the editor in the application and prompts to input the content.

<a id="contribute">

## Contribute

The source code of the feature is available on GitHub at <https://github.com/ckeditor/ckeditor5/tree/master/packages/ckeditor5-heading>.

---

Full index of the CKEditor 5 documentation: [llms.txt](../../llms.txt)