文字の装飾
HTMLタグには文字を装飾するタグがいくつかあります。
現代ではCSSでの装飾が一般的ですが、タグのみで直接見た目を変えられ、基本的な表現は可能です。
太字を表す（b）
文中の意味を強調するためではなく、単純に文字を太字で表示したいときに使います。
構文
<b>...</b>bタグはインライン要素で、文章の意味や重要性には関係なく文字を太くして目立たせたいときに使います。
コード例
<p>果物かごの中から<b>りんご</b>を選びました。</p>
出力例
果物かごの中からりんごを選びました。
bタグはあくまで視覚的な装飾として使い、意味情報は伴いません。
そのため、文中の重要性を伝える際にはstrongタグを使います。
斜体を表す（i）
文字を斜体で表示するのみではなく、文章中の語句が本文とは別カテゴリであることを示すために使用します。
構文
<i>...</i>
iタグはインライン要素で、学術名、外来語、作品名、擬音や心のつぶやきなど、本文とは異なるカテゴリの語句を囲む時に使います。
見た目は斜体ですが、斜体にするためだけが目的ではありません。
コード例
<p>カバ（学術名：<i>Hippopotamus amphibus</i>）は獰猛な生き物です。</p>出力例
カバ（学術名：Hippopotamus amphibus）は獰猛な生き物です。
学術名など本文とは別カテゴリの情報に使用します。
わかりにくいとは思いますが、例ではカバがどのような生き物かを説明しており、学術名はカテゴリ的には別単語という扱いのためiタグで囲みます。
スクリーンリーダーからすると意味的な強調は持たないため、強調目的の際にはemタグを使います。
日本語の文章では使用機会が少なく、「この場合はこのタグを使用する」という必須ではないため、無理に使用しなくても構いません。
そのため、見た目を斜体にしたい場合はCSSを使用することが適切です。
下線を表す（u）
文字の下に線を引くタグです。
リンクとは区別して使用します。
構文
<u>...</u>uタグはインライン要素で、情報や補足を目立たせたいときに使います。
コード例
<p>ここでは<u>JavaScript</u>を取り扱います。</p>出力例
ここではJavaScriptを取り扱います。
装飾目的のタグで意味は持ちません。
CSSでの指定が一般的ですが、HTML5以降下線を引けるようになりました。
取り消し線を表す（s）
文字に取り消し線を引くタグです。
構文
<s>...</s>sタグはインライン要素で、文章の修正や無効化された情報を示すときに使用します。
コード例
<p>現在のHTMLのバージョンは<s>HTML5</s>HTML Living Standardです。</p>出力例
現在のHTMLのバージョンはHTML5HTML Living Standardです。
意味的な強調は持ちません。
アップロード済みの記事で訂正がある場合に、訂正箇所に打ち消し線を表示するために使用することが多いです。
ハイライトを表す（mark）
文字の背景を強調表示するタグです。
構文
<mark>...</mark>markタグはインライン要素で、文中で重要な情報を目立たせる目的で使用します。
コード例
<p>HTMLには様々なタグと<mark>属性</mark>があります。</p>出力例
HTMLには様々なタグと属性があります。
装飾と意味の両方を持つタグですが、スクリーンリーダーでは反応しません。
小さい文字を表す（small）
補足や脚注の文字を小さく表示するタグです。
構文
<small>...</small>smallタグはインライン要素で、本文より目立たせたくない情報に使います。
コード例
<p>CSSはHTMLにとって非常に重要です。<small>補足情報</small></p>出力例
CSSはHTMLにとって非常に重要です。補足情報
過剰に使うと読みづらくなる場合があるため、使いどころには注意が必要です。
上付き文字（sup）
文字を上付き文字にするタグです。
構文
<sup>...</sup>supタグはインライン要素で、数式や化学式で文字の位置を調整するために使用します。
コード例
<p>この四角形の面積は200cm<sup>2</sup>です。</p>出力例
この四角形の面積は200cm2です。
スクリーンリーダーに反応しないため、使用する頻度は少ないです。
下付き文字（sub）
文字を下付き文字にするタグです。
構文
<sub>...</sub>subタグはインライン要素で、supタグ同様、数式や化学式で文字の位置を調整するために使用します。
コード例
<p>水の化学式はH<sub>2</sub>Oです。</p>出力例
水の化学式はH2Oです。
スクリーンリーダーに反応しないため、使用する頻度は少ないです。
また、supタグに比べて配置される文字の位置がベースラインを超えるため、CSSで指定する方が手間も省けて適切です。
装飾用コンテナ（span）
タグ自体は装飾を持たないタグで、HTML上では見た目は変わりません。
構文
<span>...</span>spanタグはインライン要素で、文字の一部をまとめる土台で、CSSと組み合わせることで威力を発揮します。
コード例
<p>装飾をまとめて<span>spanタグ</span>でまかなう方が便利です。</p>出力例
装飾をまとめてspanタグでまかなう方が便利です。
これまでのタグを覚えて使用しなくても、CSSと組み合わせて見せることが一般的です。
しかしそれぞれのspanタグに機能を持たせようとすると管理が煩雑になるため、自分なりにルールを取り決めて使用するようにしましょう。