HTML Deleted Text

Introduction

HTML del tag is used to indicate a deleted text in a document. By using the del tag, we can display the deleted text with a strike through it. This lab will guide you on how to use the HTML del tag to create a strikethrough text.

Note: You can practice coding in index.html and learn How to Write HTML in Visual Studio Code. Please click on 'Go Live' in the bottom right corner to run the web service on port 8080. Then, you can refresh the Web 8080 Tab to preview the web page.

Skills Graph

Creating a Strikethrough Text

Before starting, create an HTML file named index.html. In this file, we will create a strikethrough text using the HTML del tag.

To create a strikethrough text, follow these steps:

1. Open the index.html file in your code editor
2. Add the HTML del tag (<del>) to the text you want to strikethrough

   <p>The <del>quick</del> brown fox jumps over the lazy dog.</p>

   In the above example, the word quick will be displayed as strikethrough.
3. Save the index.html file and open it into the browser.

Using Attributes of HTML del tag

The HTML del tag has two important attributes ‘cite’ and ‘datetime’. In this step, we will see how to use these attributes.

1. Adding Cite Attribute - Use Cite attribute to give the URL of a document that describes the deleted text.

   <p>
     <del cite="http://www.example.com/reason-for-deletion.html"
       >The quick brown fox jumps over the lazy dog.</del
     >
   </p>

2. Adding Datetime Attribute - Use Datetime attribute to indicate the time when the text got deleted.

   <p>
     <del datetime="2022-09-03T17:12:02Z"
       >The quick brown fox jumps over the lazy dog.</del
     >
   </p>

Creating a Strikethrough Text with Inserted Text

Often, when we delete some text from a webpage, we may want to insert some other text in its place. In this step, we will see how to use the ins tag to show an inserted text.

1. Open the index.html file in your code editor
2. Add the HTML ins tag to the inserted text that replaces the deleted text.

   <p>The <del>quick</del> <ins>brown</ins> fox jumps over the lazy dog.</p>

   In the above example, the word ‘quick’ will be displayed as strikethrough, and the ‘brown’ will be displayed as an inserted text.

Adding CSS Style to HTML del tag

The default CSS style for HTML del tag is line-through. You can modify the CSS style according to your requirements.

1. Add the following CSS code to your HTML file to change the default style of the del tag.

   <style>
     del {
       color: red;
       text-decoration: line-through;
     }
   </style>

In the above example, the color of the del tag has been changed to red.

Summary

Creating a strikethrough text using the HTML del tag is easy. In this lab, you learned how to use the HTML del tag to create a strikethrough text, add attributes to the del tag, use the ins tag for insertion, and modify the CSS style of the del tag.