HTML span 要素完全ガイド (インライン汎用コンテナ / div との違い / アクセシビリティ)

とは

は HTML のインライン汎用コンテナです。要素自体には意味がなく、CSS でスタイルを当てたい・JavaScript で部分操作したい時に、テキストの一部を囲むために使います。

今日の気温は35度です。


ステータス: 完了


これは Hello World と表示されます。


カート数: 0

vs

の決定的な違い

これは仕様違反


これは OK


幅は効かない


効く

セマンティック要素を優先する

「意味」がある場合は で誤魔化さず、適切な HTML 要素を使うとアクセシビリティ・SEO・LLMO が向上します:

JavaScript からの動的操作

カート内: 0 個
追加

function addToCart() {
    const el = document.getElementById('cart-count');
    el.textContent = parseInt(el.textContent) + 1;
    el.classList.add('flash');
    setTimeout(() => el.classList.remove('flash'), 500);
}

// React / Vue でも span は頻出
// React: 
カート: {count} 個
// Vue:   
カート: {{ count }} 個

display プロパティで挙動を変える

/* デフォルト: インライン */
.tag-inline { display: inline; }

/* インライン-ブロック: テキスト中に流れつつ幅・高さ指定可 */
.tag-ib {
    display: inline-block;
    width: 80px;
    padding: 4px 8px;
    background: #2563eb;
    color: white;
    border-radius: 4px;
    text-align: center;
}

/* ブロック: div と同等 */
.tag-block {
    display: block;
    margin: 1em 0;
}

/* フレックス: 子要素を flex 配置 */
.tag-flex {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

アクセシビリティ (Lighthouse / WAI-ARIA)

はデフォルトでアクセシビリティツリーに現れません。スクリーンリーダーで読み上げさせたい場合は role / aria-label 等を付与します。

    



★ 重要なお知らせ


状態: 送信中

多言語 / 双方向テキスト:

ユーザー名: إيان さんが投稿しました


これは 逆順に表示される 部分


英語の Hello World と中国語の 你好

FAQ

Q: と

はどう違う？
A:

は段落 (ブロック・意味あり)、 はインライン・意味なし。文章なら

、文中の一部装飾なら 。

Q: 何個までネストして良い？
A: 仕様上の制限はなし。実用上は 3〜4 段までが可読性の限界。

Q: SEO に影響する？
A: 自体は中立。ただし を で代用すると検索エンジンが重要キーワードを認識しにくくなります。