How to display incorrect content using HTML5?


In HTML we have two elements i.e. s and del to display the incorrect content. There is no experimental difference between the ‘s’ and ‘del’ tags and also there is no proof that search engines take any action on these elements.

For Example

Let’s say there are two sentences to see the difference between an incorrect sentence vs correct sentence. The correct sentence is the same as of normal text whereas the incorrect sentence is marked by a black strike-through line.

Syntax

<s>

The <s> tag represents the strike-through or line-trough text i.e. no longer correct or precise.

<del>

The <del> represents the deleted text or removed text which strikes a line through the sentence or word.

Properties Used

The following properties used in the below examples −

  • color − This attribute defines the color of the text.

  • font-size − This attribute defines the height of the text.

  • font-weight − This attribute defines how the text attribute is displayed like normal, bold, ultra-bold, etc.

Example 1

In this example, we will show both correct and incorrect sentences using the elements such as paragraph, s, and, del. Then use the internal CSS to design the part of h1 and p elements that represent the better expression of the webpage.

<!DOCTYPE html>
<html>
<title>Tutorialspoint</title>
<head>
   <style>
      h1{
         color: Purple;
      }
      p{
         font-weight: bold;
      }
   </style>
</head>
<body>
   <center>
      <h1>Correct VS Incorrect Sentence</h1>
      <p>I shall make him to go</p> 
      <s><p>I shall make him go</p></s>
      <p>He will come for meeting you</p>
      <s><p>He will come to meet you</s></p>
      <p>Always help the poor</p>
      <del><p>Always helps the poor's</p></del>
   </center>
</body>
</html>

Example 2

In this example, we will use the internal CSS to set the two classes, namely, tp and gp to set the properties. The tp class sets the property for the div element whereas the gp class sets the property of another div element that shows the incorrect content using s and del elements.

<!DOCTYPE html>
<html>
<title>Tutorialspoint</title>
<head>
   <style>
      .tp{
         font-size: 40px;
         font-weight: bold;
         color: darkgreen;
      }
      .gp{
         font-weight: bold;
         color: darkred;
      }
   </style>
</head>
<body>
   <h1>The incorrect content using HTML5</h1>
   <div class="tp">
      Tutorialspoint
   </div>
   <div class="gp">
      The front-end development skill includes <s> ML, Arduino, Fortran,</s> HTML5, CSS3, <del> Jailwind CSS </del>  and, JavaScript.
   </div>
</body>
</html>

Conclusion

We explored the concept of incorrect content using HTML5. We saw there are some changes in the output of both examples which is the styling of an element by defining the style tag. The main purpose of the example is to understand the difference between <s> and <del> tag which shows similar behavior.

Updated on: 15-May-2023

75 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements