Dropped this question in the FCC Discord earlier but didn’t get much traction, so figured I’d open a thread here.
I’ve been looking into the <s> element lately and realized it’s almost completely dead in modern dev. Even if you inspect major e-commerce platforms, nobody uses it for old prices. Instead, they just slap a <span> or <del> and cross it out using a CSS ::before pseudo-element with absolute positioning.
I get the history behind it — developers needed custom line colors, thickness, or angles that standard CSS couldn’t handle back in the day. But doing this visually via CSS completely breaks accessibility for screen readers.
If semantic HTML is supposed to be the gold standard for better page parsing, why do these tags get completely pushed aside for CSS workarounds? Is it just old habits die hard, or am I missing some practical reason why <s> is avoided?
Using <s> is a great idea, as long as you actually need strikethrough text, and it isn’t just a stylistic choice. If it’s stylistic, then CSS is the better solution.
Unfortunately, thoughtful, semantic HTML isn’t very common. The reason for that is simple. Most web apps are built in a hurry without much thought and care. It takes time to write semantic HTML and even more time to learn it. It’s the same reason so many corporate websites are nothing more than thousands of nested divs. It’s ugly, but it works. Corporations rarely care about details.
AI also struggles with semantic HTML. It usually produces a lot of generic elements because it was trained on code containing a lot of generic elements.
Google’s algorithms have largely adapted to non-semantic HTML simply because the vast majority of websites are that way.
Good question! I found this, which might explain it in part:
The presence of the s element is not announced by most screen reading technology in its default configuration. It can be made to be announced by using the CSS content property, along with the ::before and ::after pseudo-elements.
I would question if the s element is semantic, it seems like more of a purely visual element. We can understand that something that is crossed out is no longer current, but “strike” doesn’t really describe why it’s crossed out. The fact that screen readers might not announce it also seems to really reduce it’s usefulness.
I didn’t know search algorithms had adapted to that layout style — thanks for the info!
Honestly, I don’t really use AI to write code ( turned off Copilot and only use Gemini for questions to save time on googling ), so I’m not even sure how to leverage that yet xdd
Okaay, so just to clarify: since <del> means “deleted/removed” and <s> means “no longer accurate/relevant”, which one is actually better for real-world accessibility? If screen readers ignore <s> by default, does <del> get better support, or should we just avoid both and stick to visually hidden text for screen readers?
Sry if I’m not writing correctly or asking silly questions. I’m still learning
s just means “strikethrough” which is the visual element of a line drawn through the text. The semantic meaning is really dependent on the context. In the example on the link I sent it means that this product is currently sold out, and presumably they will have it again later.
It could mean something else in another context. It might mean something has been renamed.
does <del> get better support
Look up del on the mdn site that I’ve linked and read about it there.
However, <s> is not appropriate when indicating document edits; for that, use the <del> and <ins> elements, as appropriate.