HTMLテキスト表示要素解説：段落、改行、強調、引用、ルビなど

HTMLは、Webページの構造を定義するための重要な言語であり、テキストの表示に関する多くの要素が提供されています。段落や改行、強調表示や引用、ルビなど、これらの要素は、テキストをより明確かつ効果的に表現するために利用されます。

本記事では、HTMLで利用できる主要なテキスト表示要素について詳しく解説します。

HTMLでのテキスト表示に関する要素ってどんなものがありますか？

HTMLではテキストを表示するためのさまざまな要素が提供されています。例えば、段落を表す<p>要素や、改行を表す<br>要素、強調表示を表す<em>や<strong>、引用を表す<blockquote>などがあります。

それぞれ詳しく解説しましょう。

段落を表す：P要素

HTMLの<p>タグは、段落を表すために使用されるタグです。<p>タグで囲まれたテキストは、自動的に新しい段落に分割されます。

以下は、<p>タグを使用して段落を表す例です。

<p>これは最初の段落です。</p>
<p>これは2番目の段落です。</p>

この例では、2つの<p>タグでテキストを囲み、それぞれ別の段落を表しています。

<p>タグは、Webページで文章を表示するために非常によく使用されます。例えば、ブログ記事、ニュース記事、ウェブページの本文などに使用されます。

また、<p>タグは他のHTMLタグと組み合わせて使用することができます。たとえば、以下のように<strong>タグを使用して、テキストを強調することができます。

<p>これは<strong>重要な</strong>メッセージです。</p>

この例では、<p>タグで囲まれたテキストの一部を<strong>タグで囲むことで、そのテキストを太字で表示しています。

段落のテーマ区切りを入れる：hr要素

HTMLの<hr>タグは、段落のテーマを区切るために使用されるタグです。<hr>タグを使用すると、横線を表示して段落を視覚的に分割することができます。

以下は、<hr>タグを使用して段落のテーマを区切る例です。

<p>これは最初の段落です。</p>
<hr>
<p>これは2番目の段落です。</p>

この例では、<hr>タグが2つの段落を区切るために使用されています。<hr>タグは、段落のテーマを区切るために非常によく使用されます。例えば、ニュース記事の異なるトピックを区切るために使用されることがあります。

<hr>タグは、他のHTMLタグと同様に、スタイルを変更することができます。たとえば、以下のようにCSSを使用して、横線の色、太さ、長さなどを変更することができます。

<style>
hr {
  border-top: 1px solid black;
  height: 1px;
  margin: 20px 0;
}
</style>

<p>これは最初の段落です。</p>
<hr>
<p>これは2番目の段落です。</p>

この例では、<style>タグを使用して<hr>タグのスタイルを変更しています。border-topプロパティを使用して、上部の境界線を1ピクセルの黒い実線に変更しています。また、heightプロパティを使用して、横線の高さを1ピクセルに設定しています。さらに、marginプロパティを使用して、横線の上下のマージンを20ピクセルに設定しています。

改行を入れる：br要素

HTMLの<br>タグは、改行を表すために使用されるタグです。<br>タグを使用すると、改行を挿入することができます。

以下は、<br>タグを使用して改行を表す例です。

<p>これは1行目です。<br>
これは2行目です。</p>

この例では、<br>タグが2つの行を区切るために使用されています。<br>タグは、段落の中で改行を挿入するために非常によく使用されます。

また、<br>タグは他のHTMLタグと組み合わせて使用することができます。たとえば、以下のように<strong>タグを使用して、改行後のテキストを強調することができます。

<p>これは1行目です。<br>
<strong>これは2行目です。</strong></p>

この例では、<br>タグで2行に分割されたテキストの2行目を<strong>タグで囲むことで、そのテキストを太字で表示しています。

長い数字や英字の改行位置を指定：wbr要素

HTMLの<wbr>タグは、長い単語や数字を改行する場所を指定するために使用されるタグです。<wbr>タグを使用することで、長い単語や数字を自動的に改行することなく、適切な場所で改行することができます。

以下は、<wbr>タグを使用して改行位置を指定する例です。

<p>これは長い数字の例です: 123456<wbr>789012<wbr>345678。</p>
<p>これは長い単語の例です: Supercalifragilistic<wbr>expialidocious。</p>

この例では、<wbr>タグが長い数字と単語を改行するために使用されています。<wbr>タグを使用することで、改行位置を手動で指定することができます。

<wbr>タグは、テキスト内の任意の位置で使用することができます。ただし、ブラウザーによっては、<wbr>タグが無視される場合があるため、必ずしも正確に改行されない可能性があります。

また、<wbr>タグは、長い単語や数字を自動的に改行するのではなく、明示的に改行位置を指定するために使用することが推奨されます。長い単語や数字を自動的に改行するには、CSSのword-wrapプロパティやoverflow-wrapプロパティを使用することができます。

重要性や強調を表す：em、strong、b要素

HTMLには、テキストの重要性や強調を表すために使用できるタグがいくつかあります。以下に、代表的なタグを紹介します。

テキストを斜体：<em>タグ

テキストを斜体で表示し、そのテキストが強調されていることを示します。ブラウザによっては、テキストを強調表示するだけで、斜体表示されない場合があります。

<p>これは<em>重要な</em>メッセージです。</p>

テキストを太字で表示：<strong>タグ

テキストを太字で表示し、そのテキストが強調されていることを示します。

<p>これは<strong>とても重要な</strong>メッセージです。</p>

テキストを太字で表示：<b>タグ

テキストを太字で表示します。<strong>タグと同様に、重要性や強調を表すために使用できますが、文書の構造を示すためには使用すべきではありません。

<p>これは<b>太字の</b>テキストです。</p>

これらのタグは、単体で使用することも、他のタグと組み合わせて使用することもできます。たとえば、以下のように<p>タグと組み合わせて使用することができます。

<p><em>重要な</em>メッセージは、<strong>絶対に</strong>見逃してはいけません。</p>

追加・削除箇所を表す：ins、del、s要素

HTMLには、文書の変更履歴を表すために使用できるタグがいくつかあります。以下に、代表的なタグを紹介します。

追加されたテキストを示す：<ins>タグ

追加されたテキストを示します。ブラウザによっては、下線やハイライトなどのスタイルで表示される場合があります。

<p>次の文書に<ins>新しい</ins>段落を追加しました。</p>

削除されたテキストを示す：<del>タグ

削除されたテキストを示します。ブラウザによっては、取り消し線や半透明の表示などのスタイルで表示される場合があります。

<p>前のバージョンの文書から<del>古い</del>段落を削除しました。</p>

削除されたテキストを示す：<s>タグ

削除されたテキストを示します。ブラウザによっては、取り消し線で表示される場合があります。<del>タグとは異なり、変更の種類を明示的に示すものではありません。

<p>この文書は<s>更新されていません。</s></p>

これらのタグは、単体で使用することも、他のタグと組み合わせて使用することもできます。たとえば、以下のように<p>タグと組み合わせて使用することができます。

<p>前のバージョンの文書から<del>古い</del><ins>新しい</ins>段落を追加しました。</p>

この例では、<del>タグで囲まれたテキストを削除されたテキスト、<ins>タグで囲まれたテキストを追加されたテキストとして表示しています。

テキストに意味づけをする①：i、u、small要素

HTMLには、テキストに意味づけをするために使用できるタグがいくつかあります。以下に、代表的なタグを紹介します。

テキストを斜体で表示：<i>タグ

テキストを斜体で表示し、そのテキストが技術用語、外来語、略語などであることを示します。ブラウザによっては、斜体表示されない場合があります。

<p>この本では<i>CSS</i>について詳しく説明しています。</p>

テキストに下線を表示：<u>タグ

テキストに下線を表示し、そのテキストが強調されていることを示します。ただし、ブラウザによっては、下線表示されない場合があります。

<p><u>注意：</u>このプログラムはデータを消去します。</p>

テキストを小さく表示：<small>タグ

テキストを小さく表示し、そのテキストが注釈や脚注、免責事項などであることを示します。ブラウザによっては、小さく表示されない場合があります。

<p><small>このサイトに掲載されている情報は、正確性を保証するものではありません。</small></p>

これらのタグは、単体で使用することも、他のタグと組み合わせて使用することもできます。たとえば、以下のように<p>タグと組み合わせて使用することができます。

<p>このサイトは、<i>Web</i>技術を使用して<u>動的</u>なコンテンツを提供しています。
<small>ただし、ご利用にはインターネット接続が必要です。</small></p>

この例では、<i>タグで囲まれたテキストを斜体で表示し、<u>タグで囲まれたテキストに下線を表示しています。また、<small>タグで囲まれたテキストを小さく表示して、注釈や脚注であることを示しています。

テキストに意味づけをする②：cite、code、kbd、var、samp要素

HTMLには、テキストに意味づけをするために使用できるさまざまなタグがあります。以下に、代表的なタグを紹介します。

<cite>タグ

テキストが引用された文献のタイトルを示します。

<p><cite>ハリー・ポッターと賢者の石</cite>は、J.K.ローリングの最初の小説です。</p>

<code>タグ

テキストを等幅フォントで表示し、そのテキストがコンピュータプログラムの一部であることを示します。

<p>この関数は、<code>Math.pow(x, y)</code>と呼ばれます。</p>

<kbd>タグ

テキストを等幅フォントで表示し、そのテキストがキーボードのキーの名前であることを示します。

<p>この操作を実行するには、<kbd>Ctrl</kbd>+<kbd>C</kbd>を押してください。</p>

<var>タグ

テキストを斜体で表示し、そのテキストが変数名であることを示します。

<p>円周率は、<var>π</var>で表されます。</p>

<samp>タグ

テキストを等幅フォントで表示し、そのテキストがサンプルの出力であることを示します。

<p>このプログラムの出力は、<samp>Hello, world!</samp>です。</p>

これらのタグは、単体で使用することも、他のタグと組み合わせて使用することもできます。たとえば、以下のように<p>タグと組み合わせて使用することができます。

<p>このプログラムは、<code>printf("Hello, world!\n");</code>というコードを実行し、<var>x</var>を<samp>10</samp>に設定します。</p>

この例では、<code>タグで囲まれたテキストを等幅フォントで表示し、プログラムのコードであることを示しています。また、<var>タグで囲まれたテキストを斜体で表示し、変数名であることを示しています。さらに、<samp>タグで囲まれたテキストを等幅フォントで表示し、サンプルの出力であることを示しています。

略語を表す：abbr要素

HTMLには、略語や頭字語を表すために使用できる<abbr>タグがあります。このタグを使用することで、略語や頭字語を含むテキストに適切な意味を与えることができます。

<abbr>タグは、以下のように使用されます。

<p>HTMLは、<abbr title="HyperText Markup Language">HTML</abbr>の略称です。</p>

この例では、<abbr>タグで囲まれたテキストが略語であることを示しています。title属性を使用することで、略語の完全な意味を説明するテキストを追加できます。マウスカーソルを略語の上に移動すると、title属性で指定したテキストが表示されます。

長い文章の引用を表す：blockquote要素

HTMLには、長い引用文を表すために使用できる<blockquote>タグがあります。このタグを使用することで、引用されたテキストの視覚的な区別が付けられ、引用元が明確になります。

<blockquote>タグは、以下のように使用されます。

<blockquote>
  <p>引用されたテキスト</p>
  <footer>引用元の情報</footer>
</blockquote>

<blockquote>タグで囲まれたテキストは、引用されたテキストであり、<footer>タグで囲まれたテキストは、引用元の情報です。<footer>タグは、引用元の情報を示すためのタグであり、通常は引用元の著者やタイトル、URLなどを含みます。

以下は、<blockquote>タグを使用した例です。

<blockquote>
  <p>人間の欲望は、海の水のように枯れることがない。それは、満たされたものはすぐにまた欲しくなり、満たされなかったものは一生懸命に欲しくなるからだ。</p>
  <footer>ジョン・ドライデン</footer>
</blockquote>

この例では、<blockquote>タグで囲まれたテキストが引用されたテキストであり、<footer>タグで囲まれたテキストが引用元の情報であることを示しています。

短いテキストの引用を表す：cite要素

HTMLには、短い引用文を表すために使用できる<cite>タグがあります。このタグを使用することで、引用されたテキストに対する視覚的な強調が付けられ、引用元が明確になります。

<cite>タグは、以下のように使用されます。

<p>この曲は、<cite>Yesterday</cite>というタイトルのビートルズの楽曲です。</p>

この例では、<cite>タグで囲まれたテキストが引用されたテキストであり、ビートルズの楽曲のタイトルであることを示しています。

改行やスペースをそのまま表示する：pre要素

HTMLには、改行やスペースをそのまま表示するために使用できる<pre>タグがあります。このタグを使用することで、テキスト内にある改行やスペースがそのまま反映され、そのテキストのフォーマットが維持されます。

<pre>タグは、以下のように使用されます。

<pre>
  改行や
  スペースを
  そのまま
  表示する
</pre>

この例では、<pre>タグで囲まれたテキストがそのまま表示され、テキスト内の改行やスペースが反映されていることがわかります。

ルビ(ふりがな)を表す：ruby要素

HTMLには、ルビ(ふりがな)を表すために使用できる<ruby>タグがあります。このタグを使用することで、日本語の漢字に対して、その読み方(ふりがな)を表示することができます。

<ruby>タグは、以下のように使用されます。

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

この例では、<ruby>タグで囲まれたテキストが漢字であり、<rt>タグで囲まれたテキストがその読み方(ふりがな)であることを示しています。<rp>タグは、ルビを表示するための記号の指定を行うために使用されます。<rp>タグは、古いブラウザでのみ使用され、現在のブラウザでは自動的に挿入されるため、省略することができます。

以下は、<ruby>タグを使用した例です。

<ruby>
  今日<rp>(</rp><rt>きょう</rt><rp>)</rp>
</ruby>は晴れています。

この例では、<ruby>タグで囲まれたテキストが漢字であり、<rt>タグで囲まれたテキストがその読み方(ふりがな)であることを示しています。このように、<ruby>タグを使用することで、日本語の漢字に対して、その読み方(ふりがな)を表示することができます。

日時を表す：datetime要素

HTMLには、日時を表すために使用できる<time>タグがあります。このタグを使用することで、日時を意味のある形式で表現することができます。<time>タグは、日時の表示だけでなく、機械可読性の向上や検索エンジン最適化にも役立ちます。

<time>タグには、datetime属性を使用して、日時をISO 8601形式で指定する必要があります。

以下は、<time>タグを使用した例です。

<p>この記事は<time datetime="2023-04-01T09:00:00+09:00">2023年4月1日9時</time>に更新されました。</p>

この例では、<time>タグで囲まれたテキストが日時を表しています。datetime属性には、日時をISO 8601形式で指定しています。この形式は、年-月-日T時:分:秒+タイムゾーンの形式で、日時を完全に表現します。タイムゾーンは、必要に応じて指定できます。

ハイライトを表す：mark要素

HTMLには、ハイライト(強調表示)を表すために使用できる<mark>タグがあります。このタグを使用することで、テキスト内の特定の部分に強調表示を付けることができます。

<mark>タグは、以下のように使用されます。

<p>このテキストの<mark>この部分がハイライトされます</mark>。</p>

この例では、<mark>タグで囲まれたテキストがハイライトされ、その部分が目立つように表示されます。

文字の方向を制御する：bdo要素、bdi属性

HTMLには、文字の方向を制御するための<bdo>タグとbdi属性があります。

<bdo>タグは、以下のように使用されます。

<bdo dir="rtl">右から左に書かれるテキスト</bdo>

この例では、<bdo>タグで囲まれたテキストが右から左に書かれるテキストであることを示しています。dir属性は、テキストの方向を指定します。

この属性の値としては、rtl(右から左)とltr(左から右)が使用できます。

bdi属性は、以下のように使用されます。

<p>この文章は<bdi>影響を受けるテキスト</bdi>を含みます。</p>

この例では、<bdi>属性で囲まれたテキストが、文字の方向を考慮しないコンテキストで使用されることを示しています。つまり、文字の方向にかかわらず、そのテキストは常に左から右に表示されます。これにより、言語やスクリプトの方向によって異なる影響を受けるテキストを、正しく表示することができます。

リスキリングでキャリアアップしてみませんか？

リスキリング(学び直し)は、経済産業省が推奨しており、

今だけ、最大７０％のキャッシュバックを受けることができます。

最大70％の給付金が出るおすすめのプログラミングスクール！

リスキリングで給付金が出るスクールを７つ紹介 ≫

国策で予算が決められているため申し込みが多い場合は早期に終了する可能性があります！

興味のある方はすぐに確認しましょう。

まとめ

HTMLで利用できる主要なテキスト表示要素について詳しく解説しました。

これらの要素を適切に使用することで、Webページのテキストをより明確に表現することができます。

HTMLでのテキスト表示に関する要素について、詳しく解説してもらって、非常にわかりやすかったです。今後、テキストをより明確に表現するために、これらの要素を活用していきたいと思います。

HTMLのテキスト表示には、たくさんの要素があるため、どの要素を使うか選ぶ際には、その要素がどのような場面で有効か、また、適切なタグや属性を選択することが重要です。

また、SEOに有利なタイトルを考えたり、適切なルビを付けたりすることで、Webページの品質を高めることができます。