- HTML Tutorial
- HTML - Home
- HTML - Introduction
- HTML - Editors
- HTML - Basic Tags
- HTML - Elements
- HTML - Attributes
- HTML - Headings
- HTML - Paragraphs
- HTML - Fonts
- HTML - Blocks
- HTML - Style Sheet
- HTML - Formatting
- HTML - Quotations
- HTML - Comments
- HTML - Colors
- HTML - Images
- HTML - Image Map
- HTML - Iframes
- HTML - Phrase Elements
- HTML - Meta Tags
- HTML - Classes
- HTML - IDs
- HTML - Backgrounds
- HTML Tables
- HTML - Tables
- HTML - Headers & Caption
- HTML - Table Styling
- HTML - Table Colgroup
- HTML - Nested Tables
- HTML Lists
- HTML - Lists
- HTML - Unordered Lists
- HTML - Ordered Lists
- HTML - Definition Lists
- HTML Links
- HTML - Text Links
- HTML - Image Links
- HTML - Email Links
- HTML Color Names & Values
- HTML - Color Names
- HTML - RGB
- HTML - HEX
- HTML - HSL
- HTML Forms
- HTML - Forms
- HTML - Form Attributes
- HTML - Form Control
- HTML - Input Attributes
- HTML Media
- HTML - Video Element
- HTML - Audio Element
- HTML - Embed Multimedia
- HTML Header
- HTML - Head Element
- HTML - Adding Favicon
- HTML - Javascript
- HTML Layouts
- HTML - Layouts
- HTML - Layout Elements
- HTML - Layout using CSS
- HTML - Responsiveness
- HTML - Symbols
- HTML - Emojis
- HTML - Style Guide
- HTML Graphics
- HTML - SVG
- HTML - Canvas
- HTML APIs
- HTML - Geolocation API
- HTML - Drag & Drop API
- HTML - Web Workers API
- HTML - WebSocket
- HTML - Web Storage
- HTML - Server Sent Events
- HTML Miscellaneous
- HTML - MathML
- HTML - Microdata
- HTML - IndexedDB
- HTML - Web Messaging
- HTML - Web CORS
- HTML - Web RTC
- HTML Demo
- HTML - Audio Player
- HTML - Video Player
- HTML - Web slide Desk
- HTML Tools
- HTML - Velocity Draw
- HTML - QR Code
- HTML - Modernizer
- HTML - Validation
- HTML - Color Picker
- HTML References
- HTML - Cheat Sheet
- HTML - Tags Reference
- HTML - Attributes Reference
- HTML - Events Reference
- HTML - Fonts Reference
- HTML - ASCII Codes
- ASCII Table Lookup
- HTML - Color Names
- HTML - Entities
- MIME Media Types
- HTML - URL Encoding
- Language ISO Codes
- HTML - Character Encodings
- HTML - Deprecated Tags
- HTML Resources
- HTML - Quick Guide
- HTML - Useful Resources
- HTML - Color Code Builder
- HTML - Online Editor
HTML - <del> Tag
HTML <del> tag is use to mark the deleted textual content on the website. It stands for "deleted text." It represents a range of text that has been deleted from a document. This can be used when rendering "track changes" or source code provides different information. When we use the <del> tag, the browser will usually strike a line through the text that has been deleted.
Note: To find deleted and inserted content in a document, use the <ins> tag with <del>, which will display deleted and inserted text.
Syntax
<del >...</del >
Attribute
HTML del tag supports Global and Event attributes of HTML. Some specific attributes accepted as well which are listed bellow.
Attribute | Values | Description |
---|---|---|
cite | URL | It defines the URL of the source of the quotation. |
datetime | YYYY-MM-DDThh:mm:ssTZD | Hold date and time when the text were deleted. |
Examples of HTML del Tag
In these examples we will see the usage of del tag on the text element. We will also decorate our del tag using internal CSS.
Strike on Text using del tag
In the following example, we are creating an HTML document and using the <del> tag to strike a line on the unwanted content.
<!DOCTYPE html> <html> <body> <h2>Example of del tag </h2> <p> This is tutorialpoint; here learning is easy <del>and difficult</del>, so their caption is easy to learn. </p> <p> <del>I am deleted paragraph</del> </p> </body> </html>
Using attribute with del tag
In this example we will used the cite and datetime attribute to mention the source and deleted date of the context.
<!DOCTYPE html> <html> <body> <h2>Example of del tag </h2> <p> This is tutorialpoint; here learning is easy <del cite= "https://www.tutorialspoint.com/index.htm"> and difficult</del>, so their caption is easy to learn. </p> <p> <del datetime="2024-01-03T12:00:00Z">I am deleted paragraph</del> </p> </body> </html>
Styling deleted element using CSS
Considering the following example, we use the <del> tag to give a strike line to the unwanted content and use the CSS properties to set the background color of the deleted content.
<!DOCTYPE html> <html> <head> <style> del { text-decoration: line-through; background-color: #fbb; color: #555; } ins { text-decoration: none; background-color: #d4fcbc; } </style> </head> <body> <p>There is <del>nothing</del> <ins>no code</ins> either good or bad, but <del>thinking</del> <ins>running it</ins> makes it so. </p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, <del>when an unknown printer took a galley of type and scrambled it to make a type specimen book</del>. </p> </body> </html>
Supported Browsers
Tag | |||||
---|---|---|---|---|---|
del | Yes | Yes | Yes | Yes | Yes |
To Continue Learning Please Login
Login with Google