Geekers - In this material, I will discuss text formatting which functions to make writing with underlines and crossed out. To create underlined text, use the <u> tag pair. Then for strikeout text like “[DEL: strikethrough :DEL] �, there are three tags used for this type of text format, namely <strike> tag, <s> tag and <del> tag. The three tags that display the crossed out text certainly have differences which will be explained below.
As I said earlier, there are two elements in formatting, namely Logical Formatting and Physical Formatting. Physical Formatting is used to format text according to the characteristics of the text, while Logical Formatting is used to format text according to the content or contents of the text. The <u>, <s>, <strike>, and <del> tags are the Physical Formatting group.
For further discussion, let's look at the explanation of writing with underlines and strokes below:
A. Writing with underline
As mentioned before, you can use the <u> tag for underline formatting. Where the <u> tag indicates the beginning of the underlined text and the </u> tag indicates the end of the underlined text.
The following is an example of using the <u> tag:
<!DOCTYPE html>
<html>
<head>
<title>Using Underscores in HTML</title>
</head>
<body>
<u>This text is underlined</u>
</body>
</html>
Once opened in a browser, the result will look like the image below:
how to underline text in html how to underline text in html
Basically, <u> tag is only supported by HTML 4.01 and not supported by HTML5. The reason is because the <u> tag can already be replaced with CSS using text-decoration : underlined.
Here's an example of using CSS to underline text:
<!DOCTYPE html>
<html>
<head>
<title>Using Underscores in HTML</title>
<style type="text/css">
h4{
text-decoration: underlined;
}
</style>
</head>
<body>
<h4>This Text is Underlined</h4>
</body>
</html>
Once opened in a browser, the result will look like the image below:
how to underline text using html css how to underline text using html css
B. Writing with scribbles
To create a strikethrough text effect, you can use the <s>, <strike> and <del> tags. Where the three tags are both displayed in the same form in the browser, namely the text is crossed out. Here's an example of using the three tags:
<html>
 <head>
 <title>Stroke Text in HTML</title>
 </head>
 <body>
 <s>Look at this, the text is crossed out</s><br>
 <strike>See This is Crossed Out</strike><br>
 <del>See This Text Crossed Out</del><br>
 </body>
</html>
Once opened in a browser, the result will look like the image below:
how to make strikethrough in html how to make strikethrough in html
As can be seen from the picture above, visually in the browser there is absolutely no difference between the three, but there are differences in usage and meaning. First, the <s> tag stands for Strikethrough which makes the text strike through. In HTML 4.01, crossing out text using the <s> tag doesn't mean anything, it's just a form of text formatting that displays text with a strikethrough. Whereas in HTML5, the <s> tag is used to define the text to be corrected (no longer correct).
Second, the del and strike tags both function to display crossed out text in the sense that the text is incorrect or deleted. Third, the del and strike tags have the same function, the difference is that the strike tag originating from HTML 4.0.1 is no longer supported by ÂHTML5 because it is considered deprecated (not recommended for use and may no longer be supported by web browsers). Meanwhile, the <del> tag is still supported by HTML5.
The <del> element has several attributes including:
Function Attributes
Datetime Specifies the date and time when the text was struck off or deleted
Cite Specifies a URL to a document that describes why the text was deleted or crossed out
In CSS, browsers generally display <s> and  <del> elements with fixed values, namely text-decoration: line-through.
Now you must have understood the function of the tags described above. The next HTML tutorial is about using superscript, subscript, small and marked text elements to learn more about text formatting in HTML.
([24]Submit) Part 6: How to Make Italic and Bold Text
([26]Submit) Part 8: Superscript, Subscript, Small and Marked Text