【delタグ】文書のテキストを削除して編集してみよう！「HTML・解説・初心者向け」- ノブレコ
nobreco
★<del>タグの特徴
・タグのカテゴリ ―― インライン要素とブロックレベル要素。（状況により変化）
・コンテンツモデル ―― フローコンテンツ・フレージングコンテンツ・パルパブルコンテンツ。
・タグの省略 ―― 不可。（開始タグと終了タグが必要）
・使用可能な親要素 ―― フレージングコンテンツを許容するすべての親要素。
・グローバル属性を持つ。
・ARIAロール ―― 標準でのARIAロールは無し。
このブログではHTML4で存在していた、ブロックレベル要素や、インライン要素という言葉も使ってタグのカテゴリーを分けてかいていますが、現在のHTMLLSでは、「インライン要素はフレージングコンテンツ」であり、「ブロックレベル要素はフローコンテンツ」に該当します。
ではなぜ旧式の呼び方を使うのか？
フローコンテンツはフレージングコンテンツも含む場合があるので、表現が伝わりにくく配慮として分かりやすように、ブロックレベル要素とインライン要素という表現で区別しています。
現在ではこのような区別は使わないのですが、あくまで個人的な配慮として捉えて頂ければと思います。
<del>の説明
<del>とは
「delete（デリート）」の略で、「削除」の意味を持つタグです。
既存の文書に後から編集や修正を加える際に、「削除した部分」を示すためのタグです。
削除を行いたいテキストを<del>タグで囲むことで、そのテキスト内容が「打ち消し線」を伴って表示されるようになります。（ただしすべての環境で打ち消し線が付くわけではないので注意！）
削除した部分を示すということですが、ブラウザ上から削除されたテキスト内容が消えてしまうわけではありません。
あえて削除したい内容を残しておくことで
■使用目的
主に文書の編集や修正を後から行う場合に使います。
削除した部分を示すということですが、ブラウザ上から削除されたテキスト内容が消えてしまうわけではありません。
あえて削除したい内容を残しておくことで、以前書かれていた内容を把握できますし、その内容を比較するなどにも活用することができます。
実は<del>タグで囲んだ範囲が「削除した部分である」ということを、検索エンジンやクローラーに解釈してもらうために使用するという意図もあります。
削除したい部分を<del>タグでマークアップしておくと、SEO対策の向上にも繋がるということですね。
■よく使う属性
【cite属性】
<del>要素で削除したテキストで、その削除理由を説明するために他のサイトページなどのURLを記述する際に使用します。
【datetime属性】
<del>要素で削除した日付や日時を指定するときに使います。
datetime属性で日付などを記述しておくと、検索エンジンなどで、いつ削除されたテキストなのかを判断することができるよになります。ちなみに時刻のみの値は受け付けません。
※ 属性は<del>の開始タグ内に記述して使用することができます。
使用上の注意点
① 下線を引くためだけに使用しない。
取り消し線だけを引きたいのであれば、CSSを使ってください。
CSSプロパティ
{ text-decoration: line-through; }などで表現できます。
② ul要素の子要素にはできない。
ul要素は内容モデルにフローコンテンツとフレージングコンテンツを含まないため、ul要素の直下で<del>要素を子要素として使うことはできません。
もしも「項目に順序がない<ul>要素」でテキスト削除する場合は、<ul>要素の子要素である<li>要素内で使用することができます。
③ 段落ちを跨ぐような使い方はできない。
例えば、１段目の段落ちに<del>の開始タグだけを使用して、3段目の段落ちに<del>の終了タグを使用するということはできません。このような記述の仕方は構文エラーとなります。
また構文エラーにはなりませんが、暗黙の段落ち（<p>タグで囲んでいない段落ちのこと）を跨ぐこともできませんので注意してください。
必ず１つの段落ちの子要素として<del>要素を使ってください。
ちなみに、逆に<p>要素を<del>タグで囲んで使いこともできます。
④ インライン要素とブロックレベル要素。
<del>と<ins>は、使う状況で、インライン要素とブロックレベル要素の2パターンに分かれます。
例えば、<del>や<ins>を段落ちの<p>タグに使用したとします。
・<p>要素の中で記述した場合は、インライン要素に。
・<p>要素を丸ごと囲んで使う場合は、ブロックレベル要素になります。
内容モデル
<del>要素の内容モデルは「transparent」です。
トランスペアレントモデルは、親要素の内容モデルの引き継ぎをします。
アクセシビリティでの注意点
<del>要素は、標準でARIAロールを持っていません。
ほとんどのスクリーンリーダなどでは<ins>要素に差し掛かると「削除」と読み上げられます。
ですから、テキストを後から追加した部分には、SEO対策の向上の観点からも<del>要素でマークアップする方が良いでしょう。
補足として、<del>要素の存在が常に伝わるとは限りませんので注意してください。
注意する例として、<ins>要素と<del>要素を同じテキスト内で併用するといったことなどが挙げられます。
<del>の記述例
■基本的な使用例
★HTML
★実行結果
<ins>タグと合わせて使うことで、削除したテキストと追加したテキストの内容を比べるための方法としても使えます。
まとめ
この記事では、<del>タグについての解説をいたしました。
このタグは打ち消し線を引いて、削除されたテキストであることを示すためのタグです。
SEO対策にも反映する場合があるので、削除したい内容があるときは是非使っておきたい要素ですね。
また属性を使って、削除した理由を説明するURLや、削除した日付を記述することもできるので、これらの属性も合わせて使用したいところです。
この記事が少しでも皆さんのお役に立てれば幸いです。
最後まで読んでいただき、ありがとうございました。またなん😃
