Headings // feature recommendation Public discussion

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

HTML Markup

The editor SHOULD allow to insert three levels of headings, that MUST be represented by the following HTML elements^[1]:

• Heading Level 1 – <h2> element
• Heading Level 2 – <h3> element
• Heading Level 3 – <h4> element

Example:

<h2>Heading 1</h2>
<p>Some text.</p>

Implementation Concerns

• If there is a need to provide more levels of headings, editor MAY allow to insert deeper levels by utilizing <h5> and <h6> elements^[1] with optional aria-level^[2] attribute.
• 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^[1]. Implementer MAY think of naming this level of heading in a more distinguishable way e.g. “Title”.

References

1. The <h1>, <h2>, <h3>, <h4>, <h5>, <h6> elements definition in the HTML5 standard.
2. The description of aria-level attribute in the ARIA 1.1 standard.
3. Creating an outline section in the HTML5 standard.
4. Steve Faulkner, The HTML5 Document Outline.