Heading Groups

Heading Groups are useful when you want more control over the semantic structure of headings on a given page.

• Some content items or templates have options to display a heading above the content block, but not the size or type of the heading.

• If you want the display title(s) for a single item or a group of items to use sub-headings as opposed to the default heading structure, you can use a Heading Group.

The following instructions provide an overview of Headings and Empty content items as well as information on using the Empty content items and the Heading Group templates to control Heading hierarchy on a page.

Table of Contents

Headings

Headings are important on web pages for a variety of reasons. They can be used:

• To indicate the hierarchy of content on a page

• Differentiate the sections and sub-sections of the content on the page

• To describe the content in the section they appear before and make the page easier to scan.

• They are also essential for digital accessibility.

The default Heading structure is as follows, based on a content item’s position on the page:

1. h1: The first component on the page will have the highest level of heading format, h1, and will appear as the page title. This can be

   • An actual Page Titles component

   • Or the Title entered for other components, often a Content component.

2. h2: The heading for every component other than the first will use an h2 heading.

The following table is an example of what that might look like:

In some cases, a subset of components on the page are related, and you might want to change the heading structure of the page to reflect that.

This is where Heading Groups in Tridion come in:

• If the components in position 3 and 4 are examples of something described by component 2. it would be useful to indicate that relation with headings, shown below.

Downgrading the headings for the sub-sections helps indicate they belong to a specific section of the page, in this case “Our Programs.” You can accomplish this with Empty components using the Heading Groups layout.

Empty Content Items

An Empty content items is a content blcok with no configurable fields. The item is used for various templates that do not require any information to be entered, including Heading Groups.

• As such, every Empty content item in Beatrix CMS is the same (apart from its name) before its added to a page with a template.

Example of a Page Before Adding a Heading Group

For context, the following examples show what a page looks like before adding Empty content items to a page as a Heading Group.

Below, you can see what the page looks like in the Page view of Beatrix CMS.

Open

Highlighted in yellow above are the 5 blocks described earlier in these instructions, as they appear on a page, before we make a Heading Group.

The below screenshot shows what this page looks like when it is published:

Open

There are some things to notice about the screenshot above:

1. The Title of the Content item that appears first on the page is made the page title and has an h1 Heading (highlighted in yellow above).

2. The Titles of the rest of the Content items are given h2 headings (highlighted in blue above).

3. Any Paragraph headings in the Content items are given h3 headings (highlighted in green above).

Now that you’ve seen what the default structure of Headings looks like without a Heading Group, the next section will demonstrate how to add one to a page using an Empty content item.

Adding the Empty Item to a Page

To create a Heading Group, you need to add Empty content items to a page as a Heading Group template.

1. Navigate in the pages folder to the page you'd like to add a Heading Group to and double-click to open the page.

2. In the window that opens, click the browse for content.

3. The content item, named “Empty Content Item,” can be found in the Shared Content folder under Default Pages.

Select the Empty Content Item and select the Heading Group Start layout.

Then select do this again and select Heading Group End.

Once the Empty content items have been added to the page, use the drag the Heading Group START and END content items to the following positions:

• The Heading Group START content item should go above the block that contains the heading you want to be the first and main heading for the section/heading group.

• The Heading Group END content item should go below the blcok that contains the heading you want to be the last heading in the group.

In this case, we’re going to move the Heading Group START content item above the Our Programs block and the Heading Group END content item below the Program B block:

Once the Heading Group START and END content items are in the desired position on the page you are ready to Publish.

Example of a Page After Adding a Heading Group

The following screenshot shows what the same page from the previous example page looks like after adding the Empty content items to a page as a Heading Group.

There are some things to notice in the screenshot above:

1. The heading for the first item (page title, h1) did not change (highlighted in yellow above).

2. The headings for the first item in the Heading Group and the first item after the heading group remained h2 headings (highlighted in blue above).

3. The headings for the two items inside the Heading Group that weren’t the first changed from h2 headings to h3 headings (highlighted in green above).

   • The sub-headings (paragraph headings) for those two items also moved down one level from h3 to h4 headings (highlighted in red above).

For reference, the below screenshot shows what the page looked like before adding the Heading Group: