HTML・CSS：著作権の明記や注釈などに使うsmallタグ、プログラムの出力内容をサンプルとして提示するsampタグ、上付き文字を表示するsupタグ、下付き文字を表示するsubタグ、囲った場所に黄色いマーカーをmarkタグ、文字の読む順番を変更するbdoタグ、右から読む言語と左から読む言語が混ざっている時に良い感じに調整してくれるbdiタグ

<small>タグとは

<small>タグとは、著作権の明記や注釈などを表示したいときに使用します。実際に表示してみるとこんな感じになります。

ご覧になるとすぐにわかると思いますが、自然と文字が小さく表示されます。

<small>タグの使い方

<small>タグの使い方は簡単で、注釈などにしたい部分を<small>と</small>で囲うだけになります。

<dl>
 <dt>ワンルーム
 <dd>10000円 <small>朝食を含んだ金額ですが、お風呂は有料です</small>
 <dt>ダブルルーム
 <dd>30000円 <small>朝食はありませんが、露天風呂はついています</small>
</dl>

<small>タグの注意点

<small>タグは冒頭でもお伝えした通り著作権の明記や注釈などを表示したいときに使用します。文字が小さく表示されるからと言って、小さな文字で表示させたい部分にこのタグを適用するのは誤りです。もしも文字を小さく表示したいなら、ＣＳＳを使いましょう。

<samp>タグとは

<samp>タグの<samp>とはサンプルの略で、プログラムの出力内容をサンプルとして出力するためのタグになります。

一体何の話？何に使うの？ってお思いのことと思います。今見ている画面はいちもんじのＨＰで、デフォルトのフォントは「メイリオ」にしています。ですが、windowsやmacからダイアログが表示される際の文字ってどんなフォントでした？少なくともメイリオではなかったと思います。
それらの文字でどんなふうに、プログラミングの結果が表示されるのかをサンプルとして表現するのに使うのがこのタグです。
例えばJavascriptの表示結果を再現するでもいいです。そんな感じに使用します。（javascriptの解説記事を作るときにちょっとシャレオツになりそう(笑)）

<samp>タグの使い方

<samp>タグの使い方は簡単で、サンプルとして表示させたい部分を<samp>と</samp>で囲むだけでOKです。↓

<p>これはプログラムの<samp>出力のサンプル</samp>です</p>

<sup>タグとは

<sup>タグとは、上付き文字を表します。これは誰しもが必ず見たことのあるものです。いちもんじはこれを見ると頭が痛くなってきます。これです。

これの2乗の部分です。

<sup>タグの使い方

<sup>タグを使えば文字の右上に小さな文字を付けることが可能ですが、単に文字を右上に小さく表示したいだけであればこのタグを使わずにCSSでデザインするようにしましょう。このタグは数式など、どうしても右上に付けなければならないとき等にきちんとした理由で使わなければなりません。（じゃないとページの評価下がっちゃうかも知れません…。）
具体的な使い方はとても簡単で、右上に小さく表示させたい文字を^とで囲んであげましょう。

a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup>

<sub>タグとは

<sub>タグとは、下付き文字を表示します。下付き文字って使う機会あるっけ？とお思いでしょう。いちもんじもそれ思いました。それがありましたありました、誰しもが見たことのある例が。これです。↓

これも頭が痛くなってきますね…もはや持病…。

<sub>タグの使い方

<sub>タグを使えば文字は小さく右下の方につきますが、もしも意味もなくレイアウト的にそうしたいだけなのであればCSSで指定してあげましょう。このタグは右下のものにしっかりと意味を持つ場合にのみ使用しましょう。
具体的な使い方はとても簡単で、右下に表示させたい文字を_とタグで囲ってあげるだけでOKです。

CO<sub>2</sub>

<mark>タグとは

<mark>タグとは、文章にマーカーを付けることが出来ます。学生時代、先生に「ここ大事だぞ～」と言われた部分に赤いマーカーなどで線を引いたりしませんでしたか？それと同じことが可能です。

<mark>タグの注意点

<mark>タグは、読者に対してここが読むべきポイントなんだよ～ってことを分かりやすく伝える為のタグであって、意味合い的に重要さを持たせるものではありません。（※SEO対策で、ここに重点を置きたいんだよ～と伝えるのには不向き）意味合い的に重要さを持たせたいのであれば<strong>タグを使いましょう。

<mark>タグの使い方

<mark>タグの使い方は簡単で、マーカーを付けたい部分を<mark>と</mark>で囲ってあげるだけです。

<mark>ここが大事</mark>

このように文字にマーカーを引くことが可能です。

マーカーの装飾の変更

マーカーの色を変えたいときはCSSで変更してあげましょう。

<mark class="mark1">ここが大事</mark>

mark.mark1{
  background-color:red;
  color:white;
}

私がいつも使用しているような文字の下の方のみにマーカーを引くことも可能です。↓

<mark class="mark3">ここが大事</mark>

mark.mark3{
background: linear-gradient(transparent 40%, yellow 80%);
}

<bdo>タグとは

<bdo>タグとはbi-directional override（バイディレクショナルオーバーライド）の略で、文字の方向の上書のことを言います。つまり、文字の読む順番を変更するタグです。日本語は左から右に向かって読みますが、アラビア語やヘブライ語は右から左に読みます。そのように複数の言語が混ざっている場合に使用します。

<bdo>タグの使い方

<bdo>タグの使い方ですが、必ず指定する必要がある属性があります。dir（directional）という属性で、これは方向を指します。

このどちらかを<bdo>タグ内で指定します。

<bdo dir="rtl">たけやぶやけたの場合は意味ない</bdo>

文法はこの通りで、<bdo>の中にdir属性を置き、＝イコールでつないで””の間にltrもしくはrtlのどちらかを記入します。

<bdi>タグとは

<bdi>タグとは、左から読む文字と右から読む文字（アラビア語やヘブライ語）が混在しているときにいい感じに見やすくしてくれるタグです。

<bdi>タグの使い方

使い方という使い方もないです。読む方向が混在している文のところに<bdi>を付ければOKです。

<ul>
 <li>あなたは日本人なので <bdi>文字は左から読みます</bdi>。誕生日は7月の5日です。
 <li>あなたはアラブ人なので <bdi>تتم قراءة الأحرف من اليمين</bdi>عيد ميلادي هو 5 يوليو.
</ul>

まあしかし…こんな機会もあまりないだろうし、このタグはあまり使うことがないかな…。