The HTML <s> element represents text that is no longer accurate or valid and visually indicates its invalidity by displaying it with a strikethrough.
HTMLの<s>要素は、**「もはや正確ではない、または関連性が薄れているテキスト」**を表す際に使用する要素です。画面的には、テキストに取り消し線（ストライクトスルー）を引いたように表示されることが多いのが特徴です。
CSS
s {
text-decoration: line-through;
}一見似た要素として<del>があります。<del>は**「文書やコンテンツから削除されたテキスト」**を意味します。<s>との大きな違いは、「履歴（トラッキング）の意味を含むかどうか」にあります。
<s><del>ただし、実際の画面表示ではどちらも取り消し線が入るという点で見た目は似ています。
意味合いと文脈に応じて使い分けることがHTMLのセマンティクスの観点で望ましいでしょう。
古いHTML（HTML4など）では、取り消し線を引くために<strike>タグが使用されることがありました。しかし、HTML5以降では<strike>は非推奨（廃止扱い）となっており、代わりに<s>や<del>を正しく使うことが推奨されています。
以下は、<s>要素を使って「廃止された機能名」を表す簡単な例です。
HTML
<p>
旧バージョンでは
<s>マイページ機能</s>
を利用していましたが、現在は
<strong>プロフィール機能</strong>
に移行しています。
</p>
旧バージョンでは
マイページ機能
を利用していましたが、現在は
プロフィール機能
に移行しています。
上記コードをブラウザで表示すると、「マイページ機能」の部分に取り消し線が引かれた状態になります。ユーザーには「以前の機能はなくなった、あるいはもはや有効でない」ことを視覚的に伝えられます。
デフォルトでは取り消し線が引かれますが、CSSで自由にスタイルを変更することが可能です。たとえば、色を薄くして強調度を下げるデザインをする場合などです。
CSS
s {
color: gray;
text-decoration: line-through;
opacity: 0.7;
}前述したように、<del>は「削除された」ことを明示します。バージョン管理や更新履歴を示す場合には<del>が適切です。
一方で、例えば広告の価格で「旧価格」を示す場合など、「正しくはない、あるいは現在は無効となった値段」を表示したいだけの場合は<s>要素が使われるケースも考えられます。
HTML
<p>
旧価格: <s>¥5,000</s> → 新価格: ¥4,500
</p>
旧価格: ¥5,000 → 新価格: ¥4,500
ユーザーに対して「もはや旧価格は無効だが、参考として表示している」という意味を示すことができます。
<ins>要素は「追加されたテキスト」を意味します。履歴管理などで「以前のテキスト(<del>)が削除され、新しいテキスト(<ins>)が追加された」という文脈を提示する場合によく使われます。取り消し線を使う必要がなくても、変更点を明示したい場合は<del>と<ins>の組み合わせが適しています。
<u>要素は「下線を引く」要素ですが、HTML5では主に「人名のふりがな」や「固有の名前」を表すなど、特別な文脈での使用を推奨しており、単なる装飾目的での使用は非推奨です。スタイル的な下線と取り消し線はそもそも用途が違いますが、「文書構造的に意味を持つ場合」には<u>よりも適切なタグが用意されていることが多いので注意してください。
スクリーンリーダーなどを利用するユーザーには、単純な視覚情報だけでなく「このテキストはどういう意味で取り消されているのか」が伝わるようにすることが望ましいです。場合によっては、ARアトリビュート（aria-labelやaria-hiddenなど）を活用した補足説明を行ったり、前後の文脈で説明を加えたりして、正確な意図を伝えられるようにしましょう。
古いキャンペーンを告知ページに残しつつ、取り消し線で「終了済み」であることを示したい場合に<s>が便利です。コンテンツを削除せず、**「参考」**として見せるデザインになります。
HTML
<p>
<s>2024年春のキャンペーン (〜4月30日終了)</s>
は終了しました。
現在は新キャンペーンを実施中です！
</p>
2024年春のキャンペーン (〜4月30日終了)
は終了しました。
現在は新キャンペーンを実施中です！
ドキュメントやマニュアルで、廃止された機能名や削除されたオプションを一覧で示すときに<s>要素は役立ちます。「既に存在しない、あるいはサポートされなくなった」機能であることを取り消し線によって明示できます。
広告やECサイトで、旧価格が無効であると示しつつ、新価格を強調する場合に適切です。たとえば大きく割引された商品で「旧価格」と「新価格」を同時に表示するときに、旧価格に<s>要素を使い、ユーザーに「現在の価格ではない」ことを視覚的にアピールできます。
<s>要素を使うこと自体が、検索エンジンでの評価（SEO）に直接的に大きな影響を与えるとは考えにくいです。とはいえ、**「適切なタグを正しい文脈で使用している」**という点はHTMLのセマンティクス的に有利です。検索エンジンはページ構造を総合的に評価しているため、冗長なタグの乱用を避け、文脈に応じた要素の使用を心がけることが大切でしょう。
ほとんどのモダンブラウザは<s>要素を問題なくサポートしていますが、古い環境などで<s>やCSSが適切に解釈されない可能性は非常に低いとはいえゼロではありません。念のため、デザイン面でこだわる場合は「ブラウザの互換性テスト」を行い、見た目の崩れがないか確認を行うと安心です。
ユーザーの操作やアプリの状態に応じて、動的に<s>要素を付け外しすることで「チェックリストの完了状態を示す」などの表現が可能です。
HTML
<ul id="todo-list">
<li>買い物に行く</li>
<li>書類を提出する</li>
</ul>
<script>
// リストのアイテムをクリックしたら取り消し線をトグル表示
document.querySelectorAll('#todo-list li').forEach(function(item) {
item.addEventListener('click', function() {
if (item.innerHTML.includes('<s>')) {
// \<s>を外す
item.innerHTML = item.textContent;
} else {
// \<s>をつける
item.innerHTML = '<s>' + item.textContent + '</s>';
}
});
});
</script>これは一例ですが、動的にテキストの状態を視覚で示す際に<s>要素はシンプルで便利です。ただし、正しくセマンティックに意味を付与したい場合は、別の要素やclass属性を使って状態を管理し、CSSでtext-decoration: line-through;を適用するほうがより推奨される場合もあります。使い方は要件に応じて検討してください。
ブログやサイト更新システムで、記事の更新箇所を自動的にハイライトする機能がある場合、古い文言を<del>で囲んだり、新しい文言を<ins>で囲んだりします。しかし、古い記述が「修正されて正しくなくなった」というより「単純に有効期限切れ」などの場合、<s>を使うのも一つの手です。
<s>は「正確ではない、または関連性が失われたテキスト」を示す要素である。<del>との使い分けが重要：
<s><del><strike>はHTML5以降では非推奨なので使用を控える。HTMLの<s>要素は、単なる「取り消し線の描画」という見た目の機能だけではなく、そのテキストがすでに無効・不正確であるという意味を伝えるための重要なセマンティック要素です。正しい文脈で使うことで、ユーザーにとってよりわかりやすいコンテンツとなるだけでなく、文書構造を明確化するメリットも得られます。是非、<del>や<ins>などの他の要素とも併せて活用し、文書内の情報を適切に整理してみてください。