【HTML Living Standard】del要素の使い方
del要素の使い方について、初心者にもわかりやすく解説します。
基本的な使い方
delオブジェクトは、HTMLドキュメント内で削除されたテキストコンテンツを表すオブジェクトです。この要素は、ウェブページの内容が変更され、元のテキストの一部が削除されたことを示す際に使用されます。主に視覚的には、対象のテキストに取り消し線が引かれて表示されますが、これはブラウザのデフォルトスタイルによるものであり、スタイルシートを用いて変更することも可能です。
この要素の重要な点は、単に取り消し線を表示するだけでなく、そのコンテンツが「削除された」というセマンティックな意味を伝達することにあります。これにより、スクリーンリーダーなどの支援技術は、削除されたテキストとして適切に解釈し、ユーザーに伝達することができます。
del要素は、いくつかのグローバル属性に加えて、特定の属性を持つことができます。cite属性は、なぜテキストが削除されたのか、あるいは変更が議論されている情報源へのURLを指定します。また、datetime属性は、削除が行われた日時を、ISO 8601形式（例: "2023-10-27T14:30:00Z"）で指定します。これらの属性は、文書の変更履歴に関するメタデータを提供し、コンテンツの管理や理解に役立ちます。
del要素は、ins要素と組み合わせて使用されることも多く、ins要素は挿入されたテキストを表します。これら二つの要素は、文書の改訂履歴や変更点を明確に提示する際に特に有用です。単に視覚的に取り消し線を表示するだけであればs要素も存在しますが、del要素は内容が削除されたというセマンティックな意図を明確にする点で異なります。このように、del要素は文書の改訂履歴を正確に伝え、情報が変更された経緯を明確にするための重要なHTML要素です。
構文(syntax)
1<p>これは<del>削除されたテキスト</del>です。</p>
引数(parameters)
引数なし
引数はありません
戻り値(return)
戻り値なし
戻り値はありません
サンプルコード
HTMLのdel要素で削除箇所を示す
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>del要素のサンプル</title> 7</head> 8<body> 9 <h1>商品の変更履歴</h1> 10 <p> 11 <!-- del要素は、ドキュメントから削除されたテキストの範囲を示します。 --> 12 <!-- 通常、ブラウザでは取り消し線（ストライクスルー）で表示されます。 --> 13 <!-- ここでは、価格が改定され、古い価格が削除されたことを示しています。 --> 14 旧価格: <del>1,200円</del> 新価格: 1,000円 15 </p> 16 <p> 17 <!-- datetime属性を使用すると、変更がなされた日時を指定できます。 --> 18 この商品は<del datetime="2023-10-26T10:30:00Z">期間限定</del>ではなく、常時販売いたします。 19 </p> 20</body> 21</html>
HTMLのdel要素は、ドキュメントから削除された、またはもはや正確ではないテキストの範囲を示すために使用されます。この要素で囲まれた内容は、Webページ上で過去の情報となり、現在では有効ではないことを意味します。
Webブラウザでは、通常、del要素でマークアップされたテキストに取り消し線（ストライクスルー）を引いて表示します。これにより、ユーザーは削除されたテキストを視覚的に識別し、情報が更新されたことを認識できます。
サンプルコードの最初の例では、「旧価格: <del>1,200円</del> 新価格: 1,000円」と記述することで、商品の価格が1,200円から1,000円に改定され、古い価格が削除されたことを明確に示しています。
また、del要素はオプションでdatetime属性を持つことができます。この属性を使用すると、テキストが削除された、または変更された日時をISO 8601形式で指定できます。これは、いつ情報が変更されたかを機械的に認識させるために役立ちます。サンプルコードの2つ目の例「この商品は<del datetime="2023-10-26T10:30:00Z">期間限定</del>ではなく、常時販売いたします。」では、「期間限定」という記述がいつ削除されたかを示しています。
del要素はHTMLの構造を定義する要素であり、プログラミング言語の関数のように、直接渡される引数や、処理結果として返される戻り値はありません。
del要素は、単に見た目に取り消し線を引くだけでなく、文書からテキストが削除されたことを意味的に示す要素です。ブラウザはデフォルトで取り消し線を表示しますが、これはCSSで自由に見た目を変更できます。datetime属性を使用すると、テキストが削除された正確な日時を国際標準のISO 8601形式で指定でき、コンテンツの変更履歴をより明確にできます。この属性は任意ですが、情報がいつ変更されたかを示すことで、ドキュメントの正確性を高めるために活用することをおすすめします。
HTML del要素で削除された内容を示す
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>HTML del要素のディスクリプション例</title> 7</head> 8<body> 9 <h1>製品情報アップデート</h1> 10 11 <h2>最新製品「スマートウォッチX」のディスクリプション</h2> 12 <!-- del要素は、ドキュメントから削除された（古くなった、間違いであったなど）テキストを表します。 --> 13 <!-- この例では、製品の「ディスクリプション（説明）」が更新され、以前の情報が削除されたことを示しています。 --> 14 <p> 15 スマートウォッチXは、<del>8時間のバッテリー駆動時間</del>と 16 <del>限定されたスポーツトラッキング機能</del>を提供していました。 17 しかし、最新モデルでは<strong>24時間のバッテリー駆動時間</strong>と 18 <strong>高度なマルチスポーツトラッキング機能</strong>を搭載し、 19 あなたの健康管理とアクティビティを強力にサポートします。 20 </p> 21 22 <h2>価格改定のお知らせ</h2> 23 <!-- del要素を使って、以前の価格が変更されたことを明確に示します。 --> 24 <p> 25 旧価格: <del>29,800円</del> (税込) → 新価格: <strong>24,800円</strong> (税込) 26 </p> 27</body> 28</html>
HTMLのdel要素は、ドキュメントから削除されたテキストコンテンツを表すために使用されます。視覚的には、通常、テキストに打ち消し線が表示され、その内容がもはや現在の情報ではないことを示します。この要素は、特定の引数や戻り値を持たず、開始タグと終了タグで囲まれたテキストに「削除された」という意味を与えます。
提供されたサンプルコードでは、del要素の典型的な使用例が示されています。最初の例では、製品「スマートウォッチX」のディスクリプション（説明）が更新された状況を表現しています。以前の「8時間のバッテリー駆動時間」や「限定されたスポーツトラッキング機能」といった古い説明がdel要素でマークされ、削除された情報として扱われています。これにより、閲覧者はどの情報が古く、どの情報が新しいかを一目で理解できます。
二つ目の例では、製品の価格改定が示されています。旧価格「29,800円」がdel要素で囲まれることで、この価格がもはや有効ではないことを明示しています。このように、del要素は、情報が変更されたり、不正確になったり、時代遅れになったりした場合に、以前の情報をドキュメントに残しつつ、それが「削除された」状態であることを明確に伝える役割を担います。
del要素は、Webページ上で削除された、または古くなったテキストであることを示すために使用します。単に打ち消し線を引く見た目を作るだけでなく、そのテキストがもはや有効ではないという意味をブラウザや検索エンジンに伝えることが重要です。
この要素を使うことで、価格改定や製品説明（ディスクリプション）の更新といった変更履歴を明確に表現できます。サンプルコードのように、古い情報をdelで囲み、新しい情報を続けて記載すると、何がどのように変更されたのかがユーザーにとって非常に分かりやすくなります。これはWebサイトの正確性を高め、SEOやアクセシビリティの向上にも貢献します。見た目だけでなく、コンテンツの意味を正しくマークアップするよう意識してください。