文章の中の大切な部分や、強調したい部分、リンクにしたい文字列、外国語のフレーズ、略語など、その部分の性格や役割を情報として示したい場合があります。
HTML5では、このように場合に使うタグをText-level semanticsという分類にしています。
注意: HTML5以前は要素をブロックを作る要素と、その中の一部を強調などのためのインライン要素に分類していました。この分類ではここで学ぶことはインライン要素ですが、HTML5からはそのような分類はしません。ブロックに見えるかインラインに見えるかは「見栄え」の問題なのでスタイルシートに任せて、HTML5ではあくまで「役割」を指定するのみであることを徹底する為のようです。ただし、ブラウザでの表示はほぼ今までどおりなので変わったことに気が付かないかもしれません
もうひとつ、HTML4.0と使い方が大きく変えられたタグがかなりあります。解説本や入門サイトで調べるときにはどのバージョンに基づいているか確認が必要です。
ここでは代表的なものを紹介します。他にどんなものがあるかはHTML5 要素一覧を見てください。
aタグはリンクであることを表します。
リンクは「これについては情報で学んだことを見てください」などと文章の中に挿入するような使い方もよくします。
これについては<a href="joho.html">情報で学んだこと</a>を見てください
これはすでに使用しています。
emはその部分の強勢・強調を表します。
重要性は表しません。ここが従来と違う所。イタリックにするという意味ではありません。ここは従来通り。
以下のような使い分けです。
他の人はどうかは知らないが、とにかく私は好きですと言いたいときには次のようにします。
<p><em>私は</em>猫が好きです。</p>
普通のブラウザは斜体(イタリック)ですが、ここではスタイルシートでこのように表示するように指定しています。
私は猫が好きです。
私は犬でもハムスターでもなく猫が好きですと言いたいときには、
<p>私は<em>猫が</em>好きです。</p>
すると、このように表示されます。
私は猫が好きです。
などと使いわけます。これを斜体で表すのは英文では普通の習慣ですが、日本語の場合はあまり馴染みがありません。でも文章の中でその単語そのものは重要ではないけれど、強勢をおいておきたい時に使ってください。
em の語源は emphasis (強調, 重要視,重点)です。
strongはその部分が重要であることを表します。
<p><strong>注意:</strong>開封後は冷蔵庫に保管してください。</p>
ほとんどのブラウザでは太字ですが、ここではスタイルシートでこのように表示するように指定しています。
注意:開封後は冷蔵庫に保管してください。
strong の語源は strong (強い) です。
これをどう表示するかはCSS
で指定します。たとえば、
em {
color:#990000; ←赤味のある茶色にする
font-style:normal; ←斜体をやめる
}
こうすると em で囲まれたところは、次のようになります。
CSSで赤茶色,斜体なしを指定。 私は猫が好きです。
他に使えそうなものをあげておきます。color などと同じく、h1,h2,pなどのブロックを作るタグにも指定することができます。
font-weight:bold; ←太字にする font-weight:normal; ←太字をやめる font-style:italic; ←斜体にする font-style:normal; ←斜体をやめる font-size:150%; ←文字の大きさを1.5倍にする
text-decoration:underline; ←下線を表示 text-decoration:overline; ←上線を表示 text-decoration;line-throught; ←打ち消し線 text-decoration:none; ←線なし