The Headings feature allows user to divide the content via inserting headers into it.
UI / UX
- UI: usually represented as a part of “Styles” dropdown or “Styles” menu on a ribbon
- Title: “Heading <x>”, where “<x>” is a natural number indicating the heading’s level
- Keystroke: Ctrl+Shift+<x>, where “<x>” is a natural number indicating the heading’s level
- Additional keyboard behavior:
- Enter at the end of the heading SHOULD create an empty, default block context directly after the heading and move selection position inside the newly created block context.
- Enter at the beginning or inside the heading SHOULD split the heading into two heading block contexts just before the selection position
- Shift+Enter at the beginning or inside the heading SHOULD insert a line break just before the selection position
The editor SHOULD allow to insert three levels of headings, that MUST be represented by the following HTML elements:
- Heading Level 1 –
- Heading Level 2 –
- Heading Level 3 –
- If there is a need to provide more levels of headings, editor MAY allow to insert deeper levels by utilizing
<h6> elements with optional
- In the vast majority of use cases, the content created using the editor would be a part of a page, therefore usage of
<h1> element is highly unrecommended[3, 4]. However if the content of the editor would be presented in an independent form,
<h1> element MAY be used. Implementer MAY think of naming this level of heading in a more distinguishable way e.g. “Title”.
<h6> elements definition in the HTML5 standard.
- The description of
aria-level attribute in the ARIA 1.1 standard.
- Creating an outline section in the HTML5 standard.
- Steve Faulkner, The HTML5 Document Outline.