HTML5强制两个独立元素之间的关系

我试图使用HTML5的最佳实践，但有以下困境。我有一系列相互关联的图像和文本，但由于要循环使用jQuery转换，我不得不将图像与其重合的文本分开。因此，与理想情况下的样子不同：

<article>
    <img src="image1.png">
    <h1>Title1</h1>
    <p>Description</p>
</article>
<article>
    <img src="image2.png">
    <h1>Title2</h1>
    <p>Description</p>
</article>

<div id="textholder">
    <article>
        <h1>Title1</h1>
        <p>Description</p>
    </article>
    <article>
        <h1>Title2</h1>
        <p>Description</p>
    </article>
</div>
<div id="images">
    <article>
        <h1>Title1</h1>
    </article>
    <article>
        <h1>Title2</h1>
    </article>
</div>

相反，它看起来是这样的：

<article>
    <img src="image1.png">
    <h1>Title1</h1>
    <p>Description</p>
</article>
<article>
    <img src="image2.png">
    <h1>Title2</h1>
    <p>Description</p>
</article>

<div id="textholder">
    <article>
        <h1>Title1</h1>
        <p>Description</p>
    </article>
    <article>
        <h1>Title2</h1>
        <p>Description</p>
    </article>
</div>
<div id="images">
    <article>
        <h1>Title1</h1>
    </article>
    <article>
        <h1>Title2</h1>
    </article>
</div>

---

这显然是不理想的，因为现在图像和文本之间没有关系。我正在通过调查来评估这种关系。有没有一种方法可以将两个标记之间的关系链接到单独的标记？

没有。重写jQuery脚本，您的原始HTML是语义正确的方法