How to semantically strikethrough with HTML5
Tags: webdev, frontend, html, beginners
Published: 2021-05-27 09:17:39

Do you want a visual indication that something was removed from the document or a visual representation that you cross something from a (to-do, wish-list) list. Do you want to create a discount price component? We can easily use some CSS for this result, but HTML5 provides us with more semantic alternatives. Give meaning to your code by using `<del>` and `
` tags! 👌

[IG short post] (https://www.instagram.com/p/CPIivkhDAVZ/)

&nbsp;
```html
Hello 
world!

```
> Hello ~~world!~~
&nbsp;

```html
Hello <del>world!</del>
```
> Hello ~~world!~~
&nbsp;

&nbsp;
## The `<del>` tag
&nbsp;
#### What does it do?  

The `<del>` tag renders text with a strikethrough and represents some text that has been deleted from a document. 

### When to use it?

Use `<del>` when you want to indicated that something was removed from the document/page

#### How to use it?

The most common use case is displaying source code difference information (e.g., what your PR changes in GitHub). It can be used along with the `<ins>` element, to indicate the added text to the document.

#### Example

```html
<p>Is There Life Before Coffee? <del>Yes</del> <ins>No!</ins></p>

```

![Screenshot 2021-05-27 at 11.50.13](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dl7bpnn7i3t2d2m0yeex.png)

&nbsp;
## The `
` tag
&nbsp;

### When to use it?

The HTML `
` tag renders text with a strikethrough and represent things (or text) that are no longer relevant or accurate.

#### Example

```html
<p>
Today's Special: Chocolate pancakes
 SOLD OUT</p>
```

![Screenshot 2021-05-27 at 11.51.14](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6xtk2i009iqrb26n3371.png)

## `<del>` vs `
`

You may find confusing when to use which, as both tags has the same visual representation (yes, they are both strikethroughs).

Let's see good and bad cases for these: 

#### `
`

✅ A good case for `
`: Discounts

```html

<span>
100€
 99.99€</span>

```
![Screenshot 2021-05-27 at 11.56.59](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/50lw8hs2esi3mqo9g8xn.png) 

⛔️ A bad case for `
`: Document edits

#### `<del>`

✅ A good case for `<del>`: Wishlist/To-do list

```html
<ul>
	<li>
2021 plans
</li>
	<li>Social Distance</li>
	<li>Get vaccinated</li>
	<li>Travel 2022</li>
</ul>
```

![Screenshot 2021-05-27 at 12.03.24](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ge027o42xpydgxdka3g.png)
 
⛔️ A bad case for `<del>`: Information that is no longer accurate

## strike

You might have seen the <strike> tag, especially if you worked in old codebases. This is a tag that was deprecated in HTML4. It was replaced with a more semantically appropriate 
 and <del> tags in HTML5. As documentation suggests, it's not suggest it to use it anymore!

> This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes.


## Are they semantic enough?

The del and s tags are not announced by most screen readers. It can be announced by using the CSS content property, along with the ::before and ::after pseudo-elements. 

> It is important to not abuse this technique and only apply it in situations where not knowing content has been deleted would adversely affect understanding

```css
del::before,
del::after {
  /* CSS rules */
}

del::before {
  content: " [deletion start] ";
}

del::after {
  content: " [deletion end] ";
}
```

## References 

[`<del>`: The Deleted Text element ] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del)

[`
`: The striked Text element ] (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s)

[What is the difference between `
` and `<del>` in HTML, and do they affect website rankings?] (https://stackoverflow.com/questions/16743581/what-is-the-difference-between-s-and-del-in-html-and-do-they-affect-website)

[`
` vs `<del>` in HTML] (https://stackoverflow.com/questions/52113995/s-vs-del-in-html)


[HTML del tag] (https://www.w3schools.com/tags/tag_del.asp)