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

最終更新日:2015年02月18日  (初回投稿日:2011年09月27日)

HTML5の策定中に廃止予定にされていた s要素と u要素ですが、2014年10月28日にW3Cにより正式にHTML5が勧告されてみると、復活しているではありませんか!
てっきり無くなるもんだと思っていました(笑)

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

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

ご指摘くださった香川うどん県の岩田様。ありがとうございます! 今後ともよろしくお願いいたします♪
認定試験がんばってくださいね。

使用する要素 <s> 〜 </s>
<u> 〜 </u>
属性 <s> <u> ともにグローバル属性のみ
本日のINDEX
  1. s要素は「今は正確ではないテキスト」を表す
    1. s要素と del要素の違い
  2. u要素は「発音しない(できない?)テキストの範囲」を表す
    1. u要素はほとんどの場合他の要素が適切だとか

注記:
この記事は2015年2月に書いたものですが、関連記事リンクでの見やすさ、内容との兼ね合いのため、「[26] cite要素」と「[27] q要素」のあいだに納まるように日付を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.

訳文は以下のとおりです。こちらはHTML5.jp様から引用させていただきました。

s 要素は、もう正確ではない、または、もう関連性がないコンテンツを表します。

ん〜? もう正確でない、もう関連性が無い、の「もう(no longer)」ってどういうこと?
del要素と比較しながら考えてみました。

● s要素と del要素の違い

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

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

希望小売価格:1本400円

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

ソースはこちらです

<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円
原料価格高騰などの諸事情により、価格を改定しました。ご了承ください。

ソースはこちらです

<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要素で前の希望小売価格を囲んで「削除」し、ins要素で新しく追加された情報を表しています。
(値下げした例でも良かったんですがね。こっちのほうがリアルなので。笑)
del要素は Delete の略。削除を表します。もう絶対正確ではないと言うくらい強い意味。もう戻らないぞと。これが 軽い取り消しの s要素との違いだと思います。

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

u要素は「発音しない(できない?)テキストの範囲」を表す

u要素でテキストを囲むと、アンダーラインが引かれます。ins要素とそっくりですね。
テキストを 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.

訳文は以下のとおりです。こちらもHTML5.jp様から引用させていただきました。

u 要素は、はっきりとレンダリングされつつも発音しない非文字の注記を伴うテキストの範囲を表します。たとえば、中国語テキストで固有名詞としてそのテキストをラベル付けする場合(中国語固有名詞マーク)や、スペルミスとしてテキストをラベル付けする場合などです。

たぶんこれって、
スペルミスがあって、表示したけどちゃんと読めない(発音できない)テキストとか、中国語だけど固有名詞なので訳さずにそのまま表示したけどちゃんと読めない(発音できない)テキストのことだと思います。中国語だけでなく、ベトナム語でもアラビア語でも、知らなきゃ発音できないテキストね。
「ここは発音しない(できない)箇所ですよ」と範囲を示す
という役目かと。
なので u要素って、音声ブラウザにも関連してるのかな〜?などと思うんです。

とにかくサンプルを作ってみました。

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

Bĕijīng is the capital of China.

ソースはこちらです

<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要素を使うのはNGで、ruby要素を使うべきなんだって。

W3Cは「ほとんどの場合で、他の要素のほうが適切と言えます」と言っています。(消極的?)
たぶん「アンダーラインを引くだけのために適当に使うな」と釘を刺しているのでしょう。(以前はそんな役割の要素だったので)

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

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

またW3Cは、u要素はプレビューでアンダーラインがつくので、ユーザがリンク部分だと勘違いしそうな場所で使っちゃダメと注意しています。

だったら u要素を使うチャンスってあんまりなさそう。と思うのは私だけでしょうか...?
外国語圏ならよく使うのかもね。(日本語はルビ(読みがな)付ければ発音できちゃうし)
u要素は(s要素も)いま策定中の HTML5.1 にも入っていますので、このまま存在し続けそうです。

「u」って名前が underline を連想させ過ぎて(昔の記憶があり過ぎて)、新しい役割との連動が無いからか、私にはなんだか違和感があります。
改名すればいいのに。Cannot Pronunciation で <cnp> とか(笑)

関連記事
この記事をはてなブックマークに追加

やる気を保つためにランキングに参加しています。
応援してくださると すっごいやる気を出します! (笑)

初心者にも使いやすい(と思う)レンタルサーバー

最近よく「レンタルサーバーはどこがいい?」とご質問が来ます。
自分でも使っていてオススメなのはミニバード。管理画面がわかりやすくていい感じす。
仕事で使ってるロリポップもわかりやすい管理画面で、初めてでもすんなり使えると思います。
両方とも、なんといっても料金が安いです。初めてだとなるべく安いほうがイイですからね。

それよりちょっと料金は高いけど、高スペックでコスパが良く、信頼性も高いサーバといえば、やはりさくらのレンタルサーバと、XSERVER(エックスサーバー)だと思う。この2つは老舗でユーザーも多いので、質問する場がたくさんあり、初心者の方でもイケるだろうと思います。

レンタルサーバーは、たくさんあり過ぎて迷いますよね。近いうちに、初心者にも良さげなサーバーについて記事にまとめます。*記事をアップしたらココにもリンクを貼ります。

スポンサーリンク

コメントの投稿

スポンサーリンク
最新記事
Category
オススメの本
Links
Calendar
09 | 2017/10 | 11
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31 - - - -
Archive
RSS Link
Profile

yuki★hata

Author : yuki★hata
せめて月1回の更新をめざします~。

メールフォームはこちら

スポンサーリンク
スポンサーリンク
Copyright © ほんっとにはじめてのHTML5とCSS3 All Rights Reserved.