【HTML】テキスト表示の基礎と頻出するタグまとめ

1 テキスト表示の基礎
2 テキスト用のタグまとめ
3 テキストを抜き出す方法
4 メールの「HTML」と「テキスト」について
5 HTMLメールとテキストメールの違い
6 まとめ

テキスト表示の基礎

HTML（Hyper Text Markup Language）は、Webページを作る際に使用される重要なマークアップ言語です。

役割のひとつとして、Webページ内のテキストに「構造」と「意味」を与えます。

もう少しわかりやすく説明すると、ブラウザに正しくテキストを表示させることです。

テキストの構造化、見出しやパラグラフの表示、言葉の強調、リスト表示など、テキストの表示のさせ方はいろいろあります。

ここでは、HTMLでテキストを表示させるための方法について解説します。

テキスト用のタグまとめ

HTMLでテキストを表示させるためのタグは数多くあります。

基本的に使われるタグについて、ここでは次の8つを紹介します。

文書の情報や構造を宣言するタグ
テキストの表現に関するタグ
強調や重要性を表すタグ
リストタグ
テキストサイズに関するタグ
テキストの色を変えるタグ
テキストの位置を変えるタグ（中央/左右）
テキストを改行するタグ

ひとつずつ見ていきいましょう。

1.文書の情報や構造を宣言するタグ

<!DOCTYPE>：ドキュメントタイプを宣言
<html>：HTML文書であることを宣言
<head>：文書のヘッダ情報を指定
<body>：文書の本体（内容）を指定
<title>：文書のタイトルを指定
<meta>：文書に関する情報（メタ情報）を指定
<h1>～<h6>：文書の見出しを指定
<p>：パラグラフ（段落）を指定

これらのタグはHTMLファイルを作成する際に必須といえるタグばかりです。

タグを正しく使わないと、サイトの情報が検索エンジンにしっかり伝わらない可能性もあります。

■記述サンプル

<!DOCTYPE html>
<html lang="ja">
<head>
  <title>ページのタイトルを記述します</title>
</head>
<body>
    <!-- ここに文章を記述します -->
    <h1>見出し１</h1>
    <p>ここに文章を記述します</p>
    <h2>見出し２</h2>
    <p>ここに文章を記述します</p>
</body>
</html>

当サイトでは、これらのタグについて解説していますのでぜひ参考にしてみてください。

【関連記事】

▶︎【HTML】意外と重要なDOCTYPE宣言についてわかりやすく解説。

▶︎【HTML】bodyタグの基本を徹底解説！styleで表示を調整しよう

▶︎【HTML】metaタグについて徹底解説！一覧で必要・不必要がわかる

2.テキストの表現に関するタグ

<font>：フォントの種類・大きさ・色を指定
<b>：文字を太字にする
<i>：文字を斜体（イタリック）にする
<u>：文字に下線（アンダーライン）を引く
<s>：文字に打ち消し線を引く
<sub>：下付き文字を表示する
<sup>：上付き文字を表示する

HTMLで表示させるテキストをより見やすくしたり、デザインするために上記のタグは使用されます。

使う際は表現を変えたい文字を、紹介したタグで囲めばOKです。

3.強調や重要性を表すタグ

<em>：文字を強調する
<strong>：文字を強調する
<dfn>：文字を定義される用語として表す（用語の意味を説明する際などに使う）
<del>：文字の削除を表す
<ins>：文字の追加を表す
<address>：連絡先や問合せ先を表す
<blockquote>：引用や転載であることを表す
<q>：引用や転載であることを表す
<code>：プログラムのソースコードを表す
<abbr> ：略語（頭字語以外）を表す
<acronym> ：略語（頭字語）を表す

HTMLで表示させるテキストの中でも、強調させたり文字が重要な意味を持つ場合は上記のタグを使用します。

これらのタグは、うまく活用することでSEO対策の一環にもなるので、Webページを作成するのであれば覚えておいて損はありません。

【関連記事】

▶︎【HTML】文字を強調する場合に使用する”em”についておさらいと解説。

4.リストタグ

<ol>：順序のあるリストを表示
<ul>：順序のないリストを表示
<li>：リストの項目を表示
<dl>：定義リストであることを表す（用語と用語の説明がセットで入る）
<dt>：定義する用語を表す
<dd>：定義した用語の説明を表す

上記は、テキストをリストで表示させたい場合に使用するタグになります。

「<ol>＋<li>」「<ul>＋<li>」「<dl>＋<dt>＋<dd>」といったようにタグをセットで使用します。

これらのタグの使い方は、次の記事で解説していますのでぜひ読んでみてください。

【関連記事】

▶︎【HTML】olタグで順序ある箇条書きの使い方まとめ＋アレンジ方法

▶︎HTMLのli要素を解説！ul・olの違いを理解して使いこなそう

▶︎HTMLの記述(定義)リスト dl・dt・ddタグの基本的な使い方を理解しよう！

5.テキストサイズに関するタグ

<font size=”値”>：文字を値のサイズで表示
<big>：文字をひとまわり大きくする
<small>：文字をひとまわり小さくする
<tt>：文字を等幅フォントで表示

テキストの強調タグと同じように、テキストサイズもページをより見やすくするために重要なタグです。

一般的には、<font size>タグやCSSでサイズを指定します。

「文書の情報や構造を宣言するタグ」で紹介した<h1>～<h6>タグも、テキストサイズに影響します。

6.テキストの色を変えるタグ

テキストの色を変えたい場合は、タグを使用します。

<font color=””値></font>と記述し、値にはカラーネーム（red、blue）やカラーコード（#e5e5e5）を指定できます。

タグも、色を変えたい文字をタグで囲むだけなので簡単に使えますよ。

【関連記事】

▶︎【HTML】文字色を変える。font colorについて解説してみる。

7.テキストの位置を変えるタグ（中央/左右）

<div align=”left”>：文字を左寄せで表示
<div align=”right”>：文字を右寄せで表示
<div align=”center”>：文字を中央寄せで表示
<center>：文字を中央寄せで表示

テキストはタグを使うことで画面の左・中央・右に寄せて表示できます。

ただし、HTML5ではタグでテキストの位置は変えず、CSSやstyleで「text-align」を使った指定を推奨しています。

text-align: “寄せたい方向”;

詳しくは次の記事を参考にしてみてください。

8.テキストを改行するタグ

・<br>：改行する
・<pre>：ソースの改行や半角スペース、タブなどそのまま表示

テキストを改行したい場合は主に<br>タグと<pre>タグが使われます。

今までのタグとは違い、<br>タグは囲って使わず、改行したい位置に記述します。

詳しい使い方は、次の記事で解説していますので参考までに。

【関連記事】

▶︎【初心者向け】HTMLのbrタグの意味・使い方・注意点など徹底解説！

テキストを抜き出す方法

「Webサイトのテキストだけを抽出・抜き出したい」と思うことはありませんか？

HTMLファイルからテキストを抜き出そうと思うと、いろんなタグが使われていてテキストだけを抜き出すのは難しいですよね。

そんな時はツールをうまく活用してみるとよいでしょう。

例えば、以下のようなテキスト抽出ツールがあります。

参考：WebサイトのHTMLテキスト取得

参考：見出し（hタグ）抽出

メールの「HTML」と「テキスト」について

メールの形式で「HTMLメール」と「テキストメール」という2種類があるのはご存知ですか？

名前は聞いたことがあるものの、何が違うのかよくわかっていない人もいるのではないでしょうか。

これらの違いは、ここまで説明してきたように「テキスト表示のさせ方」が関係しています。

HTMLメールとテキストメールの違い

HTMLメールとテキストメールの違いは、簡単にいうと「テキストだけで表現されているか否か」です。

それぞれの特徴や表示のされ方を見てみましょう。

HTMLメール

HTMLメールはその名の通り、HTML形式で書かれたメールです。

HTML形式で書かれているので、文字のサイズや色、フォントを自由に変えられます。

また、画像や動画を入れることもできるので受信者により具体的な内容を伝えたり、視覚的な効果を発揮できます。

自由にテキストを変えたりレイアウトが調整できる分、作成には手間がかかります。

メリット

商品画像や動画を入れられる
リンクやパラメータなどをきれいに挿入可能
見栄えがよいため、視覚的な訴求が可能
開封率の計測が可能

デメリット

作成するのにHTMLの知識が必要
メール容量がテキストメールと比べて大きい
メールソフトの設定や環境によっては、正しく表示されない可能性がある
メールの配信数や画像が多いとサーバに負荷がかかる

テキストメール

テキストメールは、文字だけで構成されているいわゆる「普通のメール」です。

メルマガなどのメールでは、飾り文字や記号などを使って読みやすく、見た目にこだわったメールが多いですよね。

メールにテキストしか使用しない分、HTMLメールと比べると容量が軽いといったメリットがあります。

テキストメールのメリット

簡単に作成可能
セキュリティではじかれる可能性が低い
メールソフトの設定や環境の影響を受けにくい

テキストメールのデメリット

テキストのみのため、視覚的な訴求に弱い
効果測定をする場合の設定が面倒

まとめ

HTMLのテキストについて紹介しました。

一般的なメモ帳などとは異なり、HTMLではさまざまなタグを使うことでテキストを装飾可能です。

どのタグもWebページを作る際には必須といえるものばかりですので、ぜひ当サイトの記事を活用して使いこなしてくださいね！

エンジニアになりたい人に選ばれるプログラミングスクール「ポテパンキャンプ」

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 1000名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか？

卒業生の多くがWebエンジニアとして活躍

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、気になる方はぜひスクール詳細をのぞいてくださいませ。

【HTML】テキスト表示の基礎と頻出するタグまとめ

テキスト表示の基礎