css - 視覚的なデザインに合わせてページを意味的にマークアップする

Question

私が取り組んでいるこのデザインをマークアップする最善の方法を決定しようとしています。その簡単な概要は次のとおりです。

ニュース記事なので、articleタグをつけて、余談を書いてみたいと思います。私の問題は、それのデザインレイアウトです.記事のh1は2列にまたがっています..h1に記事タグを使用し、情報と本文を公開したい..しかし、それを行い、デザインに合わせるために私は記事内に rightcolumn を含める必要がありますが、これは意味的に優れていません。右側の列の情報は多くのページに共通するため、脇に置いてはいけません。

だから現時点では、私は次のように考えています

<h1>News article title</h1>
<div class="leftcol">
    <article>
    <p>publish information</p>
    <p>Main body in general markup</p>
 </article>
<aside>
Related content here
</aside>
</div> <!-- end left col -->
<div class="rightcolumn">
Contact form code, followed by customer quote stuff
</div> <!-- end right column -->

H1 を article タグの外に置いておくことを懸念しています - 目的に反しているように思えますが、他の方法がうまくいくかどうかはわかりません。記事内で h1 タグが繰り返される可能性もありますが、それは間違いなく理想的ではありません..

このデザインをマークアップする最も意味的に正しい方法は何ですか?

*ED

意見に基づく質問はできません..しかし、他の誰かが同じことを検討している場合（そしてそれを尋ねることは許可されていません）、私は次のことを行いました：

<div class="page-heading">News article title</div>
<div class="leftcol">
<article>
    <h1>News article title</h1>
    <p>publish information</p>
     <p>Main body in general markup</p>
</article>
<aside>
    Related content here
</aside>
</div> <!-- end left col -->
<div class="rightcolumn">
    Contact form code, followed by customer quote stuff
</div> <!-- end right column -->

記事内に h1 を保持し (そして css で非表示にし)、同じ内容の列の外側に div を使用してデザインに忠実にすることにしました。