QA@IT

html5のsection,articleのhrタグの位置について

3494 PV

初めまして。
最近html5でサイトを構築しようと頑張っています。
そこですごく気になった事があり何が正しいのかわからないので質問させてください。
何かの記事で「sectionやarticleの内部の最初には必ずhrタグがこないといけない」という記事を読んだことがあります。

そこで質問内容としてはsectionやarticleの内部の最初には必ずhrタグがこないといけないのでしょうか?
例えば新着のお店情報を5件ほど乗せようとした場合のレイアウトで以下の順で一つのお店情報を作りたいと思っています。
1.エリアの名前
2.お店の写真
3.お店の名前(hrタグで囲みたい)
4.お店の紹介文

以下のようにしたら問題ありますでしょうか?

<section>
  <header>
    <h1>新着情報</h1>
  </header>
  <article>
    <a href="#">
      <p>エリア名</p>
      <p><img src="img/img.png" alt="お店の写真"/></p>
      <header>
       <h1 class="item-title">お店の名前</h1>
      </header>
      <p>お店の紹介文</p>
    </a>
  </article>
</section>

もし本当にarticle内の内部の最初には必ずhrタグがこないといけない場合、以下のようにしてcssで無理矢理レイアウトを変える方法しかないのでしょうか

positionとかで無理矢理お店の名前を上にもってくる。。。。
<section>
  <header>
    <h1>新着情報</h1>
  </header>
  <article>
    <a href="#">
      <header>
       <h1 class="item-title">お店の名前</h1>
      </header>
      <p>エリア名</p>
      <p><img src="img/img.png" alt="お店の写真"/></p>
      <p>お店の紹介文</p>
    </a>
  </article>
</section>

よい情報や方法をご存知の方、ご教授頂けると幸いです。

回答

そこで質問内容としてはsectionやarticleの内部の最初には必ずhrタグがこないといけないのでしょうか?

そんなことはありません。公式のサンプルでも使用されていません。

http://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-article-element

http://www.w3.org/TR/2011/WD-html5-20110525/sections.html#the-section-element

もし本当にarticle内の内部の最初には必ずhrタグがこないといけない場合、以下のようにしてcssで無理矢理レイアウトを変える方法しかないのでしょうか

こちらの説明でのHTMLにはhrタグもcssも無いように見えますが、hrタグを別のタグと勘違いしていませんか?

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。