htmlタグ｜strong・b・em・mark（強調・太字・ハイライト）

ホームページ（ウェブサイト）制作において、文章内の特定の言葉を強調し、ユーザーへ正確な情報を伝えることは非常に重要です。その際に頻繁に使用されるHTMLタグとして、文字を太字（ボールド）で表示する「strong」と「b」、そして斜体（イタリック）で表示されることが多い「em」があります。

これらは見た目の装飾を施すだけではなく、HTMLの構造上それぞれに明確な意味の違いを持っています。まず「strong」タグは、そのテキストが文脈において「強い重要性」を持っていることを示します。次に「b」タグは、特別な重要性は付与せずに、単に「周囲のテキストと区別してユーザーの注意を引きたい」場面で使用します。そして「em」タグは、「emphasis」の略であり、文章の中で「声に出して読む際に強調（アクセント）を置く部分」や、微妙なニュアンスを伝えたい箇所に使用します。

さらに、現在のHTML5で追加されたのが「mark」タグです。このタグは、ユーザーの関心を引くためにテキストを「ハイライト表示（蛍光ペンで線を引いたような状態）」にする役割を持っています。例えば、サイト内検索でユーザーが入力したキーワードを検索結果の文章内で目立たせたり、現在の文脈において特に関連性が高い部分をハイライトしたりする場面で活躍します。「strong」タグのように文章そのものの絶対的な重要性を示すのではなく、「ユーザーにとって今注目すべき箇所」を一時的・視覚的に際立たせるという点で使い分けます。

以前のHTML規格では、「b」タグや「i（イタリック）」タグは単なる視覚的な装飾として使われていました。しかし、現在の標準であるHTML5以降では、見た目の装飾はCSSが担う役割として明確に分離されています。そのため、それぞれのHTMLタグが持つ意味合い（セマンティクス）を正確に理解し、使い分けることが求められます。事業用のホームページ（ウェブサイト）を構築する際は、検索エンジンや音声読み上げソフト（スクリーンリーダー）に対して、どの言葉が本当に重要であり、どの言葉にニュアンスを含ませたいのかを正しく伝えることで、ページ全体の品質が向上します。

本ページでは、「strong」タグ、「b」タグ、「em」タグ、そして「mark」タグの基本的な役割の違いから、SEOに配慮した適切な使い分け、さらにCSSを活用したデザインの工夫までを詳しく解説します。

strong（ストロング）

<strong></strong>

ホームページ制作（ウェブサイト制作）の際に使用する<strong>タグについてのご説明です。

ホームページ制作において<strong>（ストロング）タグは、ホームページ（ウェブサイト）内のページに設置されたテキスト（文字列）を強調する場合に使用します。

ホームページ制作において、ページ内のテキストの中で重要と判断され強調する方が好ましい部分に対して使用します。

<strong> 強調

strong（ストロング）。テキストを強調する。<em>よりさらに強調。
<strong>タグは、該当箇所の論理的強調を行います。

一般的なブラウザでは太字で表示されます。

サイト内の文章の中で、<strong>で囲われた場所を「強調されたテキスト」として、他のテキストに比べて重要であるという論理的強調として示す場合に使用します。

ただし、ページ内の他のテキストとの相対的な強調になるため、ページ内の全てのテキストを強調した場合は、「強調部分なし」と判断されると考えておいたほうが良いかもしれません。

セマンティックHTML Webページの論理構造の明確化で「意味」を構築

ページの中で重要な部分を示すSEO

<strong>タグを使用することでページ内のテキストの中の重要な部分を検索エンジンに示すことができます。

しかしながら、先に記載したとおり、相対的なバランスで「強調」されるため、ページの中であまりに強調部分が多いと結果的に「どの部分が強調されているテキスト部分か」がわからなくなるおそれがあります。

ホームページのSEOを考える上で、ページの主題を正確に伝えることは検索エンジン最適化として考えることができるものの、欲張って複数のテキストを強調した場合には、それぞれの強調具合が薄まると考えておいたほうが無難でしょう。

ページの中でユーザーに対して強調したい部分だけ、ストロングタグを使うことで、結果的に自然と理想的なSEOとなるでしょう。

SEO・SEO対策

テキストの論理的強調と装飾的太字

ウェブページ内において<strong>タグは、囲われたテキストの内容自体を強調するため、文章中の論理的強調ではなく、装飾として単純にテキストを太字にする場合は、<b>タグを用いたり、インライン要素などで該当箇所を囲いCSSで該当箇所をfont-weightでボールド指定するという方法が用いられます。

<strong> 類似タグ

<strong>タグの類似タグとして以下のタグがあります。

<em>
<b>　装飾としての太字

<strong></strong>

論理的な強調とSEOにおける評価の真実

より専門的な視点では、strongタグは単に文字を太くするための装飾的な要素ではなく、その箇所が「強い重要性」を持っていることを示す論理的な強調タグとして扱います。

Googleなどの検索エンジンは、strongタグで囲まれたテキストを「ページの主題において重要なキーワード」であると認識する傾向にあります。しかし、検索順位を上げたいがためにページ内の至る所にこのタグを多用することは、かえって情報の焦点がぼやけるだけでなく、不自然な最適化として評価を落とすリスクも孕んでいます。あくまでユーザーにとっての読みやすさを最優先にし、情報の優先順位を整理する目的で使用することが、長期的なSEOの成果を維持するために重要です。

アクセシビリティと音声読み上げへの配慮

ホームページ（ウェブサイト）の品質を左右する大きな要素の一つに、アクセシビリティがあります。視覚障害者の方が利用するスクリーンリーダー（音声読み上げソフト）の中には、strongタグでマークアップされた箇所を、声のトーンやピッチを変えて強調して読み上げるものがあります。

視覚的な装飾のみを目的としたbタグとは異なり、strongタグは「意味」を伴う強調です。どの情報が本当に重要なのかを機械的にも正しく伝える設計は、すべてのユーザーにとって情報にたどり着きやすいホームページを構築することに直結します。こうした細部へのこだわりが、結果としてホームページ（ウェブサイト）全体の専門性と信頼性を底上げすることになります。

事業成果を最大化する情報の骨組み作り

事業の成果を最大化するためには、ホームページ内の膨大な情報の中から、ユーザーが瞬時に重要なメッセージを拾い上げられるように配慮しなければなりません。コンテンツマーケティングの視点では、強いメッセージ性を持つ結論部分や、ユーザーに最も伝えたいベネフィットの箇所に限定してstrongタグを活用することが効果的です。

情報のメリハリを明確にすることは、ユーザーの理解を助け、離脱を防ぐための有効な手段となります。適切に構造化され、意図が明確に伝わるテキスト設計を行うことは、事業の信頼感を醸成し、最終的なコンバージョン率の向上にも大きく寄与するかもしれません。

この<strong>タグはhtml4.01、html5どちらのhtmlバージョンで制作されたホームページ（ウェブサイト）でも使用することができるため、CMS内で生成するコンテンツなどにおいても、ベースとなるWordPressテーマなどのhtmlバージョンに影響されず使用することができます。

ホームページ制作・SEOの1ポイント

ストロングタグで、ページのテキストの中で単語や段落など、重要な部分を指定することができますが、指定しすぎると、各指定箇所の重要度が薄まっていくため、ある程度限定的に使うべきであると考える事できます。

SEOのためにとストロングタグを乱用しても、この指定は他テキスト部分との相対的な重要性が高まると考えれば、全てのテキストにストロングを付けても意味が無いのではないかと考える事もできます。

b（ボールド）

<b></b>

ホームページ制作（ウェブサイト制作）の際に使用する<b>タグ（ボールド）についてのご説明です。

ホームページ制作において<b>（ボールド）タグを使用することによって、ウェブサイト・ホームページ内のテキストデータ（文字）に対して「ボールド表示」の属性を与えることができます。論理的な強調というよりも、装飾的な太字表記を目的としています。

<b> ボールド表示、テキスト太字

<b>タグで囲まれた部分のテキストを太字にします（ボールド表示）。

ホームページ制作においてホームページ（ウェブサイト）を構成するHTML文書の中で、該当箇所を太字表示したい時に使用します。

<b>タグは特定箇所の太字表示の際に使用しますが、ホームページ制作において太字は通常のテキストと比較して、太さの部分でコントラストを作ることで強調表示を行う場合に行う工夫です。太字を使えば、その部分がフォントによる他の文とは違った階層であることが明確に表現することができます。コンテンツのタイトル、見出しなどに太字を使うのが一般的です。これらは該当HTMLに対するCSSで設定します。

太字の工夫はホームページ上であっても可読性を維持することが可能ですが、あまり使い過ぎると地の文に対するコントラストが失われ、本来の目的である強調効果が損なわれてしまいますので使用には注意が必要です。強調したい単語は絞り込んで適切に表現すると良いでしょう。

ホームページ制作での<b>タグの使われ方

ホームページ制作において<strong>がテキストの論理的な強調を示すのに対して、<b></b>のボールドは、あくまでテキスト表示を太くする（ボールド表示する）といった、装飾的な意味でのタグになります。

<strong>との使い分けとしては、文章中の論理的な強調といった属性を与えず、ホームページ制作中に単に該当テキスト箇所を太字にしたい場合にCSSの指定が面倒である場合などに使用するという場面が想定できます。

<b></b>

この<b>タグはhtml4.01、html5どちらのhtmlバージョンで制作されたホームページ（ウェブサイト）でも使用することができるため、CMS内で生成するコンテンツなどにおいても、ベースとなるWordPressテーマなどのhtmlバージョンに影響されず使用することができます。

ホームページ制作・SEOの1ポイント

SEOを考えると、単語の強調の際にはボールドを使用するよりも<strong>等の論理的強調の方が適していると考えることができますが、検索エンジンはテキストの該当箇所のボールドやフォントサイズも考慮して重要な部分を解析していると推測することができるため、ある程度の重要性の提示には貢献するでしょう。

em（エンファシス）

<em></em>

ホームページ制作（ウェブサイト制作）の際に使用する<em>タグについてのご説明です。

ホームページ制作において<em>タグは、ホームページ（ウェブサイト）内のテキストを強調表示する際に使用します。

<em> 強調、強調表示

Emphasis（エンファシス）。テキストを強調表示。

<em>タグで囲まれた部分のテキストが強調表示されます。

一般的にはイタリック体で表記されます。

<em></em>

この<em>タグはhtml4.01、html5どちらのhtmlバージョンで制作されたホームページ（ウェブサイト）でも使用することができるため、CMS内で生成するコンテンツなどにおいても、ベースとなるWordPressテーマなどのhtmlバージョンに影響されず使用することができます。

ホームページ制作・SEOの1ポイント

テキストコンテンツの中で強調すべき単語や段落にemなどこうした強調系のタグを利用することで、ページの主題、重要な単語を検索エンジンに示すことができます。しかしながら、他のテキストとの相対的な強調になると推測されますので、多用すると強調としてのSEO効果が薄れていくと考えたほうが良いでしょう。

mark（マーク）

<mark></mark>

ホームページ制作（ウェブサイト制作）の際に使用する<mark>タグについてのご説明です。

ホームページ制作において<mark>（マーク）タグは、ページ内の該当箇所のテキストを目立たせる場合に使用します。

<mark> 文書内の該当テキストを目立たせる

<mark>タグは、文書内（ウェブページ内）の該当テキストをハイライトして目立たせる場合に使用します。マーク。

<strong>、<em>のようにその部分を強調せず、ユーザーの操作に関連している場所に、ユーザーが参照しやすいように目立たせる場合に使用します。

html5新規追加要素。

<mark></mark>

この<mark>タグはhtml5から新規追加された要素のため、html4.01以前のhtmlバージョンで制作されたホームページ（ウェブサイト）や、html5ベース以外のWordPressテーマなど、html5以外で記述するタイプのウェブサイト、CMS・CMSテーマでは利用することができません。

ホームページ制作・SEOの1ポイント

SEOの一つのポイントは、主題の明確化です。1000文字の文章がある時、その中のどの単語が、どの段落が重要であるかは、文脈を読み取った人間には理解できる可能性がありますが、まったく論理構造が指定されていない場合、検索ボットは単語の出現回数などで推測せざるを得ません。道しるべを示すことで各ページの主題を明確にすることはSEOの大原則です。

SEOにおけるstrongタグ、bタグ、emタグの適切な使い分け

ホームページ（ウェブサイト）のコンテンツを作成する際、検索エンジンからの評価を意識したタグの使い分けは非常に重要です。ここでは、「strong」「b」「em」の3つのタグがSEOに与える影響と、正しい運用方法について解説します。

検索エンジンに対する意味合いと評価の違い

Googleなどの検索エンジンは、画面上の見た目ではなく、裏側にあるHTMLコードを読み取ってページの内容を理解します。「strong」タグで囲まれたテキストは、ページ内で特に重要なキーワードやフレーズであると認識されます。事業の核となるサービス名や、ユーザーに最も伝えたい利点に対して使用することで、検索エンジンにページの主題を正確に伝える手助けとなります。

「em」タグも同様に検索エンジンに対して強調を伝えますが、こちらは「strong」ほどの強い重要性ではなく、文章の文脈におけるニュアンスの強調として認識されます。これに対して「b」タグは、重要性を伝達する役割を持たないため、検索エンジンの評価に直接的な影響を与えることはありません。製品の型番や、文章内で単に目立たせたいだけの単語には「b」タグを使用するのが適切です。

乱用のリスクと適切なマークアップによる品質向上

専門的には、「strong」タグや「em」タグの多用は避けるべき施策です。ページ内のあちこちに「strong」タグを配置したり、段落全体を囲んでしまったりすると、どの部分が本当に重要なのかが検索エンジンに伝わらなくなります。

場合によっては、過剰なSEO対策とみなされ、ページの評価が下がるリスクもあります。1つのページ内でこれらのタグを使用する回数に厳密な制限はありませんが、本当に強調すべき数箇所に留めるのが理想的です。視覚的に文字を太くしたり斜体にしたりしたい箇所が複数ある場合は、意味を持たない「b」タグや「i」タグを使用するか、CSSを用いたデザイン調整を選択します。正しくタグを使い分けることで、検索エンジンにもユーザーにも分かりやすい質の高いホームページ（ウェブサイト）になります。

HTMLタグとCSSにおけるフォントウェイトの関係性

ホームページ（ウェブサイト）の視覚的な読みやすさを高める上で、文字の太さやスタイルの調整は欠かせません。HTMLタグのデフォルト機能と、CSSを用いたより精密な制御の違いについて解説します。

ブラウザのデフォルトスタイルによる表示の違い

パソコンやスマートフォンのブラウザは、あらかじめHTMLタグに対する標準の表示スタイルを持っています。「strong」タグや「b」タグを使用すると、自動的にCSSの「font-weight: bold;」という設定が適用され、文字が太く表示されます。また「em」タグを使用すると、自動的に「font-style: italic;」が適用され、文字が斜体で表示されるのが一般的です。

これは手軽な方法ですが、ブラウザの種類やOSの環境、さらには日本語フォントの特性によって、太さや斜体の見え方が微妙に異なる場合があります。

日本語のウェブフォントでは綺麗な斜体が用意されていないことも多く、無理に斜体にすると文字が潰れて読みにくくなることがあります。ページ全体でメリハリをつけるためには、標準スタイルに頼るだけでは不十分な場面が出てきます。

CSSによる精密なデザインコントロールと分離

専門的には、文章の構造（HTML）と見た目のデザイン（CSS）を完全に分離して管理することが推奨されます。意味的な重要性はないものの、デザインの都合で文字を太くしたい場合は、「strong」や「b」タグを使わずに、「span」タグなどにクラス（class）を付与してCSSでコントロールします。CSSの「font-weight」プロパティでは、「bold」のような文字だけでなく、「400（標準）」「700（太字）」「900（極太）」といった数値による細かな指定が可能です。

採用しているウェブフォントの太さのバリエーションに合わせて数値を調整することで、事業のブランドイメージに合致した、美しく読みやすいホームページ（ウェブサイト）を実現できます。また「em」タグの斜体が読みにくい場合は、CSSで「font-style: normal;」を指定して斜体を解除し、代わりに文字色を変えたり太字にしたりして強調を表現することも有効な手法です。

CSSを活用した下線マーカーなど視覚的なデザインの工夫

テキストをただ太字や斜体にするだけでなく、CSSを組み合わせることで、より効果的にユーザーの視線を誘導することができます。ここでは、ホームページ（ウェブサイト）でよく用いられる視覚的な工夫について解説します。

ユーザーの視線を自然に誘導するマーカーデザイン

長文が続くページにおいて、特に注目してほしい箇所を際立たせる手法として「下線マーカー」があります。蛍光ペンで線を引いたようなこのデザインは、文字の色を変えたり全体を単に太字にしたりするよりも自然に目立ちユーザーの読む負担を軽減します。

「strong」タグ、「em」タグ、あるいは「span」タグに対して専用のクラス（class）を付与し、CSSの背景色（background）プロパティを工夫することで、画像を一切使わずにこのマーカー表現を実装できます。色合いや線の太さを事業のテーマカラーに合わせることで、サイト全体に統一感を持たせながら強調箇所を明示することが可能です。

下線マーカーの実装コード例とカスタマイズ

より専門的には、CSSの「linear-gradient（線形グラデーション）」を活用して下線マーカーを作成します。以下は、文字の下半分に黄色のマーカーを引くための基本的な記述例です。

.marker-yellow {
background: linear-gradient(transparent 60%, #ffff66 60%);
font-weight: bold;
}

このようにCSSを定義した上で、HTML側では <strong class=”marker-yellow”>強調したいテキスト</strong> のように記述します。「transparent 60%」の部分で文字の上部60%を透明にし、残りの40%に黄色（#ffff66）を適用することで、綺麗な下線マーカーが完成します。

数値を変更すればマーカーの太さを自由に変えることができますし、「#ffff66」の部分を別のカラーコードに変更すれば、事業のイメージに合った色を作成できます。意味合いとしての強調（strongやem）と、視覚的な誘導（CSSマーカー）を正しく組み合わせることで、集客とユーザー満足度の両方に貢献するホームページ（ウェブサイト）が完成します。

ホームページ（ウェブサイト）制作・作成に役立つHTML5のタグ一覧は
⇒html5 tag reference index ホームページ制作の基本タグ

ホームページ（ウェブサイト）のHTML編集方法

ホームページのHTML編集方法について。ホームページ（ウェブサイト）は基本的にHTMLで構成されています。かつてはHTML単独でHTMLの文書スタイルを設定していましたが、現代ではページの基本構成はHTMLで、外観はスタイルシート・CSSで設定されています。ホームページ制作・作成、ホームページ修正の基本はこのHTMLとCSSの編集で行います。

ホームページのHTML編集方法

ホームページ制作（ウェブサイト制作）なら
Web制作会社ファンフェアファンファーレへ