Tag S

The HTML `` element is a semantic markup tag used to represent content that is no longer accurate, relevant, or timely. It renders text with a strikethrough (a horizontal line through the center of the text). While it looks identical to other strikethrough tags at first glance, the `` tag carries specific semantic meaning in modern HTML5. It tells browsers, search engines, and assistive technologies that the enclosed text represents a state or piece of information that has been superseded or is no longer valid (for example, an old price next to a discounted sale price). --- ## Syntax and Usage The `` tag is an inline element. It requires both an opening tag (`~~`) and a closing tag (`~~`). ### Basic Syntax ```html ~~Old, outdated text~~ ``` ### Semantic Distinctions: `` vs. `` vs. `` It is common to confuse `` with other strikethrough elements. The table below clarifies when to use which: | Tag | Name | Visual Render | Semantic Meaning / Best Use Case | | :--- | :--- | :--- | :--- | | **``** | Strikethrough | Strikethrough | **No longer accurate/relevant.** (e.g., "Regular Price: ~~$50~~ Now: $30"). | | **``** | Deleted | Strikethrough | **Document editing/version control.** Indicates content that has been explicitly deleted or removed from a document. Often paired with ``. | | **``** | Strike | Strikethrough | **Deprecated.** This was the original HTML presentation tag. **Do not use it** in modern web development; use CSS `text-decoration: line-through` instead. | ### Attributes The `` tag supports all (https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) (such as `class`, `id`, `style`, and `title`) and (https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes#event_handler_attributes). It does not have any unique, element-specific attributes. --- ## Code Example Below is a clean, semantic HTML and CSS example demonstrating how to use the `` tag in a real-world e-commerce product card. ```html HTML s Tag Example
Sale
Wireless Noise-Canceling Headphones

~~$199.99~~ $149.99

Experience pure sound with 30-hour battery life.

``` --- ## Best Practices and Common Pitfalls ### 1. Do Not Use `` for Document Edits If you are displaying a document revision, a blog post update, or a collaborative text edit where text has been physically removed, do not use ``. Use the `` (delete) tag instead. * **Incorrect (for edits):** `Our next meeting is on ~~Tuesday~~ Wednesday.` * **Correct (for edits):** `Our next meeting is on ~~Tuesday~~ Wednesday.` ### 2. Accessibility Considerations (Screen Readers) By default, most screen readers (like JAWS, NVDA, and VoiceOver) do not announce the presence of the `` tag to avoid cluttering the audio output. This means visually impaired users might hear "$199.99 $149.99" without realizing the first price is crossed out. * **Solution:** Use CSS off-screen text or ARIA labels to explicitly state the context for screen readers. ```html
Original price: ~~$199.99~~ Sale price: $149.99
``` *(Where `.sr-only` is a CSS class that clips the text off-screen so only screen readers can access it).* ### 3. Avoid Using `` Purely for Visual Styling If you want to put a line through text purely for aesthetic reasons (and the text is *not* outdated or incorrect), do not use the `` tag. Instead, use a standard `` or `
` tag and apply the CSS `text-decoration` property: ```css .stylistic-strike { text-decoration: line-through; } ```

YouTip

Tag S

Wireless Noise-Canceling Headphones

📂 Categories