Attempted to close an element that was not open

Question

I've got the following code in Svelte. It works without the <p> tag, but when I put the {#if}...{/if} inside a <p> tag, I receive the following error on the last line and the application doesn't compile.

< /p> attempted to close an element that was not open

<p>
   <h3>Active games</h3>
   {#if !Array.isArray(games)}
      <span>Loading...</span>
   {:else if games.length === 0}
      <span>None</span>
   {:else}
      {#each games as game (game.id)}
         <a href={'/game/' + game.id}>{game.name}</a><br>
      {/each}
   {/if}
</p>

What's causing the error?

Answer 1

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p, The "Tag omission" section, p tag is automatically closed if encounter any other block level element, eg <h3> tag in this example.

In other words, you can't have any other block level element within <p> tag.