Introduction 

A heading structure that makes sense helps readers, search engines and assistive technology. In TYPO3 the tag of a header (<h1> to <h6>) is usually tied to its layout, so changing how a heading looks changes where it stands in the hierarchy. Headliner separates the two and shows the result.

The box in the language comparison of the page module

The box in the language comparison of the page module: one section per language, each with its own problems.

Features 

  • Structure in the page module. A box above the content lists all headings of the page, as they are rendered in the frontend, and marks problems: no H1, more than one H1, skipped levels (an H2 followed by an H4) and empty headings.
  • Choose the tag. Content elements get the field Tag (H1 to H6 or div). The layout (Type) only decides how the header looks, through a CSS class. The subheader has its own tag (Subheader tag) and looks like its header.
  • Change it in place. In the box the tag can be changed with a select. It is saved through the DataHandler and the structure is checked again.
  • Open the element. The text of a header opens the edit form of its content element in the side panel, also for headings that come from the text (RTE) of an element.
  • Several languages. In the language comparison the box has one section per language, side by side like the columns of the page module.
  • Rights. The select and the edit link appear only for backend users who may use them.

Requirements 

  • PHP 8.3 or newer
  • TYPO3 14.3 LTS
  • Optional: fluid_styled_content. With it the site set changes the headers of its content elements. Without it use the ViewHelpers in your own templates (see Add the site set and Integration).