diff --git a/src/core/structure.js b/src/core/structure.js
index 13a9145bf0..4d293a2ccb 100644
--- a/src/core/structure.js
+++ b/src/core/structure.js
@@ -10,7 +10,13 @@
 //  - lang: can change the generated text (supported: en, fr)
 //  - maxTocLevel: only generate a TOC so many levels deep
 
-import { addId, getIntlData, parents, renameElement } from "./utils.js";
+import {
+  addId,
+  getIntlData,
+  parents,
+  renameElement,
+  wrapInner,
+} from "./utils.js";
 import { hyperHTML } from "./import-maps.js";
 
 const lowerHeaderTags = ["h2", "h3", "h4", "h5", "h6"];
@@ -22,6 +28,9 @@ export const name = "core/structure";
 const localizationStrings = {
   en: {
     toc: "Table of Contents",
+    section: "Section ",
+    chapter: "Chapter ",
+    appendix: "Appendix ",
   },
   zh: {
     toc: "内容大纲",
@@ -84,10 +93,19 @@ function scanSections(sections, maxTocLevel, { prefix = "" } = {}) {
       // paginate the output
       section.header.before(document.createComment("OddPage"));
     }
-
+    const secthdr =
+      level === 1
+        ? appendixMode
+          ? l10n.appendix
+          : l10n.chapter
+        : l10n.section;
+    wrapInner(section.header, hyperHTML`<span class='sect-title'>`);
     if (!section.isIntro) {
       index += 1;
-      section.header.prepend(hyperHTML`<bdi class='secno'>${secno} </bdi>`);
+      section.header.prepend(
+        hyperHTML`<span class='secthdr' hidden>${secthdr} </span>`,
+        hyperHTML`<bdi class='secno'>${secno} </bdi>`
+      );
     }
 
     if (level <= maxTocLevel) {