つくばホームページ制作アドワークス｜茨城県土浦市

<ruby>…… ルビをふる

<ruby>・<rt>・<rp>は ルビをふる際に使用します。

<rt>はRuby Textの略でルビのテキストを、<rp>はRuby Parenthesesの略でルビのテキストを囲む括弧等の記号を、それぞれ指定します。<rt>と<rp>は、<ruby>～</ruby>の中で子要素として使用します。

<rp>～</rp>の内容は、<ruby>タグに対応したブラウザでは無視されます。<ruby>タグに対応していないブラウザでは、　漢(かん)字(じ)　のように表示されます。

■HTML4.01からHTML5へのバージョンアップによる変更点

<ruby>・<rt>・<rp>は、すでにInternet Explorer5以降で先行採用されていますが、HTML5では標準仕様となります。ただし、Ruby Baseの略でルビをふる対象となる文字本体を示す<rb>は採用されない予定です。HTML5では、<rb>タグは省略して<ruby>～</ruby>内に直接ルビベースを記述します。

■HTML5での使用例

[html]
<ruby>
漢<rt>かん</rt>
字<rt>じ</rt>
</ruby><br>

<ruby>
漢<rp>(</rp><rt>かん</rt><rp>)</rp>
字<rp>(</rp><rt>じ</rt><rp>)</rp>
</ruby>
[/html]

参考：http://www.htmq.com/html5/ruby.shtml

<mark>…… 文書内の該当テキストを目立たせる

<mark>タグは、文書内の該当テキストをハイライトして目立たせる際に使用します。<strong>や<em>のようにその部分を強調することが目的ではなく、ユーザーが参照しやすいように目立たせることが目的です。

<mark>は、作者が重要と考えている箇所ではなく、ユーザーの操作に関連している箇所に使用します。例えば、検索結果画面で文書中の検索ワード部分をハイライト表示する場合などに適しています。

■HTML4.01からHTML5へのバージョンアップによる変更点

mark要素は、HTML5から新たに追加された要素です。

■HTML5での使用例

[html]
<h2><em>機能</em> の検索結果</h2>
<p>
HTML5では、これまでのHTML 4と同じようなHTML文書を作成する<mark>機能</mark>が改良されているのに加えて、ウェブアプリケーションを開発するための様々な仕様が新たに盛り込まれています。 HTML5が普及した際には、今までプラグインなどのHTML以外の技術を併用しないと実現できなかった<mark>機能</mark>のいくつかが、標準のHTMLやJavaScriptで比較的シンプルに実現できるようになる予定です。
</p>
[/html]

参考：http://www.htmq.com/html5/mark.shtml

<b>…… 文書内のキーワードや製品名など、他と区別したいテキストを表す

<b>タグは、文書内のキーワードや製品名など、他と区別したいテキストを表す際に使用します。

一般的に印刷される際に太字となるようなテキストです。その箇所が重要であるという意味や強調する役割はありません。<b>は、他により適切な要素が存在しない場合の最終手段として使用するべきものです。

特に、見出しには<b>ではなく、<h1> – <h6>を使用してください。また、強勢する箇所を示す場合には<em>、重要性を示す場合には<strong>、テキストをハイライトして目立たせる場合には<mark>を使用します。

■HTML4.01からHTML5へのバージョンアップによる変更点

b要素は、HTML 4.01ではテキストを太字にすると定義されていましたが、HTML5では他と区別したいテキスト・印刷される際に太字となるようなテキストを表すと変更されています。

■HTML5での使用例

[html]
<p>
当軒は<b>注文の多い料理店</b>ですからどうかそこはご承知ください
</p>
[/html]

参考：http://www.htmq.com/html5/b.shtml

<i>…… 声や心の中で思ったことなど、他と区別したいテキストを表す

<i>タグは、声や心の中で思ったことなど、他と区別したいテキストを表す際に使用します。
分類学上の名称、専門用語、他言語の慣用句、思考の内容、船の名前、その他一般的に印刷される際にイタリック体となるようなテキストです。
その箇所が重要であるという意味や強調する役割はありません。

<i>を使用する際には、より適切な要素がないか検討することが推奨されています。
例えば、強勢する箇所を示す場合には<em>、用語の使用であることを定義する場合には<dfn>のほうが、<i>よりふさわしいでしょう。

■HTML4.01からHTML5へのバージョンアップによる変更点

i要素は、HTML 4.01ではテキストを斜体（イタリック）にすると定義されていましたが、HTML5では他と区別したいテキスト・印刷される際にイタリック体となるようなテキストを表すと変更されています。

■HTML5での使用例

[html]
<p>
ジョバンニは思わずかけよって博士の前に立って、
<i>ぼくはカムパネルラの行った方を知っていますぼくはカムパネルラといっしょに歩いていたのです</i>
と云おうとしましたがもうのどがつまって何とも云えませんでした。
</p>
[/html]

参考：http://www.htmq.com/html5/i.shtml

<sup>…… 上付き文字を表示する

<sup>タグはsuperscriptの略で、上付き文字を表す際に使用します。

<sup>は、特定の意味を持つ表記方法のために使用する要素です。単に文字が上付きになるという表示の見栄えを目的として<sup>を使用してはいけません。この要素が無ければ意味が変わってしまう場合にのみ使用します。

数学的表現では、下付き文字や上付き文字がよく使用されます。数学のマークアップにはMathMLを使用することが推奨されていますが、精密な数学的マークアップをする必要が無ければ、<sub>や<sup>を使うことができます。

一部の言語では、略語を表す際に上付き文字が使用されることがあります。例えば、フランス語のmademoiselle（マドモワゼル 未婚の女性）はMlle、Madame（マダム 既婚女性）Mmeと略して表記されることがありますが、その略語の一部を上付き文字にするのが慣例となっています。

■HTML4.01からHTML5へのバージョンアップによる変更点

sup要素は、HTML4.01からHTML5へのバージョンアップで大きな変更はありません。

■HTML5での使用例

[html]
<var>E</var>=<var>m</var><var>c</var>²
[/html]

参考：http://www.htmq.com/html5/sup.shtml

<sub>…… 下付き文字を表示する

<sub>タグはsubscriptの略で、下付き文字を表す際に使用します。

<sub>は、特定の意味を持つ表記方法のために使用する要素です。単に文字が下付きになるという表示の見栄えを目的として<sub>を使用してはいけません。この要素が無ければ意味が変わってしまう場合にのみ使用します。

数学的表現では、下付き文字や上付き文字がよく使用されます。数学のマークアップにはMathMLを使用することが推奨されていますが、精密な数学的マークアップをする必要が無ければ、<sub>や<sup>を使うことができます。

変数に下付き文字を持たせる際には、<var>～</var>の中に<sub>を配置します。例えば、X1,X2,X3,…という具合に変数に番号を振って数字部分だけを下付きにしたい場合には、<var>X₁</var>という具合にマークアップします。

■HTML4.01からHTML5へのバージョンアップによる変更点

sub要素は、HTML4.01からHTML5へのバージョンアップで大きな変更はありません。

■HTML5での使用例

[html]
f(<var>x</var>, <var>n</var>) = log₄<var>x</var>^<var>n</var>
[/html]

参考：http://www.htmq.com/html5/sub.shtml

<kbd>…… ユーザーが入力する内容であることを示す

<kbd>タグは、ユーザーが入力する内容であることを示す際に使用します。
主にキーボード入力ですが、音声コマンドなどの他の方法による入力を表すために使用されることもあるでしょう。

■HTML4.01からHTML5へのバージョンアップによる変更点

kbd要素は、HTML5ではsamp要素との入れ子関係や、kbd要素同士を入れ子にするかどうかで、以下のように意味が定義されています。

<samp>～</samp>の中に<kbd>を配置した場合には、システムによって返された入力内容を表します。<kbd>～</kbd>の中に<samp>を配置した場合には、呼び出しメニューなどのシステム出力からの入力内容を表します。 <kbd>～</kbd>の中にさらに<kbd>を配置した場合には、キーボードのキーなどの入力の一単位を表します。

例えば、ユーザーにShiftという文字列を入力してもらいたい場合と、[Shift]キーを押してもらいたい場合と、[S][h][i][f][t]という５つのキーを順に押してもらいたい場合は、<kbd>タグの入れ子の仕方でマークアップし分けることができます。

■HTML5での使用例

[html]
<p>このウィンドウを閉じるには、
<kbd><kbd>ALT</kbd>+<kbd>F4</kbd></kbd>
を押してください。</p>
[/html]

参考：http://www.htmq.com/html5/kbd.shtml

<samp>…… プログラムによる出力結果のサンプルであることを示す

<samp>タグは、プログラムやコンピュータシステムによる出力結果のサンプルであることを示す際に使用します。

例えば、プログラムを実行した際の何らかの出力結果の例や、コンピュータが返す何らかのメッセージの例などです。

■HTML4.01からHTML5へのバージョンアップによる変更点

samp要素は、HTML4.01からHTML5へのバージョンアップで大きな変更はありません。

■HTML5での使用例

[html]
<p>コンピュータの画面には、
<samp>このプログラムは不正な処理を行ったので強制終了されます。</samp>
って表示されているんですけど、作成したデータは消えちゃうんですか？</p>
[/html]

参考：http://www.htmq.com/html5/samp.shtml

<var>…… 変数であることを示す

<var>タグはvariableの略で、変数であることを示す際に使用します。数式やプログラムの中の変数そのものや、文章中に変数名が出てくる場合などに使用できます。

■HTML4.01からHTML5へのバージョンアップによる変更点

var要素は、HTML4.01からHTML5へのバージョンアップで大きな変更はありません。

■HTML5での使用例

[html]
<p>
鶴が<var>x</var>羽と亀が<var>y</var>匹います。頭の数はあわせて8で足の数はあわせて26です。<var>x</var>と<var>y</var>の値を求めなさい。
</p>
[/html]

参考：http://www.htmq.com/html5/var.shtml

<code>…… プログラムなどのコードであることを示す

<code>タグは、プログラムなどのコードであることを示す際に使用します。例えば、HTMLやXMLの要素名や属性名、ファイル名、プログラムなどのコンピューターが認識するであろう文字列です。

一般的なブラウザでは、等幅フォントで表示されます。

■HTML4.01からHTML5へのバージョンアップによる変更点

code要素は、HTML4.01からHTML5へのバージョンアップで大きな変更はありません。

■HTML5での使用例

[html]
<pre><code class="language-pascal">var i: Integer;
begin
i := 1;
end.</code></pre>
[/html]

参考：http://www.htmq.com/html5/code.shtml