HTML,CSS：文章内の文字を強調する方法

質問

例えば、

HTML部分
<div class="a">私は、～～<? class="b">「●●」</?>～～である。</div>

CSS部分
div.a {font-style: normal;
font-size: 11pt;
font-family: "ＭＳ 明朝";
line-height: 125%
}

のとき、<?>の部分を強調したいのですがどのタグを使えばいいでしょうか？レイアウトはCSSと聞いてるので、あまりHTML側でレイアウト用のタグは使わない方がいいのではないかと思っているのですが…。
ちなみに、<?>は改行しない場合です。

回答よろしくお願いします。

回答No.5

suiris

No.2の方の意見が最適かと・・・。
<em>→<strong>よりは強調度合いが弱いが通常の文字よりも重要であることを示す。
<strong>→<strong>は<em>よりも強調度合いが強いです。
上記のタグは「構造上」定義するタグですのでなんら問題が無いというよ りは、むしろ正しいです。

以下は推奨されていません。装飾用のタグなので。(これはCSSが存在しなかった頃に考えられたものです。今でも使えますが<strong>、<em>を使用しましょう。)
※<b>はboldの意味で文字を太くするためだけです。
※<i>はイタリック体にさせるためだけのものです。

また、<strong>、<em>はそのページ内に多く指定すると強調ばかりの内容となってしまうため、多用することは避けましょう。
そして、例では　”文章”　を<div>で囲われているようですが、<p>タグが望ましいです。
よって以下の通りにすることが最適だと思います。

HTML部分
<p class="a">私は、～～<strong class="b">「●●」</strong>～～である。</p>

ちなみに、<p class="a">で<strong class="b">とされていますが、もし必要が無いのであれば<strong>のclass="b"を省くべきでしょう。極力HTMLのソースは省力化すべきです。

CSSで指定する時
p.a{
～～～
}
p.a strong{→p.a内のstrong
～～～
}

以下のサイトのソースやWeb標準に関する記事を参考にされると良いかもしれないです。非常に技術的ですが。（＾＾；）
CYBER@GARDEN：http://www.cybergarden.net/
ミツエーリンクス：http://www.mitsue.co.jp/

又、HTMLが正しいかどうかのチェックは以下のサイトで行えます。
Another HTML-lint gateway：http://htmllint.itc.keio.ac.jp/htmllint/htmllint.html
↑100点が取れればスゴイです。
W3C 検証サービス：http://jigsaw.w3.org/css-validator/
↑HTMLだけでなく、CSSも検証できます。
上記2サイトの検証を完璧にサイトを構築するのは非常に時間がかかり・困難です。あまりこだわらないでくださいね。(時間に余裕があればがんばってください。)

※　#1、#3、#4さんの意見は貴方に対する気遣いですので間違いではないです。
<span>は使用を推奨されているタグですが、全く構造上「強調」を表すものではないです。このタグは、一つのタグではCSSで装飾できないときなどによく使用します。
<div>も同じくです。

■<span>と<div>の違い。
<span>は<p>、<div>などの文章・ブロック内
<div>は<span>や、「子」となるブロックを囲います。

例)
<div id="menu">
<ul>
<li><a href="">メニュー1</a></li>
<li><a href="">メニュー2</a></li>
</ul>
</div>
<div id="contents">
<p>はろー。<strong>○○</strong>です。</p>
</div>

最後に・・・
言いたい事ばかり言っていたので、間違っても私なんかにポイント与えないでください。Web標準が世にもっと広がるといいですね。

お礼

なるほど。<em>や<strong>は正しい使い方なんですね。それと非推奨のタグはあまり使わない方がいいんですね。
CSSで「p.a strong」のような使い方ができるんですね。知りませんでした。勉強になります。
文章は<div>より<p>の方がいいんですね。

ありがとうございました。