HTML: how to properly set header for nesting <article> - html

Question

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.
At this stage my focus is on having a correct structure, outline and utilizing semantic HTML.
According to MDN, <article> is a correct element to represent this. So I've come up with this structure:
<h1> Products </h1>
<article>
<header>
<h2> Title: Product A </h2>
</header>
<div>
<span>Sub-products:</span>
<ul>
<li>
<article>
<header>
<h2> Title: Product A-1 </h2>
</header>
<div>
<span>Sub-products:</span>
<ul>
<li>
<article>
<header>
<h2> Title: Product A-1-1 </h2>
</header>
</article>
</li>
</ul>
</div>
</article>
</li>
<li>
<article>
<header>
<h2> Title: Product A-2 </h2>
</header>
</article>
</li>
</ul>
</div>
</article>
Now, I'm wondering if using h2 correct at all. I was thinking about using h3-h6 but what actually stopped me was that after 6 level of nesting, I wouldn't have a proper tag to use.
So, what's the correct way to present titles as the heading of the articles?

Answer 1

If you nest contents using <article>, use <h1> for the title of each article: Right -- more than one <h1> in the code for one HTML page.
Bruce Lawson wrote a comprehensive article about this subject:
https://www.smashingmagazine.com/2020/01/html5-article-section/
<h1> Products </h1>
<article>
<header>
<h1> Title: Product A </h1>
</header>
<div>
<span>Sub-products:</span>
<ul>
<li>
<article>
<header>
<h1> Title: Product A-1 </h1>
</header>
<div>
<span>Sub-products:</span>
<ul>
<li>
<article>
<header>
<h1> Title: Product A-1-1 </h1>
</header>
</article>
</li>
</ul>
</div>
</article>
</li>
<li>
<article>
<header>
<h1> Title: Product A-2 </h1>
</header>
</article>
</li>
</ul>
</div>
</article>
That said, my preferred approach is actually use aria-labelledBy to connect those <h1>s as the title of each segment, i.e.:
<h1> Products </h1>
<article aria-labelledBy="title001">
<header>
<h1 id="title001"> Title: Product A </h1>
</header>
<div>
<span>Sub-products:</span>
<ul>
<li>
<article aria-labelledBy="title002">
<header>
<h1 id="title002"> Title: Product A-1 </h1>
</header>
<div>
<span>Sub-products:</span>
<ul>
<li>
<article aria-labelledBy="title003">
<header>
<h1 id="title003"> Title: Product A-1-1 </h1>
</header>
</article>
</li>
</ul>
</div>
</article>
</li>
<li>
<article aria-labelledBy="title004">
<header>
<h1 id="title004"> Title: Product A-2 </h1>
</header>
</article>
</li>
</ul>
</div>
</article>
Arguably it's a little elaborative, but creates unmistakable link between each piece of content and its title when accessed with accessible technologies -- even when the segment is tab-navigated into with no chance to read its <h1> element.