Add Del Tag to Your Webpage
Working with Text
In this lesson, we will learn how to use the del tag in HTML.
What is Del Tag in HTML
The del tag is used in HTML to indicate that a section of text has been deleted or removed from a document. It is typically used in conjunction with the <ins> tag, which indicates that a section of text has been added or inserted into a document. The del tag is a semantic tag, meaning it is used to convey meaning rather than just formatting.
The syntax for the del tag is straightforward. It requires an opening and closing del tag, and the text that needs to be displayed as deleted is placed between these two tags.
Here's an example of how to use <del> tag in HTML:
Example
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Del Tag Example</title>
</head>
<body>
<p><del>Dennis Ritchie</del> Tim Berners-Lee created HTML in 1993.</p>
</body>
</html>In the above example, The text Dennis Ritchie will now appear with a strikeout line, indicating that it has been deleted.
Attributes of Del Tag
Here are the attributes we can use with the del tag:
- id
- class
- style
- title
- cite
- datetime
id
The id attribute is used to assign a unique name to an element on a web page. We can assign an id to the del tag and use it to apply a specific style to that particular tag.
Example
<p>This is a <del id="dtext">deleted</del> text.</p>In the above example, we assign an id attribute to the del tag with a value dtext. In CSS and JavaScript, we can use the name dtext to access the specific del tag whose id value is set to the name dtext.
Note: The id attribute can be used on any tag to assign a unique tag name. It must be unique for each tag, meaning we can't use the same id name for another tag in an HTML document.
class
The class attribute is used to define a group of elements and to apply a specific style to that group. We can define a class for the del tags and use it to apply a specific style to all the del tags that belong to a particular class.
Example
<p>This is a <del class="info">deleted</del> text.</p>
<p>This is another <del class="info">deleted</del> text.</p>In the above example, both del tags have the same class name, info. If any CSS style is applied to the class name info, it will be applied on both del tags.
Note: The class attribute can be used on any tag to assign a group name to the tag.
style
The style attribute can be used to apply inline css styles to the del tag. We will learn how to apply inline css style using the style attribute later in our CSS tutorial.
Example
<p>This is a <del style="color: red">deleted</del> text.</p>The style="color: red" will change the color of the del tag to red color.
title
The title attribute can be used to add a tooltip or additional information to the del tag, which will only appear when the user places the mouse cursor on the deleted text.
Example
<p><del title="He created the C programming Language">Dennis Ritchie</del> Tim Berners-Lee created HTML in 1993.</p>cite
The cite attribute can be used to specify a URL that provides more information about the deleted content. The URL is not visible on the web browser and is only used to provide the developer with more information about the deleted content.
Example
<p><del cite="https://example.com/dennis-ritchie">Dennis Ritchie</del> Tim Berners-Lee created HTML in 1993.</p>datetime
The datetime attribute can be used to specify the date and time when the content was deleted.
Example
<p><del datetime="2023-02-15 22:45">Dennis Ritchie</del> Tim Berners-Lee created HTML in 1993.</p>The syntax of datetime attribute is datetime="YYYY-MM-DDThh:mm:ssTZD".
YYYY - It represents year like 2023.
MM - It represents month like 02 for February.
DD - It represents day like 15 for 15th day of the month.
T - It represents a separator between date and time like space.
hh - It represents hour in 24 hour format like 22 for 10 PM.
mm - It represents minutes like 45 minutes.
ss - It represents seconds like 30 minutes.
TZD - It represents Time Zone Designator where Z refers to Zulu also called GMT (Greenwich Mean Time).
Note: The datetime attribute doesn't have any visible impact on regular web browsers, but it can be used by screen readers to enhance accessibility for users.
Nesting of Bold and Del Tags
It is possible to nest <del> tag within the <b> tag and vice versa to draw a higher level of attention of the user.
Example
<p><b><del>Dennis Ritchie</del></b> Tim Berners-Lee created HTML in 1993.</p>