We want to run some DOM transformations which make it easier for clients to collapse and expand nested sections.
These DOM transformations should be performed server-side to avoid performance issues on clients.
Headers are added to make it easier for downstream services or client code to add section decorators (edit buttons, collapse/expand indicators, ...).
Simple proposal
<section>
<header>
<h2>Title</h2>
</header>
<div typeof="mw:SectionContent">
<!-- Content -->
</div>
</section>Fuller example (nested + lead section)
<section data-mw-section-id=0>
<div typeof="mw:SectionContent">
<!-- Content of lead section -->
</div>
</section>
<section data-mw-section-id=1>
<header>
<h2>Section 1</h2>
</header>
<div typeof="mw:SectionContent">
<!-- Content of Section 1 -->
<p>foo</p>
<section data-mw-section-id=2>
<header>
<h3>Section 1.1</h3>
</header>
<div typeof="mw:SectionContent">
<!-- Content of subsection Section 1.1 -->
</div>
</section>
</div>
</section>