Are You Too Classy?

A tale of communication involving the separation of style and content.

When learning Cascading Style Sheets (CSS), some beginners get carried away by the idea of creating classes. While classes of styles certainly have their place, they should not be used to replace the logical page structure that HTML can create.

The reason CSS exists is to enable the separation of web page content from web page appearance. Every web page contains text about something. That text information is the content of the page. The content is an effort at communication.

As readers, we are accustomed to a certain structure to our content. We expect books to have titles, chapter names, paragraphs, possibly a table of contents. We expect magazines to have article titles, headings, paragraphs, images that illustrate a point, and a list of contents. Web pages are expected to have titles, headings, paragraphs and other similar conventions to help us make sense of the content on the page.

HTML and the structure of information

From its very beginning, way back in 1992, HTML, the language of web pages, has enabled the production of pages that help communicators structure information into titles, headings, paragraphs, and lists to help readers make sense of content.

That structure (you might call it page architecture) is created with HTML tags. I want to go into detail about a few tags, to explain how tags help organize content into meaninful structure.

There are six heading tags, <h1> being the largest and <h6> being the smallest. Those heading tags create a logical structure for the content in the headings.

A heading tagged as an <h1> is considered to be the most important heading on the page. In a book it might be the book title or a chapter title. In a magazine it might be an article title. To a reader, it stands out as the most important heading on the page. The other heading tags, such as <h2>, designate subheadings of somewhat lesser importance.

In terms of information structure then, a web page needs an <h1> tag and possibly several headings of lesser importance.

Pages have paragraphs. The HTML tag for that is <p>. So the paragraphs a reader sees on a web page, such as this one you are reading, should be tagged as paragraphs in the HTML.

Pages have lists, quotes, tables, images, and many other elements that clearly communicate information by their structure alone. HTML has the tags to markup lists, quotes, tables, images and other page elements as such. HTML markup of lists, quotes, etc., helps structure the information into a clear communication for readers.

Enter the class

When learning CSS, one discovers something called a 'class.'

A class can be a wonderful thing. For example, I want to write a page full of paragraphs, but I want the first paragraph to be a teaser, a hook. I want that teaser to be in italics so it stands out from the rest of the paragraphs. I'm hoping you'll read the teaser and get hooked into reading all the rest of the article. But in HTML, a paragraph is a paragraph is a paragraph is a paragraph.

But not in CSS. In CSS, I can create a particular class of paragraph that will be different looking from the other paragraphs.

If done correctly, my teaser will still structurally be a paragraph, but it will look different (be styled differently) because I have applied a particular class of style to it.

When done correctly, classes are applied to those HTML tags we talked about that create a structure for communication on a page: headings, lists, paragraphs and so on.

When done incorrectly, classes are used for everything and the HTML tags that create a page structure get forgotten.

Too classy

Aye, that's the rub. It is possible to create a class that will make text look big and important. It is possible to put some text at the top of a page and apply a class to it so it looks big and important. (In fact, it looks like the main heading on the page.) It is possible to do that without tagging that particular bit of text as an <h1>.

What's wrong with doing that? Without the <h1>, all you have is text. You have text without the logical and structural communication information that it is the page's most important heading.

But, you say, I can tell it is a heading because it looks like a heading–it looks like this big old honking thing up here at the top of the page and it must be a title, so there. Ahh, I respond, you think it communicates something to you because you are looking at it.

What if you are not looking at it? What if you are hearing it read aloud by a screen reader? What if your page is viewed in a Palm device or a cell phone? Or what if your page is viewed in a browser that does not understand styles? Used under those conditions, would your page communicate a structure that would help a user make sense of the text?

The Internet is more than desktop computers and web browsers that fill up a 17 inch screen. It is filled with all sorts of communication devices. You want to communicate your content effectively no matter what device a user has. To do that, you need to stick with the logical structure created by the HTML tags.

I have noticed that people just learning CSS have a tendency to use classes for everything and forget all about using normal HTML tags like <h1>, <p>, <q> and others. They have gotten too classy for their own good.

Yes, use classes. Just make sure they are applied to tags that convey information about the organization of the content. Don't generate classes of styles and apply them to otherwise untagged text.