spanタグとは divタグとの違い 使い方と入れ子のルール

自社サイトの記事のソースを開くと、文章の途中に span という名前のタグが挟まっていた。

色を変えるためだろうとは想像がつく。それでも、strongとは何が違うのか。divと並べて説明されることが多いが、どこで使い分けるのか。spanの中にspanを入れても壊れないのか。

制作会社に任せたままで、タグの中身を聞いたことがない。そういう経営者やWeb担当者に向けて、この記事を書いています。

結論から言います。span要素は、文章の行の中の一部だけを囲む入れ物です。それ自体は何も意味しません。囲んだ部分に名前や役割を与えるのは、class、lang、dir といった属性のほうです。

divとの違いは、囲める範囲と並び方です。divは段落や見出しのようなまとまりを囲み、独立した行を作ります。spanは文の途中の語句を囲み、行を変えません。

意味のあるタグが合うなら、spanより先にそちらを選びます。重要な語ならstrong、強調ならem、引用ならq、日付ならtime。当てはまる名前が無いときに、はじめてspanの出番になります。

spanの中にspanを入れることは、仕様の上でも許されています。spanの中にdivを入れることは、仕様の上で許されていません。ブラウザは表示してくれますが、その表示は仕様が想定した形ではありません。

この記事では、これらの答えを、HTMLの仕様（WHATWG）を2026年11月8日に開いて確かめ、さらにブラウザで実際に動かした結果と合わせて書きます。確かめられなかったことは、そう書きます。

検索順位やAI検索の引用に、spanの有無が関係するかどうかは、公式の文書に記載が見つかりませんでした。ただし、Googleは重要なコンテンツをテキスト形式で出すことを求めており、spanの中の文字もテキストです。

この記事の軸は、「行の中の一部を囲むタグ1つの判断」です。タグの名前を覚える話は短くして、囲む前に確かめる4つの問いに落とします。

先に答え：span要素について、確かめられたこと

先に、この記事の結論を表にまとめます。右端の列は、その答えの根拠にした資料です。

疑問	答え	根拠にした資料
span要素は何を表すか	それ自体は何も意味しない。子を表すだけ	HTMLの仕様（WHATWG）のテキストレベルの章
どんな属性と組み合わせるか	class、lang、dir といったグローバル属性	HTMLの仕様（WHATWG）のテキストレベルの章
divとの違いは何か	spanは文中の語句を囲み、行を変えない。divはまとまりを囲み、独立した行になる	HTMLの仕様（WHATWG）と、ブラウザでの計測
spanの中にspanを入れてよいか	入れてよい。中身はフレージングコンテンツで、spanはその仲間	HTMLの仕様（WHATWG）のコンテンツの分類の章
spanの中にdivを入れてよいか	入れてはいけない。divはフレージングコンテンツに含まれない	HTMLの仕様（WHATWG）のコンテンツの分類の章
閉じ忘れるとどうなるか	外側の要素が終わるところまで、指定が続く	ブラウザでの計測
SEOやAI検索に関係するか	公式に記載なし	検索セントラル、OpenAIとAnthropicの公式文書

表の中で「記載なし」と書いた行は、調べて見つからなかったという報告です。ないことの証明ではありません。

この記事の読み方

悩みの種類によって、読む節が変わります。

いまの悩み	読む節
spanが何のためのタグか知りたい	span要素とは何か：仕様に書かれた定義
divとどう違うのか、幅や高さが効かない	divとの違い：行の中だけを囲む
strongやmarkと迷っている	先に考える意味のあるタグ
spanの中にspanやdivを入れたい	spanの中に入れてよいもの、入れられないもの
spanを重ねたら後ろの文まで変わった	閉じ忘れと数：複数のspanが後ろまで効く理由
文字の色や大きさを変えたい	文字の色や大きさを変える書き方
外国語が混ざる文章を書いている	言語や向きを示すspan
WordPressで色を付けたら何が出るか知りたい	WordPressで文字色を付けたときに出るHTML
自社サイトの状態を知りたい	弊社の公開ページで数えたspan
すぐ点検したい	今日できる点検

この記事で使う言葉

タグの話は、同じ言葉が場面によって違う意味で使われます。迷わないように、この記事での使い方を先に決めておきます。

言葉	この記事での意味
要素	開始タグから終了タグまでの全体。span要素と書けば、spanタグと中身をあわせたもの
属性	タグの中に書く追加の情報。class、lang、dir、style など
フレージングコンテンツ	文章そのものと、文中の語句を印づける要素の分類。spanやstrongはここに入る
フローコンテンツ	本文に置ける要素の、より広い分類。divやpもここに入る
入れ子	あるタグの中に、別のタグを入れること
グローバル属性	どの要素にも付けられる属性。classやlangが代表

この記事の根拠にした資料

この記事は、次の資料を2026年11月8日に開いて確かめた範囲だけで書いています。

資料	確かめたこと
HTMLの仕様（WHATWG）のテキストレベルの章	span要素の定義と使い方の例
HTMLの仕様（WHATWG）のコンテンツの分類の章	フレージングコンテンツの範囲
HTMLの仕様（WHATWG）のグループ化の章	div要素の定義
HTMLの仕様（WHATWG）の構文解析の章	閉じ忘れたときにブラウザが補うタグの一覧
W3Cが公開しているHTMLの検査サービス	入れ子の可否に対するエラーの内容
W3Cの勧告 WCAG 2.2と、その解説文書	色だけで伝えないこと、部分的な言語の指定
Google 検索セントラル	SEOスターターガイドと、AI機能とウェブサイト
OpenAIとAnthropicの公式文書	クローラーの種類と役割
WordPressのブロックエディタの公開ソースコード	文字色や下線で出るタグ

加えて、ブラウザ（Chromium 145）でHTMLを実際に動かして測った結果と、弊社の公開ページを数えた結果を載せます。弊社の数字は、そう明記します。

Q&Aサイトで見かけた、spanを重ねたら後ろまで変わる質問

先日、Q&Aサイトでこのような悩みを拝見しました。

文章の頭に、spanタグを何度も重ねて使っている。太字にして、文字の大きさを変えて、色も変えている。ところが、その指定が文章の後ろの部分にまで及んでしまう。

最後に閉じるspanは、いくつ必要なのか。質問はそう尋ねていました。

自社サイトのページを直している方なら、どこかで同じ経験があるはずです。見た目を整えようとして、タグを足せば足すほど、どこまで効いているのか分からなくなります。

回答に書かれていたこと

寄せられていた回答の要点は、3つありました。

1つ目は、spanには開始タグと同じ数の終了タグが必要という点です。改行のbrのような、閉じなくてよいタグではありません。

2つ目は、効かせる範囲が同じなら、spanを複数に分けなくてよいという点です。1つにまとめられます。

3つ目は、強調の意味を添えてよい場面なら、strongを使う手もあるという点です。

この3つは、どれも次の節以降で、仕様とブラウザの動きに照らして確かめます。

回答のどこまでが確かめられるか

回答の内容が正しいかどうかは、ブラウザで動かせば確かめられます。この記事では、3つとも実際に測りました。

結果を先に言うと、3つとも正しい内容でした。ここに、回答には書かれていなかった細かい点を1つ足せます。

spanを閉じ忘れても、効くのは外側の要素の終わりまでです。段落の中で閉じ忘れても、次の段落には続きません。ところがstrongを閉じ忘れると、次の段落にまで続きます。この違いは、後の節で測った結果を載せます。

質問から読み取れる3つの疑問

質問の文面から、読み手が知りたいことを3つに整理しました。この記事は、この3つに順に答えます。

疑問	答える節
spanは何個閉じればよいのか。そもそも何を囲むタグなのか	span要素とは何か、閉じ忘れと数
太字や大きさや色を変えたいとき、spanでよいのか	先に考える意味のあるタグ、文字の色や大きさを変える書き方
指定が後ろの文まで及ぶのは、なぜか	閉じ忘れと数

先に短く答える

囲んだ数だけ閉じます。開始のspanが3つなら、終了も3つです。

ただし、3つ重ねる前に、1つにまとめられないかを確かめます。太字と大きさと色を1つのspanに書けば、閉じる数は1つで済みます。

太字が「重要」という意味を持つなら、strongが合います。見た目だけの太字なら、spanにclassを付けて、CSSで指定します。

この先の節で、それぞれの根拠を示します。

span要素とは何か：仕様に書かれた定義

まず、HTMLの仕様（WHATWG）が、span要素をどう定義しているかを見ます。2026年11月8日に開いた、テキストレベルの章の記述です。

仕様の一文

仕様は、span要素について次のように書いています。

「span要素はそれ自体では何も意味しないが、class、lang、dir といったグローバル属性と組み合わせると役に立つことがある。span要素は、その子を表す。」（英語の原文を和訳）

この文には、2つのことが書かれています。

1つは、spanが単独では何も意味しないことです。strongなら「重要」、codeなら「コンピュータのコード」という意味がありますが、spanにはありません。

もう1つは、使うときは属性とセットになる点です。属性を何も付けないspanは、囲んでも何も起きません。

仕様が挙げた使いどころの例

仕様には、spanの使い方の例が2つあります。

1つは、プログラムのコードの断片で、予約語や変数の名前を囲んで、CSSで色分けする例です。語の種類ごとにclassの名前を変えて、見た目だけを分けています。

もう1つは、使い方の一覧の表にある例で、フランス語の語句を日本語の文に混ぜるときの書き方です。語句をspanで囲み、lang属性に言語の名前を書いています。

この2つの例は、spanの仕事が2種類あることを示しています。見た目を変えるための目印と、言語などの情報を付ける台です。

内容モデルと分類

仕様は、span要素の中に入れられるものを「フレージングコンテンツ」と定めています。文章そのものと、文中の語句を印づける要素の分類です。

span自身も、フレージングコンテンツに含まれます。そのため、フレージングコンテンツが置ける場所には、spanを置けます。

段落のp、見出しのh1からh6、リンクのa、ボタンのbutton、いずれの中にもspanを置けます。これは、ブラウザで実際に動かして、どれも崩れずに入ることを確かめました。

標準の見た目

ブラウザは、spanに特別な見た目を付けません。

ブラウザ（Chromium 145）で測ると、spanの文字は太さが標準、斜体なし、背景色なしでした。strongは太さが700、emは斜体、markは黄色い背景が付きました。

つまり、spanで囲んだだけでは、見た目も変わりません。見た目を変えるのは、あとから付けるCSSです。

要素	ブラウザの標準の見た目（計測）
span	変化なし。太さ400、斜体なし、背景なし
strong	太さ700
b	太さ700
em	斜体
mark	黄色の背景

divとの違い：行の中だけを囲む

divとspanは、よく並べて説明されます。どちらも意味を持たない入れ物で、違いは囲める範囲と、並び方です。

divの詳しい仕様は、同じ日に公開した記事で扱いました。ここでは、spanの側から見た違いを書きます。

divの意味と使いどころは、divタグの使い方 横並びと中央寄せの書き方と意味を持つタグとの使い分けにまとめています。

分類の違い

HTMLの仕様では、divはフローコンテンツです。spanはフローコンテンツであり、フレージングコンテンツでもあります。

この差が、入れ子のルールに効いてきます。spanの中に入れられるのは、フレージングコンテンツだけです。divはフレージングコンテンツではないので、spanの中に入れられません。

見た目の違いを測った

ブラウザで、幅300ピクセルの枠の中に、「前の文」「タグ」「後の文」を並べて、真ん中の「タグ」だけをspanで囲みました。文字の大きさは16ピクセルです。

測った結果を表にします。

条件	測った大きさ	読み取れること
spanをそのまま囲む	幅32、高さ16	文字の分の幅しかない。行は変わらない
spanに幅200、高さ100を指定	幅32、高さ16のまま	幅と高さの指定は効かない
spanに上下の余白30を指定	高さ16、位置も同じ	上下の外側の余白は効かない
spanに上下の内側の余白20を指定	背景が高さ56に広がる	背景は広がるが、行の高さは変わらない
spanを display:block にする	幅300、高さ24、次の行から始まる	divと同じ並び方になる
spanを display:inline-block にして幅200、高さ100	幅200、高さ100	幅と高さが効くようになる

幅・高さ・上下の余白が効かない

spanに幅や高さを書いても、効きません。これは、spanが「行の中の文字と同じ扱い」で並ぶからです。

文字の大きさが行の高さを決めており、行の中の一部分だけに幅や高さを与える仕組みは、標準にはありません。

幅や高さを効かせたいときは、spanを display:inline-block にします。これで、行の中に並んだまま、幅と高さを持てます。

背景は広がるが、行の高さは変わらない

上下の内側の余白（padding）を大きくすると、背景色の帯は広がります。ところが、行の高さは変わりません。

測ると、内側の余白を上下に20ずつ足したspanの背景は、高さ56になりました。ところが、それを含む枠の高さは24のままでした。

そのため、背景が上下の行に食い込みます。行の間隔を空けないまま、spanに大きな内側の余白を付けると、隣の行の文字に背景が重なります。

折り返すと、背景は行ごとに分かれる

spanの中の文章が長くて、行の端で折り返すとき、spanは2つの四角に分かれます。

測ると、枠の幅300の中で、長い文章を囲んだspanは、2行にまたがり、四角が2つになりました。

背景色や枠線を付けたspanは、折り返した行ごとに、帯が分かれて表示されます。

並べたときの隙間

spanを display:inline-block にして横に2つ並べるとき、ソースの中で2つのspanの間に改行を入れると、その改行が空白の文字として扱われます。

測ると、幅100のinline-blockのspanを、改行を挟んで2つ並べたとき、2つ目は左から105の位置から始まりました。間に5ピクセルの隙間があります。

改行を挟まずに続けて書いた場合は、2つ目は100の位置から始まり、隙間はありませんでした。

この隙間は、文字の大きさやフォントによって変わります。この環境での測定値です。

違いを表にまとめる

項目	span	div
囲むもの	行の中の語句	段落や見出しを含むまとまり
標準の並び方	行の中に続けて並ぶ	独立した行になり、幅いっぱいに広がる
幅・高さの指定	効かない（inline-blockにすると効く）	効く
中に入れられるもの	フレージングコンテンツだけ	フローコンテンツ
pの中に置けるか	置ける	置けない
仕様の位置づけ	意味を持たない。属性と組み合わせて使う	他に合う要素が無いときの最後の手段

pの中に置けるのは、どちらか

pの中にdivを書いたらどうなるか、は前日の記事で扱いました。結果だけ書くと、ブラウザは、divの手前で段落を閉じてしまいます。

spanは、pの中に置いても閉じられません。測ると、<p>前の文<span>中</span>後の文</p> は、書いたとおりのまま保たれました。

pタグの仕様と、段落の区切り方は、pタグとは brタグやdivタグとの違いと段落の区切り方の決め方にまとめています。

先に考える意味のあるタグ

spanを書く前に、囲もうとしている語句に合う名前のタグが無いかを確かめます。HTMLには、文中の語句を印づけるタグが、あらかじめ用意されています。

意味のあるタグを選ぶ理由は、見た目が同じでも、意味が機械に伝わるかどうかが変わるからです。

強調と重要は、別のタグ

文章の一部を目立たせる目的は、いくつもあります。HTMLの仕様では、目的ごとにタグが分かれています。

目的	合うタグ	仕様の説明（和訳）
重要さ、深刻さ、緊急性	strong	内容の重要さ、深刻さ、緊急性を表す
声の強調	em	内容に置く強調（ストレス）を表す
参照のための目印	mark	別の文脈での関連性のために、印や強調をつけた部分を表す
注意を引く語（実用目的）	b	余計な重要性を伴わずに、注意を引く語句を表す
別の声や調子	i	地の文とは別の声や調子の部分を表す
脇の注意書き	small	小さな字で書く注意書きなど、脇の注釈を表す

strongの意味と、「非推奨」という噂の真偽は、strongタグの使い方 非推奨の噂の真偽とb・emとの使い分けにまとめています。

語句の種類を示すタグ

強調以外にも、語句の種類を示すタグがあります。仕様の使い方の一覧に載っているものから、よく使うものを選びました。

囲む対象	合うタグ	例
略語	abbr	正式名称を title 属性に書く
日付や時刻	time	datetime 属性に機械が読める形を書く
コンピュータのコード	code	ファイル名やプログラムの断片
作品の題名	cite	本や論文の名前
他の文章からの短い引用	q	引用符はブラウザが付ける
用語の定義	dfn	用語が最初に定義される箇所
添え字	sub、sup	化学式の2、累乗など

どのタグも、囲んだ語句の種類を、見た目と別に機械へ伝えます。spanには、その役割がありません。

名前が見つからないときだけ、spanを使う

上の表に当てはまる語句なら、spanは使いません。当てはまらない部分だけが、spanの出番です。

たとえば、料金表の数字の部分だけ色を変えたい。商品名の一部だけ、字体を変えたい。文章の中で「注目してほしいが、重要とは言えない」語句に、背景色を付けたい。

こういうときは、意味のあるタグが見つかりません。見た目だけの目的ですから、spanにclassを付けて、CSSで指定します。

同じ見た目でも、読み上げでは違う

意味のあるタグと、spanの違いを、ブラウザのアクセシビリティの情報で確かめました。

「これは重要で、これは見た目だけ太字です。赤字」という文章の、重要の部分をstrong、見た目だけ太字の部分と赤字の部分をspanで囲みました。

Chromiumのアクセシビリティの木で見ると、strongで囲んだ部分は「strong」という役割で出ました。spanで囲んだ2か所は、役割が付かず、ただの文字として出ました。

画面で見える太さは、strongとspanの太字で同じです。ところが、機械が受け取る情報は違います。

spanの中に入れてよいもの、入れられないもの

次に、spanの中に何を入れてよいかを確かめます。質問の中にあった「spanの中にspan」や、よく検索される「spanの中にdiv」の答えです。

spanの中にspanは入れてよい

spanはフレージングコンテンツで、spanの中に入れられるのもフレージングコンテンツです。そのため、spanの中にspanを入れることは、仕様で許されています。

W3Cが公開しているHTMLの検査サービスに通すと、spanの中にspanを入れたソースは、エラーが1件も出ませんでした。

3段に重ねても、ブラウザは書いたとおりに保ちました。

入れ子のspanは、外側の指定を引き継ぐ

入れ子にしたspanは、内側が外側の指定を引き継ぎます。

測ると、外側のspanに赤い色を付けたとき、内側のspanにも同じ赤が付きました。文字の色は、親から子へ引き継がれる性質があるからです。

文字の大きさも引き継がれます。外側のspanを20ピクセルにして、内側のspanを150パーセントにすると、内側は30ピクセルになりました。パーセントは、親の大きさに対する割合です。

そのため、入れ子の段数が増えるほど、最終的な見た目を頭で計算するのが難しくなります。

spanの中にdivは入れてはいけない

divはフレージングコンテンツではないため、spanの中に入れることは仕様で許されていません。W3Cの検査サービスは、次のエラーを返しました。

「この文脈では、div要素は、span要素の子として許されていません。」（検査サービスが返した英語のメッセージを和訳）

ところが、ブラウザは何も直さず、そのまま表示します。測ると、spanの中のdivは、書いたとおりの入れ子で残り、独立した行として表示されました。

幅300の枠の中で、前の文、divの中身、後の文が、3つの行に分かれて並びました。

pの中にspanを置いて、その中にpやdivを入れると崩れる

pの中のspanの、さらに中にdivを入れると、ブラウザは手前で段落を閉じます。

測ると、<p>前の文<span><div>中のdiv</div></span>後の文</p> は、次の形になりました。

<p>前の文<span></span></p><div>中のdiv</div>後の文<p></p>

spanは空っぽになり、divは段落の外に出て、後の文は段落の外に残りました。さらに、余った終了タグの分だけ、空の段落が1つ増えました。

W3Cの検査サービスは、この形に対して、「終了タグpが暗黙に閉じられている」「閉じられていないspan」「余計な終了タグspan」と、複数のエラーを返しました。

入れ子の可否を一覧にする

ここまでの結果を、一覧にします。

書き方	仕様	ブラウザの動き
span の中に span	許される	書いたとおり保たれる
span の中に strong、em、a、code	許される	書いたとおり保たれる
span の中に div	許されない	書いたとおり保たれ、独立した行になる
span の中に p	許されない	書いたとおり保たれる。pの中のspanなら段落が割れる
span の中に h2	許されない	書いたとおり保たれる
ul の直下に span	許されない	書いたとおり保たれる
table の直下に span	許されない	表の手前へ移される

ブラウザが直さないものは、自分で見つける

ブラウザは、仕様に反するHTMLを、できるだけそのまま表示しようとします。見た目に問題が出ない限り、誰も気づきません。

そのため、仕様に合っているかどうかは、検査サービスで確かめます。W3Cのサービスなら、ページのアドレスか、貼り付けたソースを渡すだけです。

spanの中にdivがあって、直したいときの考え方は単純です。外側を、spanからdivに変えます。divの中にspanを置くのは、仕様で許されています。

閉じ忘れと数：複数のspanが後ろまで効く理由

Q&Aサイトの質問に戻ります。spanを複数重ねたら、指定が後ろの文まで及んだ、という悩みです。

開いた数と閉じた数が合わないと、何が起きるか

測るために、3つのspanを開いて、1つしか閉じないHTMLを書きました。外側から、赤い色、太字、30ピクセルの大きさを順に指定しました。

結果は、次のとおりです。

場所	色	太さ	大きさ
外側のspanの全体	赤	標準	16
中のspanの全体	赤	太字	16
いちばん内側のspan	赤	太字	30
同じdivの外にある別のdiv	黒	標準	16

閉じられなかった2つのspanは、それを囲むdivの終わりで、ブラウザが自動的に閉じていました。そのため、同じdivの中の残りの文章には、赤と太字が及んでいます。

spanは、段落の終わりで止まる

別の測定もしました。段落の中でspanを閉じ忘れ、次の段落を続けて書きました。

次の段落は、黒い色のままで、赤は続きませんでした。ブラウザは、段落が終わるところでspanを閉じていたからです。

つまり、spanの閉じ忘れは、外側の要素の中で止まります。質問のように、文章全体が1つのdivの中に入っていれば、その終わりまで赤が続きます。

strongは、閉じ忘れると次の段落まで続く

同じ測定を、strongでも行いました。段落の中でstrongを閉じ忘れ、次の段落を書きました。

ブラウザが整えたHTMLを見ると、次の段落も、strongで囲まれていました。strongは、閉じ忘れた指定が、次の段落にも補われます。

HTMLの仕様（WHATWG）の構文解析の章に、この動きをするタグの一覧があります。a、b、code、em、i、s、small、strong、u などです。spanは入っていません。

この違いのため、spanの閉じ忘れは気づきにくく、strongの閉じ忘れは、ページ全体が太字になって気づきやすいです。

タグ	閉じ忘れたときの動き（計測）
span	外側の要素の終わりで止まる。次の段落には続かない
strong	次の段落にも補われ、続いていく

数を減らす書き方

閉じる数を減らす一番の方法は、spanの数を減らすことです。

太字、大きさ、色が、同じ範囲に効くなら、1つのspanにまとめられます。測ると、3つの指定を1つのspanに書いた場合、そのspan1つに赤、太字、30ピクセルのすべてが付きました。

CSSの側で、1つのclassに色と太さと大きさをまとめて書きます。指定を変えたいときも、CSSの1か所を直すだけで済みます。

文字の色や大きさを変える書き方

spanがいちばん使われる場面は、文字の色や大きさを変えることです。ここでは、書き方の選択肢を比べます。

styleを直接書くか、classを付けるか

spanで色を変える書き方は、2通りあります。

1つは、spanの中に style 属性を直接書く方法です。その場で効くので、1回だけ使うには手軽です。

もう1つは、spanに class 属性を付けて、色の指定はCSSに書く方法です。同じ見た目を何か所にも使うときに向いています。

比べる点	style を直接書く	class を付けてCSSに書く
1か所だけ変えるとき	手軽	CSSに1行足す手間がある
同じ見た目を10か所に使うとき	10か所に同じ指定が散らばる	CSSの1か所に集まる
色を後から変えたいとき	10か所すべてを探して直す	CSSの1か所を直す
何のための指定か	ソースを読んでも分からない	class の名前で役割を残せる

仕様の例も、classを使っています。コードの断片を色分けする例では、語の種類ごとにclassの名前を変えていました。

短い例：料金の数字だけ色を変える

class を使った書き方の例を、1つだけ載せます。

“`html

月額は1,000から選べます。

“`

css
.price { color: #c00; font-weight: bold; }

class の名前は、役割で付けます。見た目の名前は付けません。「red」と付けると、色を青に変えたとき、名前と中身が食い違います。「price」なら、色を変えても名前はそのまま使えます。

色だけで意味を伝えない

色を変えたspanには、気をつけたい点が1つあります。W3CのWCAG 2.2は、達成基準1.4.1で次のように定めています。

「色は、情報を伝える、動作を示す、反応を促す、視覚的な要素を区別する、のための唯一の視覚的な手段として使われていない。」（英語の原文を和訳）

W3Cが2024年12月12日に勧告として公表した版です。

たとえば、「赤い文字の項目は必須です」と書いたとき、赤だけが目印になっています。色の見分けが難しい人や、読み上げで聞く人には、必須かどうかが伝わりません。

必須の項目なら、「必須」という文字を添えます。色は、あくまで補助にします。

入れ子の指定は引き継がれる

前の節で測ったとおり、入れ子のspanは、色も文字の大きさも引き継ぎます。

指定を書くときは、親が決めた値に対して、子が何を足すのかを考えます。パーセントで大きさを書いた入れ子は、掛け算になります。

20ピクセルの親の中で150パーセントのspanを入れると30ピクセルです。その中にさらに150パーセントのspanを入れれば、45ピクセルになります。

言語や向きを示すspan

spanのもう1つの仕事は、語句の言語や向きを示すことです。仕様の使い方の一覧にも、この例が載っています。

日本語の文に外国語が混ざるとき

日本語のページの中に、英語の語句やフランス語の語句が混ざることがあります。ページ全体の言語は、html要素の lang 属性で宣言します。

混ざった語句だけ別の言語であることを示したいときに、spanで囲み、lang 属性に言語の名前を書きます。

“`html

管理画面はSearch Consoleを開きます。

“`

この指定は、読み上げの機能に言語を伝えます。W3Cの解説文書（WCAG 2.2の理解のための文書）には、こう書かれています。

「スクリーンリーダーは、その文章の言語の発音の規則を使える。」（英語の原文を和訳）

指定が無ければ、英語の語句を日本語の発音の規則で読み上げてしまい、聞き取れなくなります。

lang 属性の値の書き方や、Googleとの関係は、lang属性とは Googleは見ない それでも書く理由と確かめ方にまとめています。

WCAGが求めていること

WCAG 2.2の達成基準3.1.2は、部分的な言語の指定について、次のように定めています。

「コンテンツ内の各文章または語句の人間の言語は、固有名詞、専門用語、言語が特定できない語、および直前の周囲の文章の日常語になっている語句や文を除いて、プログラムで判断できる。」（英語の原文を和訳）

この基準の適合レベルは、AAです。

固有名詞や、日本語の中で日常語になっている外来語は、除外されています。つまり、日本語の文に混ざった「パソコン」や「メール」に、lang を付ける必要はありません。

求められているのは、文章や語句が丸ごと外国語で書かれている部分です。たとえば、英語の引用文や、外国語の商品説明の一節です。

向きを示す dir 属性

dir 属性は、文字の向き（左から右か、右から左か）を示す属性です。アラビア語のように、右から左へ書く言語を混ぜるときに使います。

日本語のサイトで使う場面は多くありません。ただ、仕様には、向きを分けるための専用のタグ（bdiとbdo）があります。向きを扱う場面では、spanより先に、これらを検討します。

目的	合うタグ
言語を示す	span に lang 属性
向きを示す	span に dir 属性。向きの影響を切り離したいときは bdi
向きを強制的に反転する	bdo

WordPressで文字色を付けたときに出るHTML

WordPressのブロックエディタで文字の色を変えると、どんなHTMLが出るのか。WordPressのブロックエディタの公開ソースコードを、2026年11月8日に開いて確かめました。取得した版は、2026年11月7日が最終更新のものです。

書式ごとに出るタグ

ソースコードの中で、文字に付けられる書式が、どのタグを出すのかを定めている箇所を読みました。

エディタの書式	出るタグ
太字	strong
斜体	em
取り消し線	s
インラインコード	code
キーボード入力	kbd
下付き文字	sub
上付き文字	sup
文字色・背景色	mark（class と style 付き）
下線	span（style に text-decoration: underline）
言語	bdo（lang と dir 付き）

意外なのは、文字色でspanが出ずに、markが出る点です。markの標準の見た目は黄色の背景です。ソースコードには、それを打ち消すために、背景色を透明にする指定が書かれていました。コードの中のコメントにも、「markの標準の色を上書きする」という意味の説明がありました。

ここは弊社の整理です。markは仕様の上で「参照のための目印」を意味します。見た目だけを変える目的で、文字色にmarkが使われているのは、意味と用途がずれています。ただし、WordPressが出す形なので、そのまま使えば足ります。

spanが出るのは、下線のときだけ

表を見ると、ブロックエディタの書式で、spanを出すのは下線だけです。しかも、下線の指定は class に入らず、style 属性に直接書かれます。

つまり、ブロックエディタだけで書いたページには、本文の中にspanがほとんど現れません。

自社のページの本文にspanが多く出ているとき、原因は別のところにあります。別のエディタからの貼り付けや、ページを作るためのプラグイン、テーマの部品などです。この記事では、その原因までは確かめていません。

自分のページで確かめる手順

ページの本文にspanがあるかどうかは、ブラウザの機能で確かめられます。

1. 確かめたいページを開く
2. 本文の文字の上で右クリックして、「検証」を選ぶ
3. 表示されたソースの中で、本文の部分を開く
4. span という文字を探して、style が付いているか、class が付いているかを見る

style が付いたspanが大量にあるときは、後から直しにくいページになっています。まず、同じ指定のものを数えて、class にまとめられないかを考えます。

弊社の公開ページで数えたspan

弊社のサイトで、spanがどれくらい使われているかを数えました。

調べ方

弊社が公開している記事の最新50本を、WordPressの公開APIで取得しました。取得した日は2026年11月8日です。

記事本文のspanは、50本の本文のHTMLを数えました。ページ全体は、そのうち10本を、1本ずつ1.5秒の間隔を空けて取得して数えました。

記事の本文には、spanが無かった

50本の本文には、spanが1つもありませんでした。

本文は、p、h2、h3、表、リスト、図の要素で組まれていました。文中の強調には、strongが使われています。

数えたもの	50本の合計
span	0個
strong	591個（1本あたり約12個）
code	115個
em、mark、b、i	0個

強調は、すべてstrongで統一されていました。見た目だけを変えるためのspanは、本文に1つもありません。

ページ全体では、32〜34個だった

ページ全体を取得した10本では、spanは1ページあたり32〜34個ありました。すべて、テーマが出力している部分です。

種類	1ページあたりの数	使われている場所
class 付き	25〜26個	メニューの文字、パンくずリスト、日付、投稿者名、共有ボタン、前後の記事のリンク
属性なし	6〜7個	リンクの中の文字（メニューやパンくず）
lang 付き	1個	著作権の表示の記号の部分
style 付き	0個	なし
spanの中にspan	0個	なし

lang 付きの1個は、ページ下部の著作権表示にあります。<span lang="en">©</span> の形で、記号だけに英語の言語を付けていました。

日付の表示は、<time> の中に2つのspanがあり、年と月日を別々に囲んでいました。見た目を分けるための、class の目印です。

数字の読み取り方

10本のspanの数は、32から34の間に収まりました。構造がテーマで決まっているので、ページごとの差はほとんど出ません。

この数字が示すのは、テーマ側の構造です。記事ごとの偏りは、ここからは読み取れません。

弊社の場合、本文の側に、style付きのspanの増えすぎや、入れ子の乱れは見つかりませんでした。点検するなら、テーマ側のspanが、見た目に必要な数かどうかです。

SEOとAI検索では、公式に何と書いてあるか

spanの有無や数が、検索順位やAI検索の引用に関係するのか。公式の文書を、2026年11月8日に開いて確かめました。

Google 公式 SEO スターター ガイド

Google検索セントラルのSEOスターターガイド（日本語版・2025年12月18日更新）に、HTMLの意味づけについての記述がありました。

「ウェブは一般に正しくない HTML で書かれています。そのため、Google 検索が HTML 規格に潜むセマンティックスの意味に依存することはめったにありません。」

この文章は、見出しの順序についての説明の中にあります。spanという要素そのものには、触れていません。

読み取れるのは、Google検索が、HTMLの意味づけだけを頼りに内容を判断することは、めったにないという点です。

AI機能とウェブサイト

Google検索セントラルの「AI機能とウェブサイト」（日本語版・2025年12月31日更新）には、次の記述がありました。

「AI による概要と AI モードのための特別な最適化を行う必要はありませんが、次のようなこれまでの SEO の基本は引き続き重要となります。」

基本の項目の1つに、「重要なコンテンツはテキスト形式で提示します。」があります。spanで囲んだ文字は、画像の中の文字とは別で、テキストです。この項目に反するものではありません。

同じページは、AI機能で表示されるために、新しい機械可読ファイルやマークアップを作る必要はない、とも書いています。spanの数や入れ子の深さについては、このページに記載がありませんでした。

OpenAIとAnthropicの公式文書

OpenAIのクローラーに関する文書には、OAI-SearchBot と GPTBot という2種類の仕組みを、robots.txt で別々に管理できると書かれています。

Anthropicの文書には、ClaudeBot、Claude-User、Claude-SearchBot という3種類のロボットの役割が書かれています。

どちらの文書にも、spanを含むHTMLの要素の使い方についての記述は、見つかりませんでした。

確かめられた範囲を表にする

資料	spanの使い方との関係
HTMLの仕様（WHATWG）	単独では意味を持たない。属性と組み合わせて使う
WCAG 2.2	色だけで伝えない。部分的な言語は判断できるようにする
検索セントラル（SEOスターターガイド）	HTMLの意味づけに頼ることは、めったにない
検索セントラル（AI機能）	特別な最適化は不要。spanの数は記載なし
OpenAIとAnthropicの文書	公式に記載なし

公式の記述を、書き方に当てはめる

ここは弊社の整理です。

公式が求めているのは、重要な内容をテキストで置くことです。その文章をspanで囲むかどうかは、公式の関心の外にあります。

spanを減らす理由は、読む人と直す人にあります。意味のあるタグが使えれば、読み上げの機能が受け取る情報が増えます。classの名前が役割を表していれば、あとから直す人が迷いません。

検索やAIの引用は、その理由に入りません。

spanを書く前の4つの問い

ここまでの内容を、実務で使える4つの問いにまとめます。spanを書く前に、順番に確かめます。

問い1：この語句に、名前のあるタグが合うか

最初に、囲もうとしている語句の役割を言葉にします。

重要ならstrong、強調ならem、参照のための目印ならmark、日付ならtime、略語ならabbr、引用ならq。当てはまるタグがあれば、spanは使いません。

当てはまる名前が無いときは、問い2に進みます。

問い2：囲む目的は、見た目か、言語や向きか

名前が見つからない語句は、見た目を変えるか、言語や向きを示すために囲みます。

言語を示すなら、spanに lang 属性を付けます。向きを示すなら、dir 属性です。見た目を変えるなら、問い3に進みます。

問い3：効かせたい範囲は、一部だけか

見た目を変えたい範囲が、段落や見出しの全体なら、spanは要りません。段落のp、見出しのh2に、直接classを付けて指定できます。

文の途中の一部だけを変えたいときに限って、spanを使います。

問い4：あとから探せる名前を付けたか

spanには、役割を表すclassの名前を付けます。見た目の名前（赤、大）は付けません。

style 属性を直接書くのは、その場限りの1回だけにとどめます。同じ指定が2か所以上に現れたら、classにまとめます。

4つの問いの判定表

状況	判定	書き方
重要な警告の語句	問い1で解決	strong
略語の説明を添えたい	問い1で解決	abbr に title 属性
本文に混ざった英語の語句の読み	問い2で言語	span に lang 属性
料金の数字だけ色を変えたい	問い4まで進む	span に役割のclass
段落全体の文字を大きくしたい	問い3で不要	pにclassを付ける

複数の問いが同時に当てはまるとき

1つの語句が、重要で、しかも英語のこともあります。そのときは、タグを入れ子にします。

仕様の上でも、strongの中にspanを入れること、spanの中にstrongを入れることは、どちらも許されています。意味のあるタグを外側に置くと、構造が読みやすくなります。

質問者の場合に当てはめる

Q&Aサイトの質問に、4つの問いを当てはめます。

太字、大きさ、色の指定を、文の頭にまとめて掛けたい。重要という意味があるなら、問い1でstrongが合います。見た目だけなら、問い4まで進み、1つのspanに役割のclassを付けます。

どちらでも、閉じる終了タグは1つで済みます。

書き直しの例

重ねたspanを、まとめる書き直しの考え方を、表にします。

書き直す前	書き直した後
太字のspan、大きさのspan、色のspanを3つ重ねて開く	1つのspanにclassを付けて、CSSに3つの指定を書く
閉じる終了タグを、数えながら3つ書く	閉じる終了タグは1つ
色の指定がstyle属性に散らばる	CSSの1か所に集まる
重要な語句に見た目だけの太字	strongに変える

チームで決めておくとよいこと

制作会社や社内の担当者と、次の点を決めておくと、あとから迷いません。

決めること	決め方の例
classの名前の付け方	役割で付ける。見た目の名前は付けない
styleを直接書いてよい場面	1回限りの調整だけ
強調に使うタグ	重要ならstrong、見た目だけならclass付きのspan
外国語の語句	文章や語句が丸ごと外国語なら lang を付ける

よくある質問

Q1. spanタグとは何ですか

行の中の一部の語句を囲む、意味を持たない入れ物です。

単独では何も起きません。class、lang、dir といった属性と組み合わせて、見た目を変える目印や、言語を示す台として使います。

Q2. spanタグの使い方を教えてください

囲みたい語句をspanの開始タグと終了タグで挟み、class 属性を付けます。見た目の指定は、CSSのほうに書きます。

文字の色を変える例なら、class の名前を役割で付け、CSSで色を指定します。重要な語句なら、strongを先に検討します。

Q3. spanタグとdivタグの違いは何ですか

囲む範囲と並び方が違います。spanは文の途中の語句を囲み、行を変えません。divは段落などのまとまりを囲み、独立した行になります。

入れ子の向きも決まっています。divの中にspanを置けますが、spanの中にdivは置けません。

divの使い方は、divタグの使い方 横並びと中央寄せの書き方と意味を持つタグとの使い分けで扱っています。

Q4. spanタグの中にspanタグを入れてもよいですか

入れてかまいません。仕様で許されており、W3Cの検査サービスでもエラーは出ませんでした。

ただし、色や大きさは内側に引き継がれます。段数が増えると、最終的な見た目を計算しにくくなるので、1つにまとめられないかを先に確かめます。

Q5. spanの数は、SEOやAI検索に影響しますか

公式の文書に、記載が見つかりませんでした。

Googleは、重要なコンテンツをテキストで出すことを求めています。spanで囲んだ文字もテキストなので、その点に影響はありません。

まとめ：囲む前に、4つの問いで確かめる

span要素は、行の中の語句を囲む、意味を持たない入れ物です。意味や見た目は、属性とCSSが決めます。

意味のあるタグが合うなら、spanより先にそちらを選びます。名前が見つからない部分だけが、spanの出番です。

spanの中に入れてよいのは、spanやstrongのような文中の要素です。divやpは入れられません。ブラウザは何も直さないので、仕様に合うかは検査サービスで確かめます。

閉じ忘れたspanは、外側の要素の終わりまで効きます。数が合わないときは、まず1つにまとめられないかを考えます。

弊社の記事の本文には、spanが1つもありませんでした。強調はstrongで統一し、見た目の部品はテーマ側に任せています。

今日できる点検

点検すること	確かめ方	直し方
本文に、style付きのspanが大量にないか	ページのソースで span を探す	同じ指定を class にまとめる
重要な語句が、見た目だけの太字になっていないか	ソースで太字の部分を見る	strongに変える
spanの中に、divやpがないか	W3Cの検査サービスに通す	外側をdivに変える
spanの開始と終了の数が合っているか	検査サービスの「未閉鎖」のエラーを見る	数を合わせるか、1つにまとめる
赤い文字だけで意味を伝えていないか	白黒で見て、意味が読めるか確かめる	「必須」など、文字を添える
外国語の語句に lang が付いているか	文章や語句が丸ごと外国語の部分を探す	span に lang を付ける

ページを増やしても問い合わせが来ないなら、原因はページの外にあります。その場合は、下の入口からご相談ください。