Semantics

A great deal has been written about semantic markup and its importance. Some of this material has been written by purists who defend semantics because they like the logic and structure that semantic markup can convey. That’s all very well and good, but what does semantic markup mean? And what practical usage does it have?

Semantic means to have, or convey, meaning. In an Extensible/HyperText Markup Language (XHTML/HTML) context, this translates to using elements that actually convey accurate information about the content they enclose. If you have a page header or sub-header, it should be in an H tag (heading element). If you have a nice testimonial quote, it should be within blockquote element rather than basic paragraph tags with applied style. Remember the saying It does what it says on the box? Well, markup provides the boxes for all page content. Semantic markup ensures that your boxes have the right labels. It goes a long way to ensuring that software doesn’t have to open the box and analyse the contents first before figuring out how to render them. After all, if you open a can labeled “Beans,” you expect to see beans, not peaches. If can labeling was as variable as some of the page markup on the web, meal times would be a lot more… well, interesting, if not exactly edible.

Markup First, Style Later
When marking up new content, your first thought should be What kind of content is this phrase? and not What does this say? or How should it look? Concentrate on describing the content by applying the correct semantic markup first. Examine every piece of text on a page to determine what type of content it is and how best to convey that through markup. The humble p element should be your last resort — not your first choice.

Only when this process is complete should you start to look at graphical styling via your Cascading Style Sheet (CSS). If you have made good use of the full range of markup that is available — rather than just relying on p tags and the odd header element — you may even find that your pages are easier to style. You will probably end up with a larger set of elements to style on a single page and you may not have to create so many specific classes or ids to achieve a given effect.

Why Does Semantic Markup Make A Difference?

Well, for a start, you have no real idea how many of your visitors won’t actually see your pages using a graphical browser, so you can’t rely upon purely graphical renderings to convey meaning. Styling your quotes using p tags with added styling to render the text dark red or bright green is pretty pointless if some of your visitors won’t ever see the pretty effect. Google certainly won’t, and that’s one pretty important visitor.

However, from an accessibility point of view, a great deal of the assistive technology out there is reliant upon semantic markup. The assumption is that headings will be in enclosed in H tags; quotations will be marked up properly and lists will use list markup and not just rely on hard-coded line breaks. JAWS, for example offers users the option to jump from header to header without reading the intervening text. This is the audio equivalent of a sighted user scanning a page to see what topics it includes before settling down to read a particular paragraph. However, this feature is useless if a page doesn’t contain any header markup. That line of text at the top of a page may look like a header but, unless it’s marked up correctly, it’s not a header and it certainly won’t sound like one.

Similarly, some screen readers may automatically change voice when encountering quotations that are correctly identified using markup. If you don’t use appropriate quotation markup, it becomes extremely difficult to separate, for example, testimonials, from their surrounding text. Conversely, if you use blockquote inappropriately to simply indent plain text, screen reader users may be presented with a page that no longer makes sense.
Finally, using semantic markup offers the best method of future proofing your content and ensuring that it continues to make sense via a whole range of user agents now or in the future.

Different Strokes

Although adopting semantic markup will, by definition, tend to lead you towards particular approaches and practices, it is worth bearing in mind that there may not be a hard and fast rule in every situation. Even within semantic markup, there is room for a number of equally valid Best Practice approaches. For example, should a page have just one H1 heading element or is it okay to have more than one? There are good arguments for both sides of that particular discussion.

Right and wrong are concepts that should only have limited usage within web design once you get beyond the appropriate World Wide Web Consortium (W3C) specifications. Beyond these documents, there is only opinion and user feedback. The latter is particularly important and should never be under-estimated. Given that web pages are supposedly intended for use by users, this does seem to be stating the obvious but there are times when user feedback can get over-looked in the pursuit of semantic perfection. And that just has to be plain wrong!

Opinions, however, are just that. They are not rules and they are open to discussion. Listen to as many points of view as you can, then think about it on your own until you reach your own informed decision. At the end of the day, that’s what applying semantic markup is really all about — thinking about your content first.