マークアップとHTMLの理念

まずは、前回に続いていくつかテキストをマークアップする要素を紹介します。

b要素

まず紹介するb要素は、「特に重要ではないが、他と区別して目立たせたい部分」を表します。重要ではないキーワードをマークアップしたい場合などに使えます。例えば、RPGを作ったときなどに次のようにします。


<p><b>スライム</b>を倒した!<b>経験値10ポイント</b>を手に入れた!</p>

敵の名前や経験値などは、強調したいわけでも重要なわけでもないが目立たせたい、という部分です。別にゲームを作らないとb要素は使えないということもなく、けっこう使う場面があると思います。ただ、何でもむやみにb要素にするのではなく、em要素やstrong要素などが使える場合はそちらを使ったほうがよいです。

b要素

要素の種類

フレージング・コンテンツ

フレージング・コンテンツ

意味

重要ではないキーワードや目立たせたい部分、その他一般的に印刷表現で太字となるテキスト。

i要素

次のi要素ですが、これはなかなか使いどころが難しいです。「夢の流れや思考、技術用語など」さまざまな用途で使え、「一般的な印刷表現としてイタリック体で表される散文」などとされています。

実際、本などを読んでみると、たまに斜体になっている部分があります。そういった表現をするのがi要素なのです。ただ、「斜体にするための要素」ではありません。「この部分は、ふつう斜体になりそうな意味を持っている」という意味を持った要素です。具体例は、こんな感じです。


<p><i>今から出発しても集合時刻の9時には間に合わない</i>――彼はそう考えた。</p>
<p><i>今日は風邪を引いたことにして休もう。</i>そして彼はふとんにもぐりこんだ。</p>

i要素

要素の種類

フレージング・コンテンツ

フレージング・コンテンツ

意味

声や気分、技術用語、別の言語のフレーズ、思考など、その他一般的な印刷表現でイタリック体となる表現。

s要素

さらに、s要素ですが、これはなかなか便利です。どういうことかというと、「もう正確ではない、またはもう関連性がない部分」ということを表します。例えば次のようになります。


<p>今ならこの商品は<s>3000円</s><em>2000円</em>です!</p>

このようにすることで、「前は3000円だったが、今はそうではない」ということを表します。なかなか便利なのですが、次回紹介するdel要素と区別するようにしましょう。これについては次回詳しく解説します。

s要素

要素の種類

フレージング・コンテンツ

フレージング・コンテンツ

意味

もう正確ではない、またはもう関連性がないコンテンツ。

u要素

最後に、u要素がありますが、これはなかなか難しい要素です。

これは、「はっきりと伝わりにくい、または本来とは異なった表記」という場合に使われます。

たとえばどういうことかというと、例えば1つの例として固有名詞があります。「にわにはにわにわとりがいる。」という文があったとします。

これでは伝わりにくいので、u要素を用いてマークアップします。


にわには<u>にわにわとり</u>がいる。
このようにマークアップすると、次のようになります。「にわにはにわにわとりがいる。」

こうすることで、「にわにわとり」が固有名詞であり、そういう名前の変な鳥がいるということが明確に表されるわけです。

「本来とは異なった表記」というのは、例えばミススペル言葉の誤りが挙げられます。

たとえば次のような例があります。


彼の作るWebサイトは<u>95割</u>がIEでは動かないらしい。

この「95割」は有名な誤用で、わざと間違えて使われる例があります。この例では、「95割」が素で間違えたのではなく、誤用と分かっていながら敢えて使用したのだということを示すことができます。

もっとも、敢えて「95割」を使用したなら、強調したいということで前回紹介したem要素を使うかもしれません。このように、u要素は極めて出番の少ない要素です。

u要素

要素の種類

フレージング・コンテンツ

フレージング・コンテンツ

意味

はっきりと伝わらなかったり、本来とは異なった表記のテキスト。

HTMLの理念

さて、上でHTML4.01のb要素・i要素・u要素・s要素は「HTMLの考え方に反する」ということで非推奨になったといいましたが、では何かどう反しているというのでしょうか。

HTML4.01でのこれらの要素の意味は、それぞれ「太字」「斜体」「下線」「取り消し線」でした。これらは、いずれも文字の見た目を指定するものです。これがいけないのです。HTMLは見た目を記述する言語ではないのです。

それではHTMLで何を記述するのかというと、HTMLは意味や構造を記述するのです。

今まで紹介した中では、html要素・head要素・body要素・title要素などはHTMLの骨格(基本構造)を担う要素でした。

そしてp要素は「段落」という意味で、ブラウザがこれが段落だと認識できるから間を適当に開けてくれるのでした。

そして、em要素・strong要素・b要素・i要素・s要素・u要素もそれぞれこれまで解説してきたような意味を持っています。一般に、strong要素とb要素は太字で、em要素とi要素は斜体で表示されます。しかしこれらは、昔のb要素やi要素と違い、「太字にしろ」という要素だから太字にするのではなく、「重要」などの意味からブラウザが判断して、「これは太字にすべきだ」と判断して太字にするのです(太字以外にもさせることができますが、これの説明はだいぶあとです)。

昔のb要素やi要素などでは、「なぜ太字や斜体にするのか」ということをブラウザは理解できません。対して、strong要素などでは、ブラウザがその意味を理解して太字にしているのです。これが大きな違いです。

つまり、HTMLで見栄えを記述してはいけないのです。これこそがHTMLの理念です。