CodeBitch : click here to go to MacEdition Homepage

Valid attitude

June 18, 2001

So you’ve been sold on this Web standards idea. What does it really mean? At a minimum, it means writing valid markup. Tags that balance. All the necessary attributes and no attributes that don’t belong. No block elements inside inline elements. Quotes around attribute values when they are required. Obeying restrictions on tag nesting – things like list items (LI elements) only going inside lists (UL and OL elements), and nothing going in those ULs and OLs unless it’s wrapped in an LI tag.

Despite the rarity of pages that actually validate, it’s really not that hard to write valid pages. If that was all there was to this standards thing, it would be easy.

It’s a mindset

XML is useful even if it never gets near your Web site. Cascading Style Sheets reduce file sizes even if you only transfer very simple formatting out of the HTML and into a linked stylesheet. But really leveraging standards is a mindset. It means caring about the full diversity of your users. It means following the spirit of the standards, not just the letter – and doing it because you care and you understand why, not just because somebody told you to do it. It means being accessible and economical in the way you write markup.

Be stylish

If you can design your site without tables for layout, do it. If you can’t, given your current audience, at least don’t go past two nested tables. If your layout requires three nested tables, rethink it. Use a stylesheet at least for basic text formatting, and make it an external stylesheet to ensure consistency across the site.

Use CSS selectors instead of everything having a class attribute (I know I don’t always follow this one myself). Use class attributes that refer to the reason for it being there: that is, class="callout" not class="smalltextonyellow". Use HTML entities to introduce typographic niceties like emdashes and curly quotes. Use the proper ones, not the stupid Windows-specific ones that Dreamweaver puts in. Use consistent units for font sizes and line heights in your stylesheet.

Let your site degrade gracefully instead of restricting yourself to whatever worked in Netscape 2 or 3. Stop complaining about browsers that are “wrong” because they don’t do what Netscape 4 does. Banish the FONT tag. Separate style from content.

Be economical

If you must use tables-based layouts, try to build them in separate horizontal blocks. This is much faster to load than a single mega-table. Delete unnecessary formatting code in your HTML. Avoid inline styles (the style attribute). Then, if you decide to redesign your site, you can edit one file, not dozens of attributes in indivual elements on every page. Even if you’ll never redesign the site, an external stylesheet means that it’s easier to keep things consistent and each style only needs to be defined once, not every time you use it. Optimise your graphics: most GIFs only need 32 or 64 colors, not 256. Don’t use spacer GIFs. Use graphics sparingly.

Don’t use PDF where HTML is more appropriate. Do use PDF where it makes sense. Use external JavaScript files where possible, instead of embedding everything in the head of the HTML document.

Be accessible

Understand accessibility issues – it’s not only about disabled people. Valid HTML requires ALT attributes on all your images. Truly accessible code means thinking hard about the content. Put titles in links, descriptions on tables, and spell out those acronyms in a tooltip.

Test your pages in Bobby. Think about how your AvantGo or Lynx users will be able to read your site’s content. Analyse your log statistics to know your audience. Download HTML Tidy and use it.

Use Flash if you want, but ask yourself “Why?” first. Remember that search engines don’t do Flash and don’t need all those font tags. And while you’re ditching those font tags, don’t use points to describe font sizes in screen-media stylesheets.

Use structural markup: CITE and EM instead of I, CODE and SAMP instead of TT, H2 instead of <big><big><big> or P class="heading". Use HTML 4.0 elements like ACRONYM and ABBR and Q. It makes things easier for search engines and speech-based browsers.

Write valid markup. Use an appropriate DOCTYPE declaration on your pages. Know the difference between DOCTYPEs. Validate your pages or at least check them in iCab. Don’t assume that the Transitional DOCTYPE is the one for your content: XHTML Basic might be just as appropriate. And test your pages in multiple browsers, not just the Big Two.

Be forward-looking

Consider XHTML. Add a print-media stylesheet. Have a plan for how you will evolve your sites to take advantage of emerging CSS2 support. Consider generating content in appropriate formats from XML/XSL base documents on the fly. Use JavaScript for useful things, not just glitzy rollovers. Learn about the advanced features of PDF. Learn the DOM.

Be active

Don’t just shoot the breeze on Web designer sites. If you find a browser bug, inform the company concerned. Give feedback on preview and beta versions of browsers. If you work out a fix or workaround for a browser bug, publish it or pass it on to someone who will. Learn from others, and let others learn from you.

Lobby Microsoft, Adobe and Macromedia to get FrontPage, GoLive and Dreamweaver to generate valid markup by default. Join the Web Standards Project.

Be smart

Use templates. Become expert in the search-and-replace functions of your editor. Document your site design so that someone else can follow what to do. Know that your readers are more important than your own designer’s ego.

Do standards. Remember why they’re important.

— CodeBitch (codebitch@macedition.com) is the grumpy cow who does the HTML production for MacEdition. Read other articles by CodeBitch

E-mail this story to a friend