HTML5 форсирует отношения между двумя отдельными элементами

Question

Я пытаюсь использовать лучшие практики 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>

Это, очевидно, не идеально, потому что сейчас нет никакой связи между изображением и текстом. Я оцениваю эти отношения через HTML5 outliner (h5o) . Есть ли способ связать отношения между отдельными тегами?

Answer 1

Нет. Перепишите сценарий jQuery, ваш оригинальный HTML - это семантически правильный способ сделать это.