トップページ  > HTML Living Standard  > <del>

★HTML Living Standard リファレンス

<del> …… 削除された内容を表す
Internet Explorer Microsoft Edge Google Chrome Safari Firefox Opera
広告

<del>タグは、ドキュメントから削除された内容を表す際に使用します。

del要素のcite属性は、引用元へのリンク、または、編集に関する詳細情報へのリンクを指定する際に使用します。

del要素のdatetime属性は、変更した日付と時刻(オプション)を指定する際に使用します。

■属性

cite属性
引用元へのリンク、または、編集に関する詳細情報へのリンクを有効なURLで指定します。
datetime属性
変更した日付と時刻(オプション)を有効な日付文字列で指定します。

■使用例

以下のサンプルは、いわゆる「To Do リスト」です。 完了項目をdel要素にして、完了日時をdatetime属性で示しています。

HTMLソース

<h1>To Do リスト</h1>
<ul>
 <li>食器洗い機を空にする</li>
 <li><del datetime="2009-10-11T01:25-07:00">講義動画を視聴する</del></li>
 <li><del datetime="2009-10-10T23:38-07:00">資料をダウンロードする</del></li>
 <li>プリンターを購入する</li>
</ul>
↓↓↓

ブラウザ上の表示

To Do リスト

  • 食器洗い機を空にする
  • 講義動画を視聴する
  • 資料をダウンロードする
  • プリンターを購入する

del要素は段落をまたがない

del要素は、段落境界を越えてはなりません。 1つのdel要素が複数の段落にまたがってはいけないということです。 <p>タグを省略せずに記述することで、 del要素が段落の境界を越えているかどうかが明確になります。 そのため、常にすべての段落をp要素でマークアップすることが強く推奨されています。

■使用例

del要素は、段落の境界を越えられません。 ある段落の終わりと次の段落の始まりが削除された場合には、1つのdel要素ではマークアップできないということです。 削除部分が2つの段落にまたがる場合には、以下のサンプルのように2つのdel要素を使用する必要があります。

HTMLソース

<section>
 <p>
  これは最初の段落です。
  <del>この文は削除されました。</del>
 </p>
 <p>
  <del>この文も削除されました。</del>
  段落が変わったため、別のdel要素を必要としました。
 </p>
</section>
↓↓↓

ブラウザ上の表示

これは最初の段落です。 この文は削除されました。

この文も削除されました。 段落が変わったため、別のdel要素を必要としました。

■使用例

以下のサンプルは、テーブルから列を削除する場合の使用例です。 テーブルから行や列を削除する際には、行全体や列全体ではなく“各セルの内容”をそれぞれdel要素で囲みます。 以下の使用例では、削除された時刻とその理由を説明するページへのリンクも示されています。

HTMLソース

<table>
 <thead>
  <tr><th>品名</th><th>価格</th><th><del cite="/edits/r192" datetime="2011-05-02 14:23Z">個数</del></th></tr>
 </thead>
 <tbody>
  <tr><td>りんご</td><td>300円</td><td><del cite="/edits/r192" datetime="2011-05-02 14:23Z">100袋</del></td></tr>
  <tr><td>みかん</td><td>400円</td><td><del cite="/edits/r192" datetime="2011-05-02 14:23Z">50パック</del></td></tr>
  <tr><td>バナナ</td><td>200円</td><td><del cite="/edits/r192" datetime="2011-05-02 14:23Z">300房</del></td></tr>
 </tbody>
</table>
↓↓↓

ブラウザ上の表示

品名価格個数
りんご300円100袋
みかん400円50パック
バナナ200円300房

尚、WHATWGの仕様解説によれば 例えば、セルが削除されて後続のすべてのセルが上または左に移動するなど、より複雑なテーブル編集を示す良い方法はありません とのことです。

■関連項目

  • <ins> …… 追加された内容を表す
  • <del> …… 削除された内容を表す
  • <s> …… 正確でなくなったコンテンツを表す
  • <u> …… 暗黙的な注釈を含むテキストを表す
  • <mark> …… 参照目的で強調表示されたテキストを表す
広告
Sponsors
広告
MuuMuu Domain!
ドメイン取るならお名前.com
現役エンジニアのオンライン家庭教師【CodeCamp】
サイトに広告を掲載してお小遣いが稼げる!【A8.net】
Node.jsコース
はじめてのプログラミングコース
▲ページ先頭へ
HTMLクイックリファレンスについて
© HTMQ