del tag in html with examples

Home » HTML » HTML Tags » del tag in html with examples

del tag in html with examples

Posted by 20Fingers2Brains on Tags: HTML , HTML Tags

The <del> tag is used for markup of deleted text. Markup of deleted text can be useful in determining differences between multiple versions of the same document.
Browsers will normally strike a line through deleted text and underline inserted text.
The <del> is supported in all major browsers.

Example :

     <html>
     <head>
     <title>DEL</title>
     </head>
     <body>
     <p style="font-size:30px;">HTML is <del>hard</del> easy to learn.</p>
     </body>
     </html>

Demo :

In the above example, we have shown how to use del tag. the del tag renders text with crossed line.

del and Style :

<html>
<head>
<title>DELStyle</title>
<style type="text/css">
del
{
font-size:50px;
font-family:comic sans ms;
color:green;
}
</style>
</head>
<body>
<p style="font-size:20px;">HTML is <del>hard</del> easy to learn.</p>
</body>
</html>

Demo :

In the above example, we have rendered del element with CSS applied to it using element selector.

del and Javascript :

<html>
<head><title>DELJavascript</title>
<style type="text/css">
del
{
font-size:30px;
font-family:comic sans ms;
color:green;
}
</style>
<script type="text/javascript">
function del()
{
var element=document.createElement("del");
var text=document.createTextNode("hard");
element.appendChild(text);
document.getElementById("del").appendChild(element);
}
</script>
</head>
<body>
<p>HTML is 
<span id="del"></span> easy to learn.</p>
<input type="button" id="b1" value="Press" onclick="del()">
</body>
</html>

Demo :

In the above example, we have used javascript to render the del element. On button click, the dele element is created and is appended to the text.