論理的な強調タグ（strong・em）と視覚的な強調タグ（b・i）
strongやem、bやiは、重み付けタグと「SEO対策」で呼ばれている。
キーワードを、これらのタグで重み付けすると、順位アップに効果があると言われている。
しかしSEO塾は、以前は下記の「CSSソースは」にあるように、strongやem、bやiを色づけを兼ねて操っていたが、現在は、SEOを目的として強調タグをほとんど使っていない。
現在のソースは次のとおり
.red{
color: #cc0000;
font-weight: bold;
}
.blue{
color: #0000cc;
font-weight: bold;
}
.magenta{
color: #ff3399;
font-weight: bold;
}
.cyan{
color: #0099ff;
font-weight: bold;
}
これを「span」タグのclassに設定している。
つまり、完全に色分けでユーザーに訴えているわけだ。まったく論理的なマークアップとはなっていない。
理由は、strongやem、bやiを使い過ぎて、ペナルティを受けたからである。
以上、2010-10-23追記
強調（strong,em要素）とは？
「強調」と「より強調」
ブラウザー表示とは無関係に、構造的な重要性を表現している。em要素は強調、strong要素はより強調とされている。
視覚的なタグ付け
b要素やi要素は、非推奨ではないが、ボールドや斜体などの視覚的効果を狙う場合は、これらを使わずに、スタイルシートを使用するように推奨されている。
その他の視覚的タグ
big（大きな文字）、small（小さな文字）、u（下線）、strike（取消線）、s（取消線）など。bigとsmallを除いては、非推奨要素である。
2010-10-23追記
削除（取消）は<del>削除</del>、挿入（追記）は<ins>挿入</ins>、を用いる。
del{/* 削除 */
color: #e54500;
}
ins{/* 挿入 */
color: #228b22;
}
これは、論理的タグである。
ちなみに、上記ソースは次のCSS
code{/* ソースなど */
display: block;
margin-left: 1em;
color: #476b55;
font-family: Courier New, Courier, "ＭＳ ゴシック", "Osaka－等幅", monospace;
font-size: 12px;
line-height: 1.2em;
}
.code-e{
font-family: Lucida Console, Courier New, Courier, monospace;
}
.code-j{
font-family: "ヒラギノ角ゴ Pro W3", "ＭＳ Ｐゴシック", "Osaka",sans-serif;
}
ちなみに、パスを書くときに、
C:\Program Files\Adobe\Adobe Dreamweaver CS5
では、バックスラッシュが気持ち悪いので、「code-j」で表示させている。
C:\Program Files\Adobe\Adobe Dreamweaver CS5
HTMLソースは
<strong>キーワード</strong>
<em>キーワード</em>
strong要素とem要素は、あくまでも論理的マークアップである。そのままでは、ボールドとイタリックでブラウザー表示されるが、スタイルシートでどのようにも視覚化できる。
つまり、ボールドにするかイタリックにするかといった基準ではなく、強調かより強調かで構造的にマークアップして、場合によっては、スタイルシートで見栄えを変えるべきである。
CSSソースは
このサイトの場合
strong{
color: #cc0000;
}
em{
color: #0000cc;
font-style: normal;
font-weight: bold;
}
b{
color: #ff3399;
}
i{
font-style: normal;
font-weight: bold;
color: #0099ff;
}
上位表示の方程式
- iをなるべくemに代える
- bをなるべくstrongに代える
要するに、火中の栗を拾わなければ、うまいものにはありつけない。
ペナルティのリスクを織り込み済みで、強調タグやより強調タグで、上位上位をどうぞ。
サイト内検索（by Googleカスタム検索）
