divを隠すことなくコンテンツを隠していますか？

Question

これは今までで最も簡単な質問かもしれませんが、私は単にそれを理解できなかったかもしれません。私は今、ウェブサイトで作業しています。私は、HTMLをきれいに編集しやすくするために、できるだけ少数の<div>要素を使用したいと考えています。現時点では、私は本質的に持っています：

非常にシンプルでエレガントな、はい？しかし、クライアントは、彼らのヘッダーが会社名とロゴを含む単一の大きな画像で構成されることを望んでいます。だから私のオプションはかなり明確です - <img>タグを使うか、background-imageプロパティをヘッダの<div>に設定してください。しかし、その後私はSEOについて考えるようになった。 Googleのために、<div>というヘッダーに自分のウェブサイトのタイトルを持つ<h1>要素が含まれていても、この要素を隠して、人間のユーザーには背景画像しか表示されないようにする必要があります。

display:none; CSSプロパティを使用する場合は、背景を含めて<div>全体が消えますが、 <div>自体を隠すことなく、<div>の内容を隠す良い方法はありますか？

Answer 1

あなたはH1そのものを隠そうとしましたか？

<div id="header"> 
    <h1>Company title</h1> 
</div> 

あなたのスタイルには、次のようになります。どうやら、私たちは当時のものを抱えているの両方 #header h1{display:none;visibility:hidden;}

UPDATE。あなたは優しいH1本当にSEO /スクリーンリーダーを作りたい場合は、あなたのCSSでこれを行う方が良いでしょう：

#header h1{ 
    width:XXXpx; 
    hight:XXXpx; 
    background:url('image/location.png'); 
    text-indent:-9999px; 
    overflow:hidden; 
} 

この方法で、あなたのテキストがページに存在し、実際にあるとレンダリング、それは一種のオフだけです画面。あなたはこのタグをしたい場合

Answer 2

あなたは、h1もがそれ（会社名）にテキストを入れて、それを隠すためにtext-indentを使用した上で設定した背景画像をh1と#header div要素を置き換えることができます。

さらに、要素の数を最小限に抑えるために、bodyをラッパーとして使用できます。フルページの背景が必要な場合は、html要素に設定してください。

Answer 3

divの代わりにH1タグにdisplay: noneを設定し、divの背景イメージを使用します。