- Beginner Recipe: How to markup figures and captions using the figure and figcaption elements
- Beginner Recipe: How to markup the date and time using the <time> element
- Beginner Recipe: Make a Native Toggle Widget with the <details> element
- Beginner Recipe: How to Correctly Use the <address> Element
- Beginner Recipe: Highlight Text with the <mark> Element
- Beginner Recipe: Tracking the Completion of a Task with the <progress> Element
- Beginner Recipe: Measuring with the <meter> Element
- Beginner Recipe: How and When to Use the <s> element
- Beginner Recipe: Changes to existing elements
- Recipe: Wrapping links around elements
- Intermediate Recipe: Adding more semantic information with Microdata
- Intermediate Recipe: Using WAI-ARIA with HTML5
- Advanced Recipe: Markup an Article Page with Comments
Beginner Recipe: How and When to Use the <s> element
Previously the s element was specifically for strikethrough text. In HTML5 it has been redefined as now it is used to represent content that is no longer correct or relevant.
What does this mean exactly? The s element could be used to represent the original RRP of a product that now has a different price, see Figure 2.7. Depending on the context, it may not always be correct to display out-of-date information. However, in this case it can come in handy to user.
Figure 2.7 The s element used to display an old price
<h1>Tom Leadbetter’s Autobiography</h1> <p><s>Recommended retail price: £45.99</s></p> <p><strong>Now selling for just £5.99!</strong></p>
Because in HTML 4 the s element defined strikethrough text so by default browsers will put a style the s element with a strikethrough.
If document text has been edited or removed, don't use the s element, use del element instead.