Explaining web standards using Microsoft Word

Screenshot from MS Word: Content to be formatted in MS Word

Recently, while training a group of content authors on writing for the web, I had to explain the difference between appearance and semantics. The authors were not techies, so I wanted to avoid talking about HTML, web standards and anything else with a strong eye-glazing potential. That's when I turned to Microsoft Word...

When is a heading, not a heading?

First off, I wanted to structure my text a little better for better scannability. One approach is to simply change the size of the text using the font size menu in MS Word.

Screenshot from MS Word: Changing the font size of text to make it appear like a heading.

Consequently, when trying to create a table of contents, Word throws an error, "Error! No table of contents entries found". Why? While the the headings certainly look like headings. In fact, there is no inherent meaning that Word can infer and as a result can't build a table of contents.

Screenshot from MS Word: Error in creating table of contents as there are no real headings in the content.

Semantics versus appearance

There is an alternative approach to just increasing the font size. We can assign what's called a style to the text instead.

Screenshot from MS Word: Assigning a heading rather than changing the font size

By using the style menu to apply a "Heading" style to the text, we are giving it meaning, thus allowing Word to build a table of contents successfully.

Screenshot from MS Word: Word can interpret the meaning of headings and thus build a table of contents.

And that's web standards without having to mention XHTML or CSS once! What about you, how do you make the complex simple?

Categories: Accessibility, Design and Content