1: Heading is taken from the attribute name of this section.

2: Heading is taken from the first header child element of this section.

3: Heading is taken from the first header child element of this section. It makes adding inner HTML formatting to the heading text possible.

4: Heading is taken from the first header child element of this section.

CSS:

/* This CSS file is critically important for content: */
@import "../auto-numbering/auto-numbering.css";
        
/* Custom styles... */
#tocHeader, header, section:before { font-weight: bold; }
nav ul { list-style-type: none; } /* to remove bullets from TOC */
nav>ul { margin: 0; padding: 0; }
        

HTML body:

    <p id="tocHeader">Contents:</p>
    <nav id="toc"><!-- TOC will be automatically added here --></nav>

    <section name="Some title for this section">
	<p>First entitling method: simple text title using "name" attribute.</p>
        <!-- any level of nesting: -->
        <section name="Inner">
            Some content
        </section>
    </section>

    <section>
	<header>Some <i>Formatting</i> can be <sup>used</sup></header>
	<p>Second entitling method: "header" as first child element of a section.</p>
	<p>Some content…</p>
	<p>It's important to avoid using "name" attribute if "header" element is used.</p>
    </section>

    <script src="../auto-numbering/auto-numbering.js"></script>
    <script src="../auto-numbering/auto-sizing.js"></script>
    <script>
        const levelCount = 
            autoNumbering(document.getElementById("toc"), "auto.toc-", document.body);
        autoSizeHeadings(104, 160, levelCount, "#tocHeader");
    </script>
        

For further detail and ideas, please see source HTML code of this document.