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.
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:
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.
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.
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.
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:
EM instead of
SAMP instead of
H2 instead of
P class="heading". Use
HTML 4.0 elements like
Q. It makes things easier for search engines and speech-based
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.
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.
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.