Add a section title for Interactive Examples

[dipikabh]

• Current Behavior
• Problem with Current Behavior
• Motivation for the Proposed Change
• Concerns after Implementation

Current Behavior

'Interactive Example' at the top of a reference page currently lacks a section heading. This means that readers cannot easily navigate back to this section using the sidebar navigation on the right.

For example, on this page, the "CSS demo: width" interactive example does not have a section heading.

When in another section on the same page, the only way readers can navigate back to the interactive example is by scrolling to the top of the page.

Problem with Current Behavior

There is no flaw in the current functionality. Being at the top of the page provides a nice hook for readers to know how to reach interactive examples quickly.

Motivation for the Proposed Change

Interactive examples are an important offering on the reference pages on MDN Web Docs, and they should be highlighted and called out (in the sidebar navigation).

If interactive examples are put under a section heading:

• the section heading will appear in the sidebar navigation on the right. Right now, a place for interactive example in the TOC is missing.
• the section heading in the sidebar navigation will enable navigation back to the interactive example by a single click instead of having to scroll to the top.
• the section heading in the sidebar navigation will also help to distinguish from pages that do not have interactive examples - a very subtle cue for readers from the TOC about what to expect on a page.

So that there is consistency maintained across all pages where they appear, perhaps the section heading could be named "Interactive Examples", in line with other such section headings like Syntax and Specifications.

Concerns After Implementation

If there are reference pages without an opening paragraph, the proposed "Interactive Examples" section heading will sit too close to the reference page title.

[schalkneethling]

Here is the issue for implementation: #5561

[wbamberg]

Maybe consider "Interactive example" for the heading since there is only one, and we usually use sentence case for headings? Or even "Demo" or "Live demo"? (but I think I like "Interactive example" better)