（ちょっとメモ） u要素と s要素は復活（廃止ではありません）

HTML5の策定中に廃止予定にされていた <s>要素と <u>要素ですが、2014年10月にHTML5が勧告されてみると、復活しているではありませんか！
てっきり無くなるもんだと思っていました（笑）

★ご指摘くださった香川うどん県の岩田様。ありがとうございます！

HTML5 での <s>要素 <u>要素は、以前とは別の役割を定義されていますので、今回それをまとめてみました。

ちなみに、以前（HTML4, XHTML1）の役割は、
<s>要素は strike-through（取り消し線）の略で、そのままズバリ取り消し線を引くための要素、<u>要素は underline の略で、アンダーラインを引くための要素とされていました。

使用する要素	<s> 〜 </s> <u> 〜 </u>

属性	<s> <u> ともにグローバル属性のみ

本日のINDEX

1. <s>要素は「今は正確ではないテキスト」を表す
   1. <s>要素と del要素の違い
2. <u>要素は「発音しない（できない）テキストの範囲」を表す
   1. <u>要素はほとんどの場合「他の要素が適切」だって

● 2017年11月：記事内の W3C へのリンクを「HTML 5.1 - 2nd Edition」に書き換えました。

● 2015年2月：この記事は2015年2月に書いたものですが、関連記事リンクでの見やすさ、内容との兼ね合いのため、日付を2011年9月に操作しています。ご了承ください。

<s>要素は「今は正確ではないテキスト」を表す

テキストを<s>と</s>で囲んで使います。
<s>要素でテキストを囲んでみたら
この↑ように取り消し線が引かれて、<del>要素とそっくりのデフォルトスタイルになります。
ちなみに、こちらが→ del要素でテキストを囲んだプレビュー

<s>要素は、単に取り消し線が引かれるだけの要素でなく、HTML5では新しい役割になりました。
W3Cでは以下のように定義されています。

The s element represents contents that are no longer accurate or no longer relevant.
（<s>要素は、もう正確ではない、または、もう関連性がないコンテンツを表します。）

ん〜？　もう正確でない、もう関連性が無い、の「もう（no longer）」とは？
del要素と比較しながら考えてみました。

<s>要素と del要素の違い

del要素は「削除」されたことを表します。「削除」というからにはかなり強い意味ですよね。

<s>要素は、それより弱い意味で、削除するほどじゃないけど、今はもう正確でない、今の時点では関係ないという取り消し方のようです。
W3Cの<s>要素のサンプルソースを参考に、サンプルを作ってみました。

希望小売価格：1本400円

期間限定価格：今なら1本300円でお買い得！！

HTMLはこちら。

<p><s>希望小売価格：1本400円</s></p>
<p>期間限定価格：<strong>今なら1本300円でお買い得！！</strong></p>

1行目の「希望小売価格：1本400円」を <s>要素で囲んで「今はこれじゃないよ」と示しています。
ついでに「今なら1本300円でお買い得！！」をstrong要素で重要度を出してます。
<s>要素は「今はこれじゃないから取り消しとくけど、いつかこれに戻るかもよ」くらいの軽いノリのようですね。

これが del要素だと、もっとガッツリ取り消されます。

希望小売価格：1本400円

改訂希望小売価格：1本432円
原料価格高騰などの諸事情により、価格を改定しました。ご了承ください。

HTMLはこちら。

<p><del datetime="2015-02-18T14:30:00+09:00">希望小売価格：1本400円</del></p>
<p><ins datetime="2015-02-18T14:30:00+09:00"><strong>改訂希望小売価格：1本432円</strong><br />
原料価格高騰などの諸事情により、価格を改定しました。ご了承ください。</ins></p>

del要素で前の希望小売価格を囲んで「削除」し、in<s>要素で新しく追加された情報を表しています。
del要素は Delete の略。削除を表します。もう絶対正確ではないと言うくらい強い意味。もう戻らない。これが 軽い取り消しの <s>要素との違いだと思います。

違いはもう１つ。
del要素は「datetime属性」で削除された日時を明記したり、「cite属性」で参照サイトを記述したりできます。<s>要素はグローバル属性だけなので、これらの属性は使えません。やっぱ軽いね。

<u>要素は「発音しない（できない）テキストの範囲」を表す

<u>要素でテキストを囲むと、アンダーラインが引かれます。in<s>要素とそっくりですね。
テキストを <u>要素で囲んでみた例

この定義がね〜、W3Cの定義をさらっと読むだけだと解りにくいんですよ。
W3Cでは以下のように定義されています。

The u element represents a span of text with an unarticulated, though explicitly rendered, non-textual annotation, such as labeling the text as being a proper name in Chinese text (a Chinese proper name mark), or labeling the text as being misspelt.
（ざっくりの訳です↓）
「<u>要素は、明示的にレンダリングされているがテキスト化されてない「非テキスト」の範囲を表す。たとえば中国語の固有名詞のテキストや、スペルミスしたテキストなど」

スペルミスがあって、表示したけどちゃんと読めない（発音できない）テキストとか、中国語などの固有名詞なので訳さずにそのまま表示したけどちゃんと読めない（発音できない）テキストのことだと思う。
「ここは発音しない（できない）箇所ですよ」と範囲を示すのでしょう。
なので <u>要素って、音声ブラウザなどにも関連してるかと思います。

サンプルです。

Hello と書くべきところを Helo と書いてしまった！

Bĕijīng is the capital of China.

HTMLはこちら。

<p>Hello と書くべきところを <u>Helo</u> と書いてしまった！</p>
<p><u>Bĕijīng</u> is the capital of China.</p>

スペルミスの「Helo」は、表示はされますが意味のある言葉として読めない=発音できないので <u>要素を使っています。

「Bĕijīng」は北京のピン音表示。ピン音（ピンイン）とは中国語の発音をラテン文字で表すものだそうです。北京くらいなら有名だから読めるけど、知らない地名とか人の名前だったら読めないよね。その発音できない範囲を示すのが <u>要素らしい。

<u>要素はほとんどの場合「他の要素が適切」だって

日本語でも、難解で すぐに読めない漢字があります。珍しい地名とか、キラキラネームとか。でも、この場合は <u>要素を使うのではなく、ruby要素を使うべきなんだって。

W3Cは「ほとんどの場合で、他の要素のほうが適切」（In most cases, another element is likely to be more appropriate: ）と言っています。（消極的か？　笑）
たぶん「アンダーラインを引くためだけに安易に使うな」と釘を刺しているのでしょう。（以前はそんな役割の要素だったので）

<u>要素より他の要素のほうが適切とされる例

• 明示的なテキスト注記（読みがなとか）を付けたいなら ruby要素を使う
• 強調したいなら em要素
• キーワードやキーフレーズなら、文脈に応じて b要素か mark要素
• 作品タイトルなら cite要素
• 船の名前なら i要素

またW3Cは、ユーザが「リンク」だと勘違いしそうな場所で使わないでと注意しています。<u>要素はデフォルトスタイルでアンダーラインがつくので。

<u>要素を使うチャンスって私にはあんまりなさそうです。
外国語サイトならよく使うかもしれないけど、日本語サイトでは、ルビを付ければ たいがい解決しそう。

次回予告

さて次回は「引用文」を表す<q>要素を使ってみましょう。
これは、他の人が書いた本やウェブサイトなどのテキストを「引用して表示する時」に使います。