HTML5における<del>タグの使い方

<del>タグは、削除された部分を表すタグです。今回は、HTML5における<del>タグの使い方をご紹介します。

HTML5における<del>タグの使い方

<del>タグは、削除された部分を表したい時に使用します。

使用できる属性

<del>タグで使用できる属性は2つです。

・cite属性

削除などの変更について説明する文章などが、別である場合URLを指定できます。また、リンク先の情報量が多い場合は、そこの部分が、その説明に当たるのかid属性を併用して識別子をつけることもあります。

・datetime属性

変更を加えた日時を指定します。

実際の使い方

削除したい部分を<del>〜</del>で囲みます。デフォルトのブラウザでは取り消し線で表示されます。実際に見てみましょう。以下のようなタスクリストがあったとします。

<h1>タスクリスト
</h1>
<ul>
  <li>Aをする</li>
  <li>Bをする</li>
  <li>Cをする</li>
  <li>Dをする</li>
</ul>

表示例です。

スクリーンショット 2016-05-23 13.48.51


この中で、Aのタスクが終わったとします。コードは以下のようになります。

<h1>タスクリスト
</h1>
<ul>
  <li><del>Aをする</del></li>
  <li>Bをする</li>
  <li>Cをする</li>
  <li>Dをする</li>
</ul>

表示例です。

スクリーンショット 2016-05-23 13.50.08

基本的な使い方は以上です。あとは、日付とリンクの属性を併用して利用しましょう。


イベント