画像は視覚的には画像の下で意味的には上になります

タイトル/キャプションとともに画像を追加しています。私はイメージの上のタイトルを意味的に保つことを目指していますが、その下には視覚的にCSSやHTMLのみでこれを行う方法がありますか？タイトルは段落がするように、サイズが動的にできるようにする必要があることを念頭に置いてベアリング・画像は視覚的には画像の下で意味的には上になります

http://jsfiddle.net/jamesgorrie/vRxuB/9/

。段落は意味的にイメージの上か下にありますが、ヘッダーの下には意味的に視覚的にあります。

更新：イメージサイズは想定できません。これまでのところ、私が持っている最も近いです：http://jsfiddle.net/jamesgorrie/vRxuB/23/

出典

2011-08-02 James Gorrie

ある

<figure> <img src="yay.jpg" alt=""> <figcaption> yay!!! </figcaption> </figure>

あなたは（HTTP [このよう]のマージンと絶対位置を追加することができます：//jsfiddle.net/C3JC6/）。しかし、もっと良い方法があるはずです –

"意味上"の意味がわかりません。しかし、おそらく[：このトリック]（http://jsfiddle.net/bcAsx/）と '：after'が役立ちます。 –

なぜですか？以下の私の答えを参照してください.... – diagonalbatman

のように、あなたが何かをしていけない理由：これは完全にセマンティックHTML5

出典

2011-08-02 15:31:11 diagonalbatman

ありがとうございました。そうです、それは私が推測する意味論です。私はそれの順序にもっと興味があります。 CSSが適用されていないとき（SEO）、CSSが適用されたときに視覚的にH1が最初に表示されるように、イメージの下部に表示します。 –

あなたの例では、コード内の画像の上にヘッダーが配置されていますが、視覚的には下には表示されません。 –

申し訳ありませんが、どこに行かれたのかわかりません。新しいもの –

画像は視覚的には画像の下で意味的には上になります

答えて

関連する問題