The other day, after I published my article about skip links, I remembered I needed to validate my RSS feed. I had received some feedback several months ago that my migration might have broken the feed for some people, and I wanted to test that the feed was still active. As I checked out the article, I found something of a delightful surprise: one particular line of my article was highlighted green.

For context: I use eleventy-plugin-syntaxhighlight to format my codeblocks. This plugin (like many syntax highlighting plugins!) lets you specify certain lines of code to highlight, so as to draw readers’ attention to those lines. It does this using the <mark> tag — you can see the issue where <mark> was proposed over <div> or <span>.

The plugin’s choice to use <mark> under the hood to highlight important lines of code gave my RSS reader, Feedly, the chance to style those lines, too — something it wouldn’t have had the chance to do had the codeblocks used a CSS-only solution. This means that people who read the article on a completely different platform than my site, without any of my site’s styles, get to benefit from the highlights in the same way.

I think that’s really cool.

I think in web development, we tend to assume that if our page ever shows without styles, it’s a symptom of a problem. Perhaps our stylesheets didn’t load, and the user needs to refresh the page to fix it. With RSS readers, however, the lack of our styles is a feature. It’s the reader working as intended.

RSS readers aren’t the only technology where blowing away our styles means the technology is working as intended. We may have people who read our page with their browser’s Reader Mode, which similarly blows away our styles to provide a lightweight, distraction-free reading experience.

Maybe our site is less a document and more of a web app, and our users won’t be using RSS readers or Reader Mode to use the site. Even still, users may view our site without our styles, thanks to high contrast mode or user stylesheets, which can also blow away any and all of our page’s styles.

I didn’t set out to make sure my RSS reader would show highlighted lines of code, and I doubt eleventy-plugin-syntaxhighlight was specifically built with RSS users in mind, either. This pleasant surprise in my RSS reader serves as a reminder that people will come to our page or our content in a variety of ways, many of which we’ll be unable to anticipate. Leaning on semantic markup means all of these users get the best possible chance to make sense of our site.