HTML Del Tag

Throughout this post, we will discuss Tag del. Wishing it would satisfy the requirements for learning.

The <del> tag in HTML is used to indicate that text has been deleted or removed from a document. When used, the <del> tag adds a strikethrough effect to the text that it encloses, indicating that it has been deleted.

The following text includes a deleted part and a new part inserted:

Example: 

<!DOCTYPE html> <html> <body> <p>May Your favorite fruit is <del>Mango</del> <ins>apple</ins>!</p> </body> </html>

Apply CSS to style <del> and <ins>:

Example: 

<!DOCTYPE html> <html> <head> <style> del {background-color: tomato;} ins {background-color: yellow;} </style> </head> <body> <p>Your favorite fruit is <del>Mango</del> <ins>apple</ins>!</p> </body> </html>

Here is an example of the del tag with the javascript function:

Example: 

<!DOCTYPE html> <html> <head> <title>Deleted Text Example</title> <style> /* Style for deleted text */ del { color: red; text-decoration: line-through; } /* Style for the button */ button { padding: 10px 20px; background-color: #4CAF50; color: white; border: none; cursor: pointer; } </style> </head> <body> <p>This sentence contains an error. <del id="del-text" datetime="2022-01-01T09:00:00">This part of the sentence is incorrect</del>, but this part is correct.</p> <button onclick="showDeletedText()">Show Deleted Text</button> <script> function showDeletedText() { var delText = document.getElementById("del-text"); delText.style.color = "black"; delText.style.textDecoration = "none"; } </script> </body> </html>

Example Explanation

In this example, the text “This part of the sentence is incorrect” is wrapped in the <del> element and is given an ID of “del-text” so that it can be accessed with JavaScript. The text is also given a datetime attribute of “2022-01-01T09:00:00” to indicate when it was deleted.



Uses and Definition

The Tag del <del> indicates text taken out of a document. Deleted text is usually highlighted with a line in the browsers.

Advice: Look at the <ins> tag to markup inserted text when it comes to Tag del.

Browser Compatibility

Element
<del>YesYesYesYesYes

Attributes

AttributeValueOverview
citeURLIndicate a URL to a document that provides information about why the text has been deleted or changed.
datetimeYYYY-MM-DDThh:mm:ssTZDThis attribute represented when the text was deleted or changed.

Global Attributes

The <del> Tag is compatible with HTML Global Attributes.


Event Attributes

The <del> Tag accommodates HTML Event Attributes as well.


CSS Default Settings

The <del> element will typically be displayed with the following default values in many web browsers:

del {
text-decoration: line-through;
}

HTML Del Tag Advantages

The <del> tag in HTML has several advantages that make it a useful tool for web developers and designers. Here are some of the advantages of using the del tag:

  • The <del> tag can help improve the clarity of a document by indicating that certain text has been deleted or removed. This can be particularly useful in legal documents, contracts, or other documents where accuracy and clarity are important.
  • By using the <del> tag to indicate deleted text, you can help make your content more accessible to users with disabilities. For example, users who rely on screen readers can be informed that certain text has been deleted, which can improve their understanding of the content.
  • The <del> tag can also be used to improve the search engine optimization (SEO) of a web page. By indicating that certain text has been deleted, you can avoid the use of strike-through styling or other visual cues that may not be as clear to search engines.
  • The <del> tag can be useful in collaborative environments where multiple people may be editing a document. By indicating deleted text, it can help avoid confusion and misunderstandings about what changes have been made to the document.
If you find this article meaningful, do share this valuable knowledge with your friends by clicking on the links below.

We value your feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!
icon

Leave a Reply

Your email address will not be published. Required fields are marked *