title: HTML: how to properly set header for nesting <article>
body: <p>I'm creating a React component which represents a product card. Each product card has a title and a list of sub-product cards, and so on. This nested structure can go infinitively.</p>
  <p>At this stage my focus is on having a correct structure, outline and utilizing semantic HTML.</p>
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/article" rel="nofollow noreferrer">According to MDN</a>, <code>&lt;article&gt;</code> is a correct element to represent this. So I've come up with this structure:</p>
  <pre><code>&lt;h1&gt; Products &lt;/h1&gt;
  &lt;article&gt;
      &lt;header&gt;
          &lt;h2&gt; Title: Product A &lt;/h2&gt;
      &lt;/header&gt;
      &lt;div&gt;
          &lt;span&gt;Sub-products:&lt;/span&gt;
          &lt;ul&gt;
              &lt;li&gt;
                  &lt;article&gt;
                      &lt;header&gt;
                          &lt;h2&gt; Title: Product A-1 &lt;/h2&gt;
                      &lt;/header&gt;
                      &lt;div&gt;
                          &lt;span&gt;Sub-products:&lt;/span&gt;
                          &lt;ul&gt;
                              &lt;li&gt;
                                  &lt;article&gt;
                                      &lt;header&gt;
                                          &lt;h2&gt; Title: Product A-1-1 &lt;/h2&gt;
                                      &lt;/header&gt;
                                  &lt;/article&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/div&gt;
                  &lt;/article&gt;
              &lt;/li&gt;
              &lt;li&gt;
                  &lt;article&gt;
                      &lt;header&gt;
                          &lt;h2&gt; Title: Product A-2 &lt;/h2&gt;
                      &lt;/header&gt;
                  &lt;/article&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/article&gt;
  </code></pre>
  <p>Now, I'm wondering if using <code>h2</code> correct at all. I was thinking about using <code>h3</code>-<code>h6</code> but what actually stopped me was that after 6 level of nesting, I wouldn't have a proper tag to use.</p>
  <p>So, what's the correct way to present titles as the heading of the articles?</p>