---
category: features
menu-title: Document title
---
# Document title
The {@link module:heading/title~Title} feature enables support for adding the title field to your document. It helps ensure that there will always be a single title field at the beginning of the document.
This feature can be used to implement a rich-text editor with a clear division of content into the title and body sections, similar to solutions available in Medium, Grammarly, Slack post editor or some content management systems.
## Demo
Use the editor to create a document with clearly separated title and body sections. You can check the content of the title and body elements in the console below.
{@snippet features/title}
## Related features
There are more CKEditor 5 features that can help you structure your document better:
* {@link features/headings Headings} – Divide your content into sections.
* {@link features/indent Block indentation} – Organize your content into visually separated blocks, indent crucial paragraphs, etc.
* {@link features/editor-placeholder Editor placeholder} – 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.
## 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.
## Placeholder integration
The title plugin is integrated with the {@link features/editor-placeholder placeholder} configuration. If you define it, the placeholder text will be used for the body element.
To change the title placeholder, use the {@link module:heading/title~TitleConfig#placeholder `title.placeholder`} configuration option. For instance:
```js
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Title, ... ],
title: {
placeholder: 'My custom placeholder for the title'
},
placeholder: 'My custom placeholder for the body'
} )
.then( ... )
.catch( ... );
```
## Installation
To add this feature to your editor, install the [`@ckeditor/ckeditor5-heading`](https://www.npmjs.com/package/@ckeditor/ckeditor5-heading) package:
```plaintext
npm install --save @ckeditor/ckeditor5-heading
```
Then add the `Title` plugin to your plugin list:
```js
import Title from '@ckeditor/ckeditor5-heading/src/title';
ClassicEditor
.create( document.querySelector( '#editor' ), {
plugins: [ Title, ... ]
} )
.then( ... )
.catch( ... );
```