Change Heading Levels

A SurveyJS form or survey is rendered using standard HTML elements: <form>, <div>, <span>, <input>, etc. To render question, panel, page, and survey titles, the form uses HTML section headings (<h1>-<h6>), which help you better structure an HTML document and are used by search engines to understand the hierarchy of the web page content. When specifying section headings, you shouldn't skip levels: always start with <h1>, then <h2>, and so on. However, a SurveyJS form can be displayed in different environments—occupy an entire page alone or integrate into another page with its own headings. In each case, the same form elements may have different heading levels to ensure that the HTML document conforms to the standard. This demo shows how to change the heading levels of form elements.

To set form element heading levels, use the titleTags object within global survey settings. This object contains a property for each form element that can have a title: survey, page, panel, and question. The following code shows how to set these properties:

import { settings } from "survey-core";

settings.titleTags.survey = "h1";
settings.titleTags.page = "h2";
settings.titleTags.panel = "h3";
settings.titleTags.question = "h3";

If you want to change heading levels dynamically or based on a condition, handle SurveyModel's onGetTitleTagName event. The event's parameters include the form element for which a heading level is being set (options.element) and the element's current heading (options.tagName). You can change the heading within the event handler. In this demo, the onGetTitleTagName event is used to specify a different heading for questions nested in panels. Refer to the component file listing for a code example.