S marks information that is no longer accurate or relevant, such as a previous price. The old content can remain visible for context.
What You Need to Know
Use del instead when the purpose is to record an actual edit to a document. S does not automatically express the same edit history.
Em represents stress emphasis; i is an alternate voice. Visual italics alone are not a reason to choose one over the other.
The goal is not to collect as many tags as possible. Pick the element that best describes what the content really is.
Example: See It in Action
Take a look at this small piece of HTML. You can use it in a practice document and change the text to make it your own.
This is a short HTML fragment. To try it as a webpage, put it inside the body element of a complete HTML document.
<p>Old price: <s>$40</s>
</p>
<p>Current price: $25</p>
<p>The old price is no longer accurate.</p>Let’s Understand the Example
- S indicates content that is no longer accurate or relevant; use del when recording an actual edit.
- A p groups a paragraph of related text. Start another paragraph for a new thought.
Look for the text “Old price:” in the page. If the visible result surprises you, inspect the rendered elements to see what the browser actually built.
What Should You See?
The page should include “Old price:”. If it looks different from what you expected, open developer tools and compare the source with the elements the browser created.
Try removing one piece of markup in a scratch copy, refresh the page, and compare the behavior. This is often the fastest way to understand what that piece contributes.
Try It Yourself
- Show an old price and a current price in a product description.
- Save your changes, open or refresh the page, and compare the result with the original example.
- Tell a friend what your change did. If you are not sure, undo it, refresh the page, and compare.
Common Beginner Mistakes
- Using s for deleted text in a tracked change without considering del.
- Avoid picking tags just for their default bold, italic or spaced appearance. Use CSS for presentation.
Key Takeaways
- S marks information that is no longer accurate or relevant, such as a previous price.
- S indicates content that is no longer accurate or relevant; use del when recording an actual edit.
- Em represents stress emphasis; i is an alternate voice. Visual italics alone are not a reason to choose one over the other.