Templates are easy to change. Content usually isn’t.

There are two kinds of HTML:

1. HTML that makes up templates
2. HTML that is content

I feel like some discussions about HTML are clouded by not making this distinction.

For example, I like Harry Roberts approach to classes on header elements. Harry was talking about “apps”, so perhaps it was implied, but let’s put a point on it: those classes are for headers in HTML templates, not HTML content.

(This is just a little random example I thought of, this concept applies to broadly.)

If it’s a chunk of HTML that goes in a database, it’s content

It’s not impossible to change content, but it’s likely much harder and more dangerous.

Websites can last a long time. Content tends to grow and grow. For instance on CSS-Tricks there are 2,260 Posts and 1,369 Pages. Over the years I’ve sprinkled in classes here and there to do certain stylistic things and over time I always regret it.

Why the regret over classes in content?

Maybe you’ll find you named the class wrong and start hating it.
Maybe you’ll change the class to something you like better.
Maybe you’ll stop using that class.
Maybe you’ll forget that class even existed, and not address it in a redesign.
Maybe you’ll use that old name again, only it does something new now and messes up old content.

Those are just a few possibilities.

But the pain comes when you decide you’d like to “fix” old content. What do you do? Find all old content that uses those classes and clean them out? Try to run a database query to strip classes? Tedious or dangerous work.

Content in Markdown Helps

Markdown is comfortable to write in, once you get the hang of it. But its best feature is that it doesn’t put, or even allow you to put, classes on any of the HTML it generates. Unless you write HTML directly in the Markdown, which always feels a little dirty (as it should).

Styling Content

How do you style the content then, without classes? Hopefully content is fairly consistently styled. You can scope styles to content.

.content h2 { }
.content figure { }
.content table { } 

Say you absolutely need different variations of things in content

If you have to break the “rule” of no classes in content, perhaps you can still apply some smarts to how you handle it.

• If you’re using a CMS, perhaps it has some default classes that are likely to stick around. For example, WordPress spits out classes like align-right on images if you choose it.
• Can you insert the content in such a way it isn’t just a part of a “blob” of content? Like a custom field?
• Can you insert the content via an abstraction? In WordPress parlinance, like a shortcode? [table data="foo" style="bar"]
• If you have to use a class, can you name it in a way that feels forever-proof-ish?

Templates are easy to change

That’s what they are for! You probably have a handful of templates compared to how many pages they generate. Change them, and all content using them is updated. The HTML that surrounds the content will all have whatever useful classes you use.

So

• HTML for templates = classes, yay!
• HTML for content = keep it raw!