Strikethrough/line through on text in HTML

In the same manner as underlining a text, you can do a strikethrough, where a horizontal line goes through the text.

Strikethrough/line through can only be done in one way: STYLE="text-decoration: line-through". The style has to be used on a tag for text sections, e.g. <P>, <DIV> and <SPAN>. The way text decorations are normally used for texts, <SPAN> will usually be a good solution, as it doesn't add any other formatting to the text string.

A piece of text will look like this as code:



On the page, when shown, it looks like this:




In previous versions of HTML a tag called STRIKE has been available. Officially, this tag is not supported by HTML 5, but at the time of writing (January 2020), this tag also works with HTML 5:


As this tag is supposedly being discontinued, the recommendation from here, is to use text-decoration: line-through in stead of STRIKE, due to both validation of the code and because you cannot expect the the tag to keep working correctly on all platforms.

Instead of specifying strikethrough directly, you can use the two tags <S> and <DEL>, representing "text which is no longer correct" and "deleted text" respectively. One should just be aware that it is only most browsers having strikethrough as default for this tag, not all browsers. If you want to ensure having strikethrough for all browsers, you have to specify it in the stylesheet, like this:


It also means that if you specify text-decoration: none or text-decoration: underline, the two tags will show no lines or underline instead.

As these are tags with specific functions in the mark-up of the text, the recommendation from here, is to only use S and DEL, where this is the correct mark-up of the text as something which is no longer correct or something which has been deleted. Should you need strikethrough for other reasons, the recommendation from here, is to use text-decoration: line-through directly on the tag, if it is the entire content of the tag that requires strikethrough, and otherwise to use text-decoration: line-through with a SPAN.

This type of styling is, in combination with other effects, very sensitive to both programming and browser. So, here it is of utmost importance to test on the various browser types and versions of these.

The thickness of the line is affected by some browsers, wben the text is in bold, so here you have to be a bit careful with your combinations. Når man arbejder med en tekst-streng der alligevel er stylet af en tag som f.eks. <SPAN>, så plejer jeg at anbefale at man tilføjer sin styling på dette, hvis det er praktisk muligt. Det er en praktisk ting omkring overskueligheden af koderne. Koden for kombinationen ser i så fald således ud:



On the page, when shown, it looks like this:




Line thickness and placement is also affected by the font size, e.g. at supscript and subscript, but the effect depends on the browser being used. Here you also have to be aware of combination effects, where variations in programming can cause differences in effects.

If we look at at temporary change in font size to 16.0 pt, where each section is controlled by a separate code, the code looks like this:



On the page, when shown, it looks like this:



If, on the other hand, you make a section with a new font size, inside the section with strikethrough, the code looks like this:



On the page, it looks like this.



For some browsers you will see one continuous line, while on other browsers, you will see a change in height when the font size changes.