[111Design.ca]

111Design Consulting

Supporting Industry Standards and Accessibility [Navigation]

Menu

[toxic waste]

design tips

You are here:  Design Tips » Web Authoring Tools

tip#10

Semantic Purity and Web Authoring Tools

After snooping through the source code on hundreds of Sites (and designers' Sites, at that!), I've come to the conclusion most Web designers never bothered to learn the semantic meaning of basic HTML tags. Granted, WYSIWYG editors are partially to blame. They encourage the user to think in terms of a tag's default visual rendering, rather than what the tag actually means. Please think when marking up your documents. Not everyone uses a graphical browser. A text reader, for example, will (and should) place emphasis on words marked up with strong and em. They may be spoken in a louder tone of voice. Consider this if you've been using them just to make text appear bold or italicized. Conversely, if certain words were meant to be emphasized, and b, i, or a different font color was used, the meaning does not come across when a person can't see it.

The blockquote tag was not meant to indent a block of text. It indicates a quoted passage.

The h1 through h6 tags indicate a page's main heading and subheadings. They do not mean "make text big". Heading tags should be used in order. Don't start with h4 and use h1 further down on the page.

Tables are meant for organizing tabular data, not laying out sections of a page. It is not difficult to convert a table-based Site to a fluid CSS layout.

If the default browser styling of a tag needed to convey information looks ugly, style it with CSS. Don't pick something else that might look better but has no semantic meaning—or worse, conveys the wrong meaning! Styled div and span tags are meaningless too. Use appropriate markup wherever possible.

WYSIWYG editors ("What you see is what you get") do not produce valid markup. What's more, they insert so much unnecessary code, it's near impossible to find the page's content when this needs to be edited by hand. The truth is, all you need to create a visually stunning, valid and accessible Site is a plain text editor like Windows Notepad. Surprised? Any Joe Blow with a copy of Frontpage can make a Website. An invalid, slow loading, semantically non-sensical and subsequently, inaccessible Website that only works in a limited environment. If it is a business or educational Site, insist on hand-coding and standards compliance. In some states, it is now the law. If your designer gives you a blank stare when you mention this, do yourself a favour and take your business some place else.

Note: Even technically valid markup can, and often does, contain attrocious semantic errors. I don't know of any tools that test for semantic purity. This requires human validation.

Copyright © 2003-2009, 111Design.ca