Veteran web designers are proud to tell stories from the Great Separation of Style and Content during the early '00s. But the emancipation of content, illustrated most profoundly by the RSS feed, has left many of us searching for the line where content ends and style begins.

On a technical level, it's easy. The words of this blog post are stored in a database and then formatted into markup (HTML) when your browser hits this webpage. Then a stylesheet (CSS) comes along and handles its appearance: which typefaces it uses, what colors it's rendered in, any non-content graphics like icons or backgrounds, and even layout like whether the sidebar goes on the left or right.

On a semantic level, it's more complex. Where does style end and content begin? Most of us would say that typefaces and colors are clearly style and not content, but what about capitalization and punctuation? Although it's mostly obsessive designers ranting about small-capped subheads and em dashes, they are characters embedded in sentences. From a technical standpoint, they fall on the markup side of the markup/stylesheet divide.

Except when they don't.

The blurry line

For lists, we consider it sufficient to specify whether items are ordered (<ol>) or unordered (<ul>) in the markup. The stylesheet then decides whether to provide bullets, numbers, Roman numerals, or even tiny hearts. Punctuation, in this case, is style. Typing "1." in an HTML document is semantic heresy!

Those small-capped subheads are the same way. We specify a line of text as a subheader (<h2>) and the stylesheet can decide if it should be all caps, small caps, or left as is. Typing "THIS IS A SUBHEAD" limits these options, so we don't do it.

Like lists and caps, we could leave it to the stylesheet to wrap any quotes (<q>) with the right quotation marks. It's not hard to empower the stylesheet for this task and it would provide genuine value to cultures that don't use double-quotes. Perhaps because quotation marks are readily available on our keyboard, our semantics-inspired idealism fades. We type " and move on.

The line gets even blurrier with treatments like italics, boldface, or underlining. Traditionally, designers have used these visual alternatives not merely to illuminate or embellish, but to convey meaning. There is more than style at work in the difference between little women and Little Women.

Separation anxiety

Why does finding this line matter?

In your browser, it doesn't. Content and style are reunited in a practically invisible process, leaving the fact that there even is a line irrelevant to the reader (although it makes the designer's life better).

The divide is more pronounced with feed-reading. A feed-reader like Google Reader or NetNewsWire (my choice), accesses the content but leaves behind the style. Users of feed-readers value this "pure" approach as a (if not the) advantage over visiting each and every blog or news service to which they subscribe. It allows for quick and efficient reading... but at what cost?

There have been plenty of studies on how typography and other elements of style affect the perception of tone. Color and imagery are used to provide context. Consider the Wall Street Journal's stipple portraits instead of photographs or A List Apart's muted palette and watercolor illustrations that elevate it from just another tech blog to the Wall Street Journal of the web design world.

More than superficial enhancements are lost. This is an aside. In a feed, it's just another paragraph and seems out of place.

Stylistic elements are used to decipher the personality of the speaker, which in turn allows you to parse the content more efficiently. Without these cues, it's too easy to hit "next unread" and be halfway into a new paragraph before you remember that this author uses a lot of hyperbole and her claiming that everyone needs to be on Facebook is completely different than if the design director for NYTimes.com had said it.

Two solutions

The most basic solution is for authors to exert control over the context of their content. This might take the form of limiting feeds to article summaries, forcing a visit the website of origin in order to finish reading. Or it might be a branded footer including links back to the original source... a reminder that the feed is not congruent to the content, but a variant in an alternative format. This is a popular solution, because it's something that an author can do by him- or herself.

A more complex—but potentially more satisfying—solution would be to allow for greater blurriness (the blurriness that already exists) in feed-reading. This would involve authors agreeing to abide by stricter semantic rules such as those provided by the hAtom microformat or new HTML 5 elements like <article>, <aside>, and <section>. In turn, developers of feed-reading software would allow styling for those elements alone. We could still provide transportability while avoiding the headers, footers, sidebars, and distracting advertising that have driven people to feed-readers in the first place.

This second solution begins to sound a little like the standards-free hell of email clients right now. Does GMail support this CSS declaration or that one? How about Outlook? No one wants to take that paradigm and apply it to the 90% working world of RSS feeds. Instead, we're likely to see this situation resolve itself in one of two ways: the concept of authorship and context becomes significantly more important and require more attention than it has been in the past, or a generation that's grown up with this new paradigm as the only one they've ever known says, "yeah, so what?"