Mixing section numbers and section headings

Question

We want to render text that looks like this:

1. Introduction. Here is a named section.

This section has a second paragraph.

2. This one does not have a name. It is logically a part of the Introduction.

3. The second section. This one does have a name.

4. This (unnamed) section is part of a group beginning with “The second section”.

5. This one is too.

The ideal markup for this example would be

<section>
  <h1>Introduction</h1>
  <section>
    <p>Here is a named section.</p>
    <p>This section has a second paragraph.</p>
  </section>
  <section><p>This one does not have a name. It is logically a part of the introduction.</p></section>
</section>
<section>
  <h1>The second section</h1>
  <section><p>This one does have a name.</p></section>
  <section><p>This (unnamed) section is part of a group beginning with “The second section”.</p></section>
  <section><p>This one is too.</p></section>
</section>

I don't want to put the section numbers in the markup; in other words, it would be best if a CSS counter were used. And indeed simply getting section numbers is easy, although making them run into the text as above is tricky.

You might be wondering what this is all about, and why I'm not using an order list. The answer is that the ultimate purpose is to translate literate programs written by Donald Knuth and others into HTML from WEB (and perhaps eventually CWEB) input. Here is an example of a WEB program, as formatted, in the usual manner, by TeX: http://mirrors.ctan.org/info/knuth-pdf/web/tangle.pdf. A WEB program is conceptually a bunch of sections that are rearranged into machine-readable code to be compiled. Thus <section> seems most appropriate for the markup. (If, however, what I'm trying to do is super easy with <ol>, then I might pivot.)

In conclusion: How might the markup be styled to create the desired formatting?

Answer 1

Something like this?

Setting a counter on h1 and the sections that aren't following a h1.

Adding inline-block to the h1 and the section that follows it to make them share the same row.

EDIT: UPDATED WITH NEW CSS

   /*** NUMBERING ***/

body {
  counter-reset: increment;
}

/* ignore all paragraphs in first section following h1 */
section > h1 + section > p::before {
  counter-increment: none;
  content: none;
}

h1::before,
section > section > p::before {
  counter-increment: increment;
  content: counter(increment) ". ";
  font-size: 1rem;
  font-weight: bold;
}

    /*** SHARING THE SAME ROW ***/

h1 {
  display: inline-block;
  font-size: 1rem;
  margin: 0px;
}

section > h1 + section {
  display: inline;
}

section > h1 + section > p:first-child {
  display: inline;
}

<section>
  <h1>Introduction</h1>
  <section>
    <p>Here is a named section.</p>
    <p>This section has a second paragraph.</p>
  </section>
  <section>
    <p>This one does not have a name. It is logically a part of the introduction.</p>
  </section>
</section>
<section>
  <h1>The second section</h1>
  <section>
    <p>This one does have a name.</p>
  </section>
  <section>
    <p>This (unnamed) section is part of a group beginning with “The second section”.</p>
  </section>
  <section>
    <p>This one is too.</p>
  </section>
</section>

EDIT: OLD ANSWER

body {
  counter-reset: increment;
}

section > h1::before,
section > section ~ section::before {
  counter-increment: increment;
  content: counter(increment) ". ";
  font-size: 1rem;
  font-weight: bold;
}

h1 {
  display: inline-block;
  font-size: 1rem;
  margin: 0px;
}

h1 + section {
  display: inline-block;
}

section > section {
  margin-bottom: 1rem;
}

<section>
  <h1>Introduction</h1>
  <section>Here is a named section…</section>
  <section>This one does not have a name…</section>
</section>
<section>
  <h1>The second section</h1>
  <section>This one does have a name.</section>
  <section>This (unnamed) section…</section>
  <section>This one is too.</section>
</section>