HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

HTMLテキストフォーマットとは？主要な書式設定タグ10選と使い方を解説

HTMLのテキストフォーマット（書式設定）とは、HTML文書内でテキストの見た目や意味を整えるために特別に用意された要素のことです。これらのタグを使いこなすことで、太字・斜体・ハイライトなど、さまざまなテキスト表現が可能になり、文章の可読性や伝わりやすさが大きく向上します。

基本構文

テキストフォーマット用タグの基本的な書き方は以下のとおりです。

<tagname>content</tagname>

主なテキストフォーマットタグ一覧

HTMLで使われる代表的なテキストフォーマットタグは、以下の10種類です。

番号タグと説明
1<b>
テキストを太字にします。視覚的な装飾が目的で、「重要性」の意味は持ちません。
2<em>
テキストを強調します。多くのブラウザでは斜体で表示され、強勢（アクセント）という意味的な役割も持ちます。
3<i>
テキストを斜体（イタリック）にします。専門用語や外国語、思考内容などの表記にも使われます。
4<small>
テキストをひと回り小さく表示します。注釈や免責事項、著作権表記などに適しています。
5<strong>
重要度の高いテキストであることを示します。太字で表示されますが、<b>タグと違い「重要性」という意味を持つ点が特徴です。
6<sub>
下付き文字（サブスクリプト）を指定します。化学式（H2Oなど）の表記に便利です。
7<sup>
上付き文字（スーパースクリプト）を指定します。数式や脚注マークの表記に役立ちます。
8<ins>
文書に後から挿入・追加されたテキストを示します。通常は下線付きで表示されます。
9<del>
文書から削除されたテキストを示します。通常は打ち消し線付きで表示され、<ins>と組み合わせて変更履歴を表現できます。
10<mark>
テキストをハイライト表示（蛍光ペンで塗ったような強調）します。検索結果の該当箇所の表示などによく使われます。

なお、<b>と<strong>、<i>と<em>は表示結果が似ていますが、<strong>や<em>はテキストに「意味」を与えるセマンティックなタグであるため、SEOやアクセシビリティの観点ではこちらを使うことが推奨されています。

それでは、HTMLテキストフォーマットの具体的な使用例を見てみましょう。

コード例

<!DOCTYPE html>
<html>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #8BC6EC;
        background-image: linear-gradient(135deg, #8BC6EC 0%, #9599E2 100%);
        text-align: center;
    }
</style>
<body>
<h1>HTML テキストフォーマット デモ</h1>
<b>私はbタグ（太字）です</b>
<br>
<em>私はemタグ（強調）です</em>
<br>
<i>私はiタグ（斜体）です</i>
<br>
<small>私はsmallタグ（小さい文字）です</small>
<br>
<strong>私はstrongタグ（重要）です</strong>
<br>
<sub>私はsubタグ（下付き）です</sub>
<br>
<sup>私はsupタグ（上付き）です</sup>
<br>
<ins>私はinsタグ（挿入）です</ins>
<br>
<del>私はdelタグ（削除）です</del>
<br>
<mark>私はmarkタグ（ハイライト）です</mark>
<br>
</body>
</html>

出力結果

上記のコードをブラウザで開くと、各タグに応じた書式（太字・斜体・小さめ文字・上下付き文字・打ち消し線・ハイライトなど）が適用されたテキストが表示されます。

HTMLテキストフォーマットとは？主要な書式設定タグ10選と使い方を解説

  1. HTMLのdir属性とは？テキストの表示方向を指定する方法を解説

    HTMLのdir属性は、要素内のコンテンツの表示方向（テキストの向き）を設定するために使用されます。アラビア語やヘブライ語のように右から左へ読む言語（RTL言語）を扱う際に特に役立つ属性です。dir属性に指定できる主な値ltr：左から右へ表示（デフォルト値）rtl：右から左へ表示auto：コンテンツの内容に基づいて自動的に判定それでは、HTMLでdir属性を実装する具体的な例を見てみましょう。サンプルコード<!DOCTYPE html> <html> <body>    <h2>Demo Heading</h2>

  2. HTMLのplaceholder属性とは？使い方とサンプルコードを解説

    HTMLのplaceholder（プレースホルダー）属性は、ユーザーが何も入力する前に、input要素やtextarea要素の中に表示されるヒントテキスト（仮置きの文字列）を指定するための属性です。フォームの入力欄に「氏名」「メールアドレス」など、どのような内容を入力すべきかを示すことで、ユーザーの理解を助け、入力ミスを減らす効果があります。placeholder属性の基本構文placeholder属性は以下のように記述します。<タグ名 placeholder=表示したいテキスト></タグ名>placeholder属性に指定したテキストは、入力欄が空の状態でのみ表示され