CSSのタグについて

質問

今CSSを勉強中の者です。一つ質問させて下さい。

とあるサイトで
---------------------------------------------
<div id="album">
<ul>

<li><a id="photo" href="#">
　<em><img src="album/img/photo.jpg" /></em>
　　　<span>写真１</span></a></li>

</ul>
</div>
---------------------------------------------
とHXTML表記があり、CSSの設定は下記のようになっていました。
（※一部抜粋）
---------------------------------------------
div#album ul li a em,
div#album ul li a span
　{
　display: none;
　}
---------------------------------------------

そこで質問です。<em>や<span>のタグを単独で使った
事がなく、どうしてこの二つのタグが使われているの
かがわかりません。
特にemはフォントサイズの指定ではないのでしょうか？
それともCSSで効果の設定をするために無理に入れて
いるだけなのでしょうか。

勉強中の為に訳の分からない質問なのかも知れませんが
どなたか分かりやすく教えて頂けますと幸いです。

回答No.2

dezimac · ベストアンサー

HTMLとCSSはしっかりと分離して考えて下さい。
・HTMLは文章を構造化する為のもの
・CSSは色や書体等のデザインをするもの

> emはフォントサイズの指定では
HTMLの<em>は強調という意味です。
<span>は特に意味はありません。

例）-----
<p>この文章の<em>重要な部分はここ</em>です。</p>
<p>意味もなく文章の<span>一部の色等</span>を変えて見た目だけ派手にしたい<p>

em {
font-style:bold;
color: reb;
}
span {
color: blue;
}
-----

> CSSで効果の設定をするために無理に入れて
貴方が省略した部分もあるでしょうが、大筋でその例の通りの作りだとすると、何の為にやっているかは、ハッキリ言って不明です。
非表示するだけなら、<em>とか不要ですし、
強調したい部分を非表示にして何の意味があるのか？

お礼

お二人ともありがとうございました！

補足

え～と、かなり（９割ぐらい）私が省略してかいてあるので
すみません。意味はあると思います。

ただ、質問の箇所で<em>と<span>である必要性があるのかなぁ？
他のタグじゃダメなの？と思ったもので。

回答No.1

qandasok

>それともCSSで効果の設定をするために無理に入れて
いるだけなのでしょうか。

それで正解だと思います。
何故ならば、imgにCSSを指定して、
alt属性に「写真1」を加えれば済むはずだからです。
仮にSEO対策の名目で「写真1」をdisplay: none;にしているなら、
それは見当違いなやり方です。
キーワードを不可視にするリスクを考えたら、普通怖くて出来ません。

[補足]
>emはフォントサイズの指定ではないのでしょうか？

違います。
emは論理強調タグであって、フォントサイズの指定ではありません。
ただ単に文字を強調するだけでなく、
そのタグに囲まれた部分がそのHTML文書において重要である
と主張する効果があります。
ただ単に文字を太くしたいだけなら、視覚強調タグである<b>を使うべきです。

お礼

ああ、、、HTMLでのemだとそういえば別でしたね・・・
勘違いでした。