6日でできる 新HTML入門｜文字の装飾
文字に意味と表情を加えることで、HTMLの文章はもっと読みやすく、もっと伝わりやすくなります。
Webページの文章は、ただ文字を並べるだけでなく、必要な部分を強調したり、用語の意味を示したり、数式や化学式のような特殊な表記を使ったりすることがあります。HTMLには、そのような文字表現を行うためのタグがいくつも用意されています。
たとえば、文字を太く見せる <b>、斜体で表示する <i>、重要な内容を示す <strong>、強調したい語句を表す <em> などがあります。また、上付き文字を表す <sup>、下付き文字を表す <sub>、略語を示す <abbr> なども、文章の意味を分かりやすく伝えるために役立ちます。
ここでは、HTMLで使える文字装飾のタグについて、見た目を変えるタグと意味を伝えるタグの違いにも触れながら、やさしく丁寧に解説していきます。
文字装飾タグは見た目と意味を整えるために使う
HTMLの文字装飾タグには、大きく分けて2つの役割があります。1つは、文字を太字や斜体のように見た目で目立たせる役割です。もう1つは、文字に「重要」「強調」「定義語」「引用元」といった意味を持たせる役割です。
たとえば、<b> は文字を太字にするために使います。一方、<strong> は単に太く見せるだけでなく、その内容が重要であることを示します。見た目が似ていても、HTMLとしての意味が異なる場合があるため、タグの役割を理解して使い分けることが大切です。
| 種類 | 主な目的 | 例 |
|---|---|---|
| 見た目を変えるタグ | 文字を太字や斜体などで表示する | <b>、<i> |
| 意味を伝えるタグ | 強調や重要性など、文章の意味を示す | <em>、<strong> |
| 特殊な表記をするタグ | 上付き文字、下付き文字、整形済みテキストなどを表す | <sup>、<sub>、<pre> |
| 補足情報を示すタグ | 略語や出典などを示す | <abbr>、<cite> |
文字装飾タグを使うと、読者にとって重要な部分が分かりやすくなります。ただし、装飾を増やしすぎると、かえって読みづらくなることもあります。どの部分を目立たせたいのか、どの言葉に意味を持たせたいのかを考えながら使うことが大切です。
図1：文字装飾タグの役割
この図から分かること
HTMLの文字装飾タグには、見た目を変えるためのタグと、文章の意味を伝えるためのタグがあります。<b> や <i> は主に見た目を変えるために使い、<strong> や <em> は重要性や強調といった意味を示すために使います。
見た目が似ていても、タグが持つ意味は異なります。HTMLでは、文字をどう見せるかだけでなく、その文字が文章の中でどのような役割を持つのかを考えることが大切です。
太字を表す<b>と斜体を表す<i>
まずは、基本的な文字装飾として、太字と斜体を確認しましょう。
<b> は、文字を太字で表示するためのタグです。bはboldの略で、特定の語句を視覚的に目立たせたいときに使います。
<i> は、文字を斜体で表示するためのタグです。iはitalicの略で、語句を少し違った雰囲気で見せたいときなどに使われます。
ファイル名： Lesson4-1.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>文字装飾の練習</title>
</head>
<body>
<p>提出期限は<b>金曜日の17時</b>までです。</p>
<p>作品名は<i>Web Design Note</i>です。</p>
</body>
</html>ブラウザの表示例
このHTMLでは、1つ目の段落で提出期限を <b> によって太字にしています。読者に注目してほしい部分なので、ほかの文字より目立ちやすくなります。
2つ目の段落では、作品名の部分に <i> を使っています。斜体にすることで、本文の中の特定の語句を少し区別して見せることができます。
ただし、<b> と <i> は、基本的には見た目を変えるためのタグです。「とても重要である」「強く伝えたい」という意味を持たせたい場合は、後で解説する <strong> や <em> を使うほうが適しています。
マーカーのように強調する<mark>と取り消しを示す<del>
文章の中で、特に注目してほしい部分をハイライトしたい場合は <mark> を使います。<mark> は、マーカーで線を引いたように背景付きで表示されるタグです。
また、削除された内容や、現在は有効ではない内容を示すときには <del> を使います。<del> で囲まれた文字には、通常、取り消し線が表示されます。
<p>次回の授業では<mark>フォームの基本</mark>を学習します。</p>
<p>集合時間は<del>10時</del>から9時30分に変更されました。</p>表示例
<mark> は、文章の中で読者に特に見てほしい部分を示すときに便利です。たとえば、検索結果の一致部分、注意してほしいキーワード、重要な確認項目などに使えます。
<del> は、削除や変更を表すために使います。たとえば、予定の変更、価格の修正、古い情報の取り消しなどを示すときに使うと、変更前の内容も読者に伝えられます。
| タグ | 役割 | 使い方の例 |
|---|---|---|
| <mark> | 注目してほしい部分をハイライトする | 重要語句、検索一致部分、確認ポイント |
| <del> | 削除・訂正された内容を示す | 変更前の時間、古い価格、取り消された内容 |
<mark> は目立ちやすいタグなので、使いすぎるとページ全体が騒がしく見えることがあります。本当に注目してほしい部分に絞って使うと効果的です。
タグを重ねるときは閉じる順番に注意する
HTMLでは、タグの中に別のタグを入れることがあります。これをネストと呼びます。
たとえば、ハイライトした部分の中に、さらに太字を入れたい場合は、<mark> の中に <b> を入れることができます。
<p>今回の目標は<mark>課題を<b>3つ</b>完成させること</mark>です。</p>表示例
この例では、まず <mark> で「課題を3つ完成させること」をハイライトし、その中の「3つ」だけを <b> で太字にしています。
ネストするときに大切なのは、開始したタグと逆の順番で終了タグを書くことです。先に <mark> を開始し、その中で <b> を開始した場合、先に </b> を書き、そのあとに </mark> を書きます。
| 書き方 | 説明 |
|---|---|
| <mark>文章の中に<b>重要語</b>を入れる</mark> | 正しい閉じ方 |
| <mark>文章の中に<b>重要語</mark></b> | タグの閉じる順番が不自然 |
タグは箱のように考えると分かりやすくなります。外側の箱を開けて、その中に小さな箱を入れた場合、先に内側の箱を閉じてから、最後に外側の箱を閉じます。
上付き文字を表す<sup>
数式や脚注番号などで、通常の文字より少し上に小さく表示したい文字があります。このような文字を上付き文字と呼びます。
HTMLでは、上付き文字を表すために <sup> を使います。supはsuperscriptの略です。
<p>正方形の面積は一辺の長さを使って x<sup>2</sup> と表せます。</p>表示例
この例では、2の部分を <sup> で囲んでいます。そのため、xの右上に小さく表示される形になります。
<sup> は、数式だけでなく、脚注番号のような表記にも使われることがあります。
| 使い方 | 例 |
|---|---|
| 数式の指数 | x<sup>2</sup> |
| 脚注番号 | 注釈<sup>1</sup> |
本文の中で特殊な表記が必要なときに、<sup> を使うと意味が伝わりやすくなります。
下付き文字を表す<sub>
化学式や数学の添字などで、通常の文字より少し下に小さく表示したい文字があります。このような文字を下付き文字と呼びます。
HTMLでは、下付き文字を表すために <sub> を使います。subはsubscriptの略です。
<p>水の化学式はH<sub>2</sub>Oです。</p>表示例
この例では、2の部分を <sub> で囲んでいます。そのため、Hの右下に小さく表示される形になります。
<sub> は、化学式や変数の添字など、文字を下に付けて表したいときに使います。
| 使い方 | 例 |
|---|---|
| 化学式 | H<sub>2</sub>O |
| 添字 | a<sub>1</sub> |
<sup> と <sub> は、どちらも特殊な位置に文字を表示するためのタグです。上に置きたい場合は <sup>、下に置きたい場合は <sub> と覚えると分かりやすいです。
図2：上付き文字と下付き文字の違い
この図から分かること
<sup> は文字を上付きにし、<sub> は文字を下付きにします。数式の指数では上付き文字、化学式では下付き文字が使われることが多く、文字の位置によって意味が変わります。
このような特殊な表記は、普通の文字として並べるだけでは正確に伝わりにくいことがあります。<sup> と <sub> を使うことで、数式や化学式の意味を読み取りやすくできます。
意味的な強調を示す<em>と重要性を示す<strong>
文字を目立たせるタグには、見た目を変えるだけではなく、意味を持たせるタグもあります。その代表が <em> と <strong> です。
<em> は、文章の中で強調したい部分を示すタグです。通常は斜体で表示されますが、目的は見た目を斜めにすることではなく、「この部分を強調して読む」という意味を伝えることです。
<strong> は、重要な内容を示すタグです。通常は太字で表示されますが、目的は単なる太字ではなく、「この内容は重要である」と伝えることです。
<p>入力内容は送信前に<em>必ず確認</em>しましょう。</p>
<p><strong>パスワードは他人に教えないでください。</strong></p>表示例
この例では、1つ目の段落で「必ず確認」を <em> にしています。文章の中で特に強調して読みたい部分です。
2つ目の段落では、パスワードに関する注意を <strong> で示しています。重要な警告や注意点を伝える場面では、<strong> が向いています。
| タグ | 意味 | 通常の表示 |
|---|---|---|
| <em> | 強調したい内容を示す | 斜体で表示されることが多い |
| <strong> | 重要な内容を示す | 太字で表示されることが多い |
<b> と <strong> はどちらも太字に見えることがありますが、意味は異なります。<b> は主に見た目を太くするタグで、<strong> は重要性を示すタグです。
同じように、<i> と <em> も表示が似ていることがありますが、<i> は主に斜体の見た目を作り、<em> は強調の意味を示します。
定義語を示す<dfn>と作品名や文献名を示す<cite>
HTMLでは、文章の中に出てくる用語や出典に意味を持たせるタグもあります。ここでは、<dfn> と <cite> を見ていきましょう。
<dfn> は、定義する用語を示すためのタグです。専門用語や新しく説明する言葉が出てくる場面で使います。
<cite> は、作品名や文献名などを示すためのタグです。本、記事、仕様書、映画、論文などの名前を表すときに使われます。
<p><dfn>マークアップ</dfn>とは、文章に意味や構造を付けることです。</p>
<p>詳しい仕様は<cite>HTML Living Standard</cite>で確認できます。</p>表示例
この例では、「マークアップ」という言葉を定義するために <dfn> を使っています。また、文献名として HTML Living Standard を示すために <cite> を使っています。
| タグ | 役割 | 使う場面 |
|---|---|---|
| <dfn> | 定義する用語を示す | 用語説明、専門語の紹介 |
| <cite> | 作品名や文献名を示す | 書籍名、仕様書名、記事名など |
<dfn> や <cite> は、見た目を大きく変えるためのタグではありません。文章の中で、その言葉がどのような意味を持つのかをHTMLとして示すために使います。
整形済みテキストを表す<pre>
HTMLでは、通常、ソースコード内の空白や改行がそのまま表示されるとは限りません。しかし、コード例や整形済みの文章を表示したいときには、空白や改行を保ったまま表示したい場合があります。
そのようなときに使うのが <pre> です。<pre> は、整形済みテキストを表すタグです。preはpreformatted textの略です。
<pre>
function greet() {
console.log("こんにちは");
}
</pre>表示例
<pre> の中に書いた文字は、空白や改行が比較的そのまま反映されます。また、多くのブラウザでは等幅フォントで表示されます。
プログラムのコード、設定ファイルの例、整えたテキストの見本など、空白や改行そのものに意味がある内容を表示するときに便利です。
ただし、<pre> は本文全体を整えるために使うタグではありません。通常の文章は <p> で段落として書き、空白や改行をそのまま見せたい特別な内容に <pre> を使うと考えるとよいです。
略語を示す<abbr>と頭字語を示す<acronym>
文章の中には、HTMLやCSSのような略語が登場することがあります。略語だけでは意味が分かりにくい場合、<abbr> を使うことで、省略前の正式な言葉を示すことができます。
<abbr> では、title属性に省略前の語句を書きます。ブラウザによっては、略語にマウスを重ねたときに title属性の内容が表示されます。
<p><abbr title="HyperText Markup Language">HTML</abbr>はWebページの構造を作る言語です。</p>
<p><acronym title="World Wide Web">WWW</acronym>はWebの仕組みを表す言葉として使われます。</p>表示例
<abbr> は、略語を示すための現在よく使われるタグです。title属性を使うことで、略語の正式名称を補足できます。
一方、<acronym> は頭字語を示すために使われていたタグですが、HTML5では非推奨です。現在は、頭字語も含めて <abbr> を使うのが基本です。
| タグ | 役割 | 現在の扱い |
|---|---|---|
| <abbr> | 略語を示す | 現在も使用される |
| <acronym> | 頭字語を示す | HTML5では非推奨 |
これからHTMLを書く場合は、略語や頭字語には基本的に <abbr> を使うと覚えておきましょう。古いHTMLでは <acronym> が使われていることもあるため、読めるようにしておくと安心です。
図3：意味を補足する文字装飾タグ
この図から分かること
HTMLの文字装飾タグには、単に文字を目立たせるだけでなく、言葉の意味や役割を補足するものがあります。<dfn> は定義語、<cite> は作品名や文献名、<abbr> は略語、<pre> は整形済みテキストを示します。
このようなタグを使うと、文章の意味構造が分かりやすくなります。読者にとって読みやすいだけでなく、ブラウザや支援技術にも内容の役割を伝えやすくなります。
文字装飾タグを使うときの考え方
文字装飾タグを使うときは、まず「見た目を変えたいのか」「意味を伝えたいのか」を考えることが大切です。
たとえば、単に特定の語句を太く見せたい場合は <b> を使えます。しかし、その語句が重要な注意点であることを示したい場合は <strong> のほうが適しています。
同じように、文字を斜体にしたいだけなら <i>、文章の中で強調して読みたい部分なら <em> を使うと考えると分かりやすくなります。
| 目的 | 向いているタグ |
|---|---|
| 文字を太字で見せたい | <b> |
| 重要な内容であることを示したい | <strong> |
| 文字を斜体で見せたい | <i> |
| 強調して読ませたい | <em> |
| 注目部分をハイライトしたい | <mark> |
| 削除や変更前の内容を示したい | <del> |
HTMLは、見た目だけでなく文書の意味を表すための言語です。装飾タグも、ただ文字を目立たせるためだけに使うのではなく、文章の中でどのような役割を持つのかを考えながら選びましょう。
見た目をもっと細かく調整したい場合は、CSSを使います。文字の色、サイズ、太さ、余白、背景色などを自由に整える方法は、CSSに関する記事以降で解説します。
使用したタグ一覧
| タグ | 用途 |
|---|---|
| <b> | 文字を太字で表示する |
| <i> | 文字を斜体で表示する |
| <mark> | 注目してほしい部分をハイライトする |
| <del> | 削除・訂正された内容を示す |
| <sup> | 上付き文字を表す |
| <sub> | 下付き文字を表す |
| <em> | 意味的な強調を示す |
| <strong> | 重要な内容であることを示す |
| <dfn> | 定義する用語を示す |
| <cite> | 作品名や文献名などを示す |
| <pre> | 空白や改行を保った整形済みテキストを表す |
| <abbr title="省略前の言葉"> | 略語を示し、title属性で正式名称を補足する |
| <acronym title="省略前の言葉"> | 頭字語を示す。HTML5では非推奨 |