float の右側をdiv で囲む

質問

現在次のような構成があります。

　　図　　説明文

具体的なコードは <p><img>～</p>の一般的なものです。
説明文のところに表を入れる必要性が出て来ました。

ちょっと分かりにくいかと思いますが図は３枚でなく１枚のjpgです。
説明上、３つに分けて書いてあります。

　　図　　説明文
　　図　　　　表
　　図　　説明文

図の部分をdisplay:blockにして、説明文、表、説明文の３つを
１つのdivで括った方がスマートかなと思っています。
ただ、空のdivタグを作ることになります。

それとも以下のコードの方がスマートなんでしょうか。
<p><img>～</p><table></table><p>～</p>

ご見解を聞きたいと思いました。

回答No.1

ORUKA1951 · ベストアンサー

デザインを考えてマークアップするのは変です。tableを使ってデザインするのと意味的に同じHTMLの否定になります。
　常に、文書構造を基準にデザインはスタイル指定がなくても意味が通じるように書きます。例にあげられたものでしたら
<div class="section">
　<h2>見出し</h2>
　<div class="figure"><img></div>
　<p>声明文・・・・</p>
　<table summary="説明" border="1">
　　<tbody>
　　・・・【中略】・・・
　</table>
　<p>説明の続き</p>
</div>
<div class="section">
　<h2>見出し</h2>
　<p>説明文</p>
</div>
とかになるでしょう。

【引用】＿＿＿＿＿＿＿＿＿＿＿＿ここから
DIV要素・・は、id属性及び class属性と併用することで、文書に構造を付加するための一般機構を提供する。
￣￣￣￣￣￣￣￣￣￣￣￣￣ここまで［The global structure of an HTML document (ja)( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/global.html#h-7.5.4 )］より

HTML5では、
<section>
　<h2>見出し</h2>
　<figure><img></figure>
　<p>声明文・・・・</p>
　<table>
　　<tbody>
　　・・・【中略】・・・
　</table>
　<p>説明の続き</p>
</section>
<section>
　<h2>見出し</h2>
　<p>説明文</p>
</section>
とかになるでしょう。

そのうえで、スタイルシートで
div.section div.figure{float:left;margin:1ex 1em;}
div.section{clear:left;}
だけでよいはずです。

HTML5用だと
section figure{float:left;margin:1ex 1em;}
section{clear:left;}

要は、何年かして見ても自身で本文に何が書いてあるか、挿絵に何が書かれているかわかることが大事です。当然検索エンジンもこれらの文書構造上意味のあるclass名は読んで理解してくれます。
HTMLがデザインに引っ張られたらダメです。

お礼

またまた先生にはお世話になります。
この発想はありませんでした。
逆にimg１つをdivで囲むと怒られるかなと思ってました。
だからdisplay:blockを考えていました。

clearするのもdiv.sectionで行うのですね。
これは前にも教えてもらった方法です。
今回は１個しかありませんが、これで行ってみたいと思います。