HTML: <del> tag
In this series of learning HTML, we will teach you how to use HTML del tag with proper syntax and lots of examples. Let’s start on the HTML del tag.
Description of HTML del tag
The HTML <del> tag is used to indicate text that has been deleted or removed from a document. It is typically used to show changes made to a document, such as in a revision history, or to indicate text that is no longer valid or accurate.
The <del> tag is a paired tag, meaning it has both an opening and a closing tag. Text enclosed within the tags will be displayed with a strikethrough line over it by default.
Here’s an example of how the <del> tag can be used in HTML code:
<p>This is some text that has been <del>deleted</del> from the document.</p>In this example, the word “deleted” will be displayed with a strikethrough line over it, indicating that it has been removed from the document.
Syntax of HTML del tag
The <del> tag is an HTML paired tag, which means it has both an opening and a closing tag. The basic syntax for using the <del> tag is as follows:
<del>deleted text</del>Here’s a breakdown of the syntax:
- The opening tag
<del>is used to indicate the start of the deleted text. - The deleted text is placed between the opening and closing tags. This is the text that has been removed from the document.
- The closing tag
</del>is used to indicate the end of the deleted text.
Here’s an example of the <del> tag in use:
<p>The old phone number was <del>555-1234</del>.</p>In this example, the phone number “555-1234” has been deleted or removed from the document, and is displayed with a strikethrough line.
Global Attributes
The “del” tag in HTML is used to indicate that a section of text has been deleted or removed from a document. The tag is typically used in conjunction with the “ins” tag, which is used to indicate text that has been added to a document.
The “del” tag is a block-level element, which means that it creates a new line both before and after the element. It can be used with various attributes to provide additional information about the deleted text. Here are some of the commonly used attributes with the “del” tag:
- “cite”: This attribute specifies the URL of the document that explains why the text was deleted.
- “datetime”: This attribute specifies the date and time when the text was deleted.
- “class”, “id”, “style”: These attributes are used to apply CSS styles to the “del” tag or to identify it for scripting purposes.
Here’s an example of how the “del” tag can be used:
<p>This is some text that has been deleted:</p>
<del cite="https://example.com/explanation.html" datetime="2022-12-31T23:59:59Z">Some deleted text</del>
<p>Here's some new text that has been added:</p>
<ins>Some added text</ins>In this example, the “del” tag is used to indicate that the text “Some deleted text” has been removed from the document, and the “cite” and “datetime” attributes provide additional information about why and when it was deleted. The “ins” tag is used to indicate that the text “Some added text” has been inserted into the document.
Event Attributes
The “del” tag in HTML does not have any specific event attributes associated with it. However, like all HTML elements, the “del” tag can be used in conjunction with various event attributes to trigger JavaScript functions when certain events occur.
For example, you could use the “onclick” event attribute with the “del” tag to trigger a JavaScript function when a user clicks on the element. Here’s an example:
<del onclick="myFunction()">This text has been deleted.</del>
<script>
function myFunction() {
alert("You clicked the deleted text!");
}
</script>In this example, the “onclick” event attribute is used to trigger the “myFunction()” JavaScript function when the user clicks on the “del” element. The function then displays an alert box with the message “You clicked the deleted text!”.
Other event attributes that can be used with the “del” tag include “onmouseover”, “onmouseout”, “onfocus”, and “onblur”. These attributes can be used to trigger JavaScript functions when the user performs certain actions, such as moving the mouse over the element or clicking on it to give it focus.
Other Attributes
In addition to the global attributes and event attributes, there are a few other attributes that can be used with the “del” tag in HTML.
The “del” tag supports the “cite” attribute, which specifies the URL of the document that explains why the text was deleted. For example:
<del cite="http://example.com/revisions.html">This text has been deleted.</del>The “del” tag also supports the “datetime” attribute, which specifies the date and time when the text was deleted. This attribute can be used for search engine optimization (SEO) purposes or to provide additional information about the deleted text. For example:
<del datetime="2022-03-17T15:30:00Z">This text was deleted on March 17, 2022.</del>Finally, the “del” tag supports the standard attributes used for defining style and class information, such as “class”, “id”, and “style”. These attributes can be used to apply CSS styles to the “del” tag or to identify it for scripting purposes. For example:
<del class="deleted-text" style="color: red;">This text has been deleted.</del>In summary, the “del” tag supports the “cite” and “datetime” attributes for providing additional information about deleted text, and the standard attributes for defining style and class information.
Note on HTML del tag
Here are some important notes to keep in mind when using the “del” tag in HTML:
- The “del” tag should only be used to indicate content that has been deleted or removed from a document. If you want to indicate content that has been added to a document, use the “ins” tag instead.
- The “del” tag is a semantic tag, which means that it conveys information about the meaning or purpose of the tagged content. It is important to use semantic tags correctly in order to create accessible and well-structured web pages.
- The “cite” and “datetime” attributes are optional but can be useful for providing additional information about deleted content. The “cite” attribute should be used to specify the URL of a document that explains why the content was deleted, while the “datetime” attribute can be used to specify the date and time when the content was deleted.
- When using the “del” tag, it is important to consider the impact on the document’s accessibility. Screen readers and other assistive technologies may announce the “del” tag, so it should be used judiciously to avoid confusing or misleading users.
- The “del” tag can be styled using CSS, but it is important to avoid using styles that make it difficult to distinguish between deleted and non-deleted content. For example, using a red font color for deleted text may make it difficult for users with color blindness to distinguish between the two.
Overall, the “del” tag is a useful tool for indicating deleted or removed content in HTML documents, but it should be used thoughtfully and in accordance with best practices for accessibility and semantic markup.
Browser Compatibility
The HTML del tag has essential support with the following browsers:
- Chrome
- Internet Explorer (IE)
- Opera
- Safari (WebKit)
- Firefox (Gecko)
- Android
- Firefox Mobile (Gecko)
- Edge Mobile
- Opera Mobile
- Safari Mobile
Examples of HTML q tag
HTML 4.01 Transitional Document
Here’s an example of how you can use the <del> tag in an HTML 4.01 Transitional document:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Example of the <del> tag</title>
</head>
<body>
<p>Here's an example sentence:</p>
<p><del>This sentence has been deleted.</del></p>
<p>And here's the revised sentence:</p>
<p><ins>This sentence has been revised.</ins></p>
</body>
</html>In this example, we have a simple HTML 4.01 Transitional document with a <p> element containing a sentence that has been deleted. To indicate that this sentence has been deleted, we wrap it in the <del> tag. We also include a revised version of the sentence, which we indicate using the <ins> tag.
When you view this document in a web browser, the deleted sentence will appear with a line through it, indicating that it has been crossed out. The revised sentence will appear underlined, indicating that it has been added to the document. This is the default styling for the <del> and <ins> tags in most web browsers, but you can customize this using CSS if you want to change the appearance of deleted and inserted text on your web page.
Note that HTML 4.01 Transitional is an older version of the HTML standard and has been superseded by HTML5. However, the <del> tag is still supported in HTML5, and the example above would work just as well in an HTML5 document.
XHTML 1.0 Transitional Document
Here’s an example of an XHTML 1.0 Transitional document that uses the HTML <del> tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example of the HTML del tag</title>
</head>
<body>
<h1>Example of the HTML del tag</h1>
<p>
The <del>quick brown fox</del> <ins>jumps over</ins> the lazy dog.
</p>
</body>
</html>In this example, we have a basic XHTML 1.0 Transitional document structure with a title and a body. Inside the body, we have an <h1> heading that says “Example of the HTML del tag” and a paragraph that contains a sentence with some text that has been deleted using the <del> tag and some text that has been inserted using the <ins> tag.
The <del> tag is used to indicate text that has been deleted or removed from a document. In this example, we’ve used it to cross out the phrase “quick brown fox”, indicating that it has been deleted. The <ins> tag, on the other hand, is used to indicate text that has been inserted into a document. In this case, we’ve used it to add the phrase “jumps over” to the sentence.
When this document is rendered in a web browser that supports XHTML 1.0 Transitional, the deleted text will be crossed out and the inserted text will be underlined. This can be a useful way to indicate changes to a document over time, or to highlight differences between two versions of a document.
XHTML 1.0 Strict Document
Here’s an example of an XHTML 1.0 Strict document that uses the HTML <del> tag:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example of the HTML del tag</title>
</head>
<body>
<h1>Example of the HTML del tag</h1>
<p>
The <del>quick brown fox</del> <ins>jumps over</ins> the lazy dog.
</p>
</body>
</html>In this example, we have a basic XHTML 1.0 Strict document structure with a title and a body. Inside the body, we have an <h1> heading that says “Example of the HTML del tag” and a paragraph that contains a sentence with some text that has been deleted using the <del> tag and some text that has been inserted using the <ins> tag.
The <del> tag is used to indicate text that has been deleted or removed from a document. In this example, we’ve used it to cross out the phrase “quick brown fox”, indicating that it has been deleted. The <ins> tag, on the other hand, is used to indicate text that has been inserted into a document. In this case, we’ve used it to add the phrase “jumps over” to the sentence.
Because this is an XHTML 1.0 Strict document, we must follow a stricter set of rules than with XHTML 1.0 Transitional. For example, we cannot use the <font> tag or the <center> tag. However, we can still use the <del> tag and the <ins> tag, as they are both part of the HTML 4.01 specification, which is allowed in XHTML 1.0 Strict.
When this document is rendered in a web browser that supports XHTML 1.0 Strict, the deleted text will be crossed out and the inserted text will be underlined, just as in the previous example.
XHTML 1.1 Document
Here’s an example of an XHTML 1.1 document that uses the HTML <del> tag:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Example of the HTML del tag</title>
</head>
<body>
<h1>Example of the HTML del tag</h1>
<p>
The <del>quick brown fox</del> <ins>jumps over</ins> the lazy dog.
</p>
</body>
</html>
In this example, we have a basic XHTML 1.1 document structure with a title and a body. Inside the body, we have an <h1> heading that says “Example of the HTML del tag” and a paragraph that contains a sentence with some text that has been deleted using the <del> tag and some text that has been inserted using the <ins> tag.
One of the main differences between XHTML 1.1 and earlier versions of XHTML is that XHTML 1.1 requires documents to be served with an XML MIME type, such as application/xhtml+xml. This means that the document must be well-formed XML and adhere to strict syntax rules. In this example, we’ve also added an XML declaration at the top of the document to indicate that it is encoded in UTF-8.
The <del> tag and <ins> tag are both part of the HTML 4.01 specification, which is allowed in XHTML 1.1. However, XHTML 1.1 also introduces some new elements and attributes, such as the <ruby> element for adding annotations to text, and the role attribute for specifying the role of an element in an accessible document.
When this document is rendered in a web browser that supports XHTML 1.1, the deleted text will be crossed out and the inserted text will be underlined, just as in the previous examples. However, because XHTML 1.1 is served as XML, it may require some additional configuration on the web server to ensure that it is served correctly.
