こんにちは！
フロントエンドエンジニアのあまんちゅです。
「HTMLってなんとなく分かってるけど、タグの使い分けまでは自信ないな……」そんな方に向けて、これまで数回にわたってHTMLタグの基本を紹介してきました。
今回はその最終回として、“テキストの装飾や意味づけ”に関わるタグをおさらいしていきます！
初心者のあなたも、ベテランだけど復習したいあなたも、良かったら最後まで読んでいただけると嬉しいです。
また、これまで書いた記事を記載いたしますので、気になるものがあればぜひご覧ください。
【初心者向け】HTMLについておさらいしてみた【基礎編】
【初心者向け】HTMLについておさらいしてみた【テーブル、リスト、メディア関連タグ編】
【初心者向け】HTMLについておさらいしてみた【フォーム関連タグ編】
【初心者向け】HTMLについておさらいしてみた【ドキュメント構造編】
INDEX
今回紹介するタグの機能
今回は、テキストの意味を正確に伝えるための装飾・表現タグについて紹介していきます。
「テキストの装飾」というと見た目だけの話に思えるかもしれませんが、実はこれらのタグには重要な意味があります。適切なテキスト装飾・表現タグを使用することで、スクリーンリーダーなどの支援技術がテキストの意味を正確に理解し、検索エンジンもコンテンツの構造を把握しやすくなります。
今回紹介するタグを使いこなせるようになると、より意味のあるWebサイトを作ることができるのでしっかり覚えておきたいですね！
- ruby、rt、rpタグ：日本語の読み方（ルビ）を表示する
- sup、subタグ：上付き・下付き文字を表現する
- 特殊文字：HTMLで使える特殊な文字表現
- q、blockquote、citeタグ：引用文や出典を明確に示す
- mark、abbrタグ：重要な箇所や略語をマークアップする
- ins、del、sタグ：テキストの変更履歴や状態を表現する
- wbrタグ：レスポンシブデザインでの改行制御
それでは、実際の使用例を交えながら一つずつ詳しく見ていきましょう！
読み方や発音を表現するタグ
ruby、rt、rpタグ – 日本語の読み方（ルビ）
日本語のWebサイトを作る際に特に重要なのが、このrubyタグです。漢字の読み方を表示したり、外国語の発音を示したりする際に使用します。
ポイント：
- rubyタグで全体を囲む
- rtタグでルビ（読み方）を記述
- rpタグは古いブラウザでの代替表示用（現在はほぼ不要）
- 複雑な読み方の場合は、複数のrt要素を使用可能
- 固有名詞や専門用語で読み方が分からない場合に特に有効
<!-- 基本的な使用例 -->
<p><ruby>漢字<rt>かんじ</rt></ruby>は日本語の重要な要素です。</p>
<!-- 会社名や人名での使用例 -->
<p>弊社の<ruby>田中太郎<rt>たなか たろう</rt></ruby>が担当いたします。</p>
<!-- 外国語の発音表示 -->
<p><ruby>Hello<rt>ハロー</rt></ruby>と挨拶しました。</p>
<!-- 専門用語での使用例 -->
<p><ruby>CSS<rt>シーエスエス</rt></ruby>でスタイルを定義します。</p>
私も普段あまりrubyタグを使う機会は少ないのですが、これを機に活用してみたくなりました！
上付き・下付き文字で表現を豊かに
sup、subタグ – 数式や化学式に必須
理系のコンテンツを扱う場合や、商標表示、脚注などで必要になるのが上付き・下付き文字です。CSSで見た目を調整するだけでなく、意味を正確に伝えることができます。
ポイント：
- 数学の式や化学式で頻繁に使用
- 商標表示（™、®）や脚注番号にも使用
- 単純な見た目の調整ではなく、意味のある上付き・下付きに使用
- スクリーンリーダーが適切に読み上げてくれる
<!-- 数学の公式 -->
<p>円の面積を求める公式：S = πr<sup>2</sup></p>
<p>ピタゴラスの定理：a<sup>2</sup> + b<sup>2</sup> = c<sup>2</sup></p>
<!-- 化学式 -->
<p>水の分子式：H<sub>2</sub>O</p>
<p>二酸化炭素：CO<sub>2</sub></p>
<p>硫酸：H<sub>2</sub>SO<sub>4</sub></p>
<!-- 商標や脚注 -->
<p>iPhone<sup>®</sup>は Apple Inc. の商標です。</p>
<p>HTML5は2014年に勧告されました<sup>1</sup>。</p>
<!-- 数学の底 -->
<p>常用対数：log<sub>10</sub>x</p>
<p>自然対数：log<sub>e</sub>x または ln x</p>
特殊文字で表現力をアップ
HTMLでは、直接入力できない文字や、HTMLの構文と競合する文字を表現するために特殊文字（エンティティ）を使用します。これを知っているかどうかで、表現の幅が大きく変わります！
覚えておきたい特殊文字：
<!-- HTMLの予約文字（これは絶対覚えておこう！） -->
< <!-- < （小なり記号） -->
> <!-- > （大なり記号） -->
& <!-- & （アンパサンド） -->
" <!-- " （ダブルクォート） -->
<!-- 空白文字（レイアウト調整に便利） -->
<!-- 改行されない空白 -->
  <!-- 半角空白 -->
  <!-- 全角空白 -->
<!-- よく使う記号 -->
© <!-- © （著作権記号） -->
® <!-- ® （登録商標） -->
™ <!-- ™ （商標） -->
… <!-- … （三点リーダー） -->
<!-- 数学記号 -->
× <!-- × （掛ける） -->
÷ <!-- ÷ （割る） -->
± <!-- ± （プラスマイナス） -->
≤ <!-- ≤ （以下） -->
≥ <!-- ≥ （以上） -->実際の使用例：
<!-- HTMLタグの説明 -->
<p>HTMLタグは<タグ名>のように記述します。</p>
<!-- 著作権表示 -->
<p>© 2025 サンプル株式会社 All rights reserved.</p>
<!-- 価格表示 -->
<p>価格：1,000円 × 2個 = 2,000円</p>
<!-- 省略表現 -->
<p>詳細については…後日お知らせいたします。</p>
最初は大変かもしれませんが、よく使うものから少しずつ覚えていきましょう！特に<や>は、HTMLタグの説明をするときに必須なので覚えておきたいですね☝️
引用を正しく表現するタグ
ブログ記事や技術文書では、他の文献からの引用が頻繁にあります。適切な引用タグを使うことで、オリジナルコンテンツと引用部分を明確に区別できます。
qタグ – 短い引用文に
文章の中に短い引用を含める場合に使用します。自動的に引用符が追加されるので便利です。
ポイント：
- 自動的に引用符が追加される（日本語環境では「」、英語環境では””）
- cite属性で引用元のURLを指定可能
- 長い引用にはblockquoteタグを使用
- インライン要素なので文章の途中で使用できる
<!-- 基本的な使用例 -->
<p>彼は<q>明日は必ず晴れるでしょう</q>と自信を持って言いました。</p>
<!-- 有名な格言の引用 -->
<p>よく言われるように<q cite="https://example.com/proverbs">継続は力なり</q>という言葉があります。</p>
<!-- 技術文書での使用例 -->
<p>HTML仕様書では<q>すべての要素は適切に閉じられるべきである</q>と記載されています。</p>blockquoteタグ – 長い引用文やブロック引用に
段落レベルの長い引用や、独立したブロックとして引用を表示したい場合に使用します。
ポイント：
- 段落レベルの引用に使用
- 通常はインデントされて表示される
- cite属性で引用元のURLを指定
- 引用元の明示にはciteタグと組み合わせることが多い
<blockquote cite="https://www.w3.org/WAI/WCAG21/Understanding/">
<p>ウェブアクセシビリティとは、年齢や能力、状況に関係なく、すべての人がウェブサイトを利用できることを意味します。適切に設計・開発されたウェブサイトは、より多くの人々がウェブを利用し、貢献することを可能にします。</p>
</blockquote>
<cite>出典: WCAG 2.1 Understanding Documents</cite>
<!-- ブログ記事での使用例 -->
<blockquote>
<p>プログラミングを学ぶ最良の方法は、実際にコードを書くことです。理論だけでは身につかないスキルも、実践を通じて自然と習得できます。</p>
</blockquote>
<cite>—— プログラミング入門書より</cite>citeタグ – 作品タイトルや出典の明示
書籍、映画、ウェブサイトなどの作品タイトルや引用元を明示するために使用します。
ポイント：
- 書籍、映画、音楽、ウェブサイトなどの作品タイトルに使用
- 人名には使用しない
- 多くのブラウザで斜体で表示される
- 引用元を明確にすることでSEO的にも有効
<!-- 書籍の引用 -->
<p><cite>リーダブルコード</cite>は、プログラマー必読の書籍です。</p>
<!-- 映画やドラマの引用 -->
<p>スタジオジブリの<cite>となりのトトロ</cite>は1988年に公開されました。</p>
<!-- ウェブサイトやドキュメントの引用 -->
<p>この情報は<cite>MDN Web Docs</cite>から引用しました。</p>
<p><cite>HTML Living Standard</cite>では、最新のHTML仕様が定義されています。</p>
技術ブログを書く際は、引用元を明確にすることがとても重要です。適切な引用タグを使うことで、読者にとっても検索エンジンにとっても分かりやすいコンテンツになります！
テキストの状態や意味を表現するタグ
markタグ – 重要箇所のハイライト
検索結果での一致部分や、文書内での重要な参照箇所を視覚的に強調したい場合に使用します。
ポイント：
- 検索結果での一致部分の表示
- 文書内での重要な参照箇所の表示
- 通常は黄色い背景で表示される
- 単純な装飾目的ではなく、意味のあるハイライトに使用
<!-- 検索結果での使用例 -->
<p>検索キーワード「<mark>HTML</mark>」に関する結果を表示しています。</p>
<!-- 重要なポイントの強調 -->
<p>セキュリティ対策では、<mark>入力値の検証</mark>が最も重要です。</p>
<!-- 変更箇所の強調 -->
<p>今回のアップデートで<mark>パフォーマンスが30%向上</mark>しました。</p>
abbrタグ – 略語や頭字語の説明
専門用語や略語が多いIT分野では特に重要なタグです。正式名称をtitle属性に入れることで、アクセシビリティが向上します。
ポイント：
- title属性で正式名称を指定
- マウスオーバーでツールチップが表示される
- スクリーンリーダーが正式名称を読み上げてくれる
- 通常は点線の下線が表示される
<!-- IT用語の説明 -->
<p><abbr title="HyperText Markup Language">HTML</abbr>は、ウェブページの構造を定義する言語です。</p>
<p><abbr title="Cascading Style Sheets">CSS</abbr>で見た目を整え、<abbr title="JavaScript">JS</abbr>で動的な機能を追加します。</p>
<!-- 組織名の説明 -->
<p><abbr title="World Wide Web Consortium">W3C</abbr>がWeb標準を策定しています。</p>
<!-- 技術用語の説明 -->
<p><abbr title="Application Programming Interface">API</abbr>を使ってデータを取得します。</p>
<p><abbr title="Search Engine Optimization">SEO</abbr>対策は重要です。</p>
ins、del、sタグ – 文書の変更履歴と状態
ドキュメントの変更履歴を表現したり、価格変更などの情報を明確に示したりする際に使用します。これらのタグは見た目は似ていますが、意味が異なるので注意が必要です。
insタグ – 追加されたテキスト
ポイント：
- 文書に追加された内容を示す
- datetime属性で追加日時を指定可能
- 通常は下線付きで表示される
- 変更履歴を明確にできる
delタグ – 削除されたテキスト
ポイント：
- 文書から削除された内容を示す
- insタグと対で使用されることが多い
- 通常は取り消し線で表示される
- datetime属性で削除日時を指定可能
sタグ – 正確でない・関連性がない情報
ポイント：
- delタグとは異なり、文書の変更履歴ではない
- 価格変更や期限切れ情報などに使用
- 見た目は取り消し線だが、意味が異なる
<!-- 価格の変更履歴 -->
<p>商品価格：<del datetime="2025-01-10">2,000円</del> <ins datetime="2025-01-15">1,800円</ins></p>
<!-- セール情報（sタグの使用例） -->
<p>定価：<s>3,000円</s> 特価：2,400円</p>
<!-- 文書の変更履歴 -->
<p>開催日時：<del>1月20日（金）</del> <ins>1月25日（水）</ins>に変更になりました。</p>
<!-- 募集終了の表示 -->
<p><s>この求人の募集は終了しました。</s></p>
レスポンシブデザインでの改行制御
wbrタグ – 改行可能位置の指定
レスポンシブWebデザインが当たり前になった現在、画面サイズに応じて適切な位置で改行できるようにするwbrタグは、意外と重要な役割を果たします。
ポイント：
- 長いURLや単語の途中で改行可能な位置を指定
- 空要素なので閉じタグ不要
- 通常は表示されないが、改行が必要な時のみ効果を発揮
- スマートフォン表示で特に有効
- 日本語では単語の区切りで使用
<!-- 長いURLの改行制御 -->
<p>詳細については<wbr>https://example.com/<wbr>very-long-page-name/<wbr>documentation/<wbr>html-tags<wbr>?section=text-decoration<wbr>&subsection=ruby-tags をご覧ください。</p>
<!-- 長い英単語の改行制御 -->
<p>Pneumono<wbr>ultra<wbr>microscopic<wbr>silico<wbr>volcano<wbr>coniosis</p>
<!-- 日本語での使用例 -->
<p>フロントエンド<wbr>エンジニア<wbr>向け<wbr>プログラミング<wbr>学習<wbr>コンテンツ</p>
<!-- メールアドレスの改行制御 -->
<p>お問い合わせ：<wbr>very-long-email-address<wbr>@<wbr>example-company<wbr>.co.jp</p>wbrタグは地味ですが、スマートフォン対応では本当に重要です！長いURLが画面からはみ出してしまう問題を解決できます。また、wbrタグを戦略的に配置することで、重要な単語や会社名などが不適切な位置で分割されるのを防ぐこともできます☝️
まとめ
今回は、テキストの装飾・表現に関するHTMLタグについて詳しく紹介しました。
これらのタグは単なる見た目の装飾ではなく、テキストの意味を正確に伝える重要な役割を持っています。特に、アクセシビリティや国際化を考慮したWebサイト作りには欠かせないタグばかりなので、それぞれのタグの特性を考えながら、用途に沿って使っていきたいと思いました。
私自身、今回改めて調べてみて、wbrタグの便利さを再認識したり、引用タグの使い分けを整理できたりしました💡 みなさんも、ぜひ実際にコーディングする際に使ってみてください！
最後に、今回紹介したタグのまとめです。
| タグ | 説明 |
|---|---|
| <ruby> | ルビ（読み方）を表示するためのコンテナ |
| <rt> | ルビの内容を定義 |
| <rp> | ルビ非対応ブラウザでの代替表示（現在はほぼ不要） |
| <sup> | 上付き文字を表現（数式、商標、脚注など） |
| <sub> | 下付き文字を表現（化学式、数学の底など） |
| <q> | 短い引用文（インライン引用） |
| <blockquote> | 長い引用文（ブロック引用） |
| <cite> | 作品タイトルや引用元の明示 |
| <mark> | 重要箇所のハイライト表示 |
| <abbr> | 略語や頭字語の説明 |
| <ins> | 文書に挿入された（追加された）テキスト |
| <del> | 文書から削除されたテキスト |
| <s> | 正確でない・関連性がないテキスト |
| <wbr> | 改行可能な位置を指定 |
今回でいったんHTMLタグ紹介シリーズは終わりです！他にも様々な記事がありますので、良かったら他の記事もご覧ください！今回の内容が、みなさんのHTMLライティングの一歩につながれば嬉しいです😊
