Topics: Code: HTML and XHTML

Proper document markup. Separating structure from presentation and behavior. The lowercase semantic web. Building accessible, cross-platform, cross-browser pages. Using web standards correctly. Converting from HTML to XHTML and why you would want to. Site display hosed? A faulty DOCTYPE may be at fault. DOCTYPE switching and beyond. (72 articles)

The Accessibility Hat Trick: Getting Abbreviations Right

by Colin Lieberman

Issue 210January 16, 2006

“...abbreviations and acronyms stand out as one of the trickiest areas of AAA to implement well. In order to meet our three-part goal of standards compliance, backwards compatibility, and full accessibility, we need to give this aspect of our content a bit of thought.”

Sensible Forms: A Form Usability Checklist

by Brian Crescimanno

Issue 209December 19, 2005

”...we can make our users’ lives easier by thinking about the way people interact with our websites, providing clear direction, and then putting the burden of sorting out the details in the hands of the computers—not the users.”

Printing a Book with CSS: Boom!

by Bert Bos, HГҐkon Wium Lie

Issue 208November 28, 2005

“HTML is the dominant document format on the web and CSS is used to style most HTML pages. But, are they suitable for off-screen use? Can CSS be used for serious print jobs?”

High Accessibility Is Effective Search Engine Optimization

by Andy Hagans

Issue 207November 08, 2005

“I have been a search engine optimizer for several years, but only recently have become infatuated with web accessibility. After reading for weeks until my eyes became sore, and painstakingly editing my personal website to comply with most W3C Web Content Accessibility Guidelines, I have come to a startling revelation: high accessibility overlaps heavily with effective white hat SEO.”

CSS Swag: Multi-Column Lists

by Paul Novitski

Issue 204September 26, 2005

If you want to present a list in multiple columns youвЂ™ll need to compromise. Choose your poison…

High-Resolution Image Printing

by Ross Howard

Issue 202September 05, 2005

Your client looks up and says, “Why does our logo look funny when we print the pages?” Do you sigh dramatically, or learn about Ross Howard’s technique for printing high-resolution images via CSS? We vote for option B.

More About Custom DTDs

by The W3C QA Group

Issue 199May 17, 2005

Your web page uses non-standard elements, so, following the advice of earlier ALA articles, you bang out a custom DTD to make sure your document still validates. Not so fast, says the W3C’s Quality Assurance team, who argue that crafting a custom DTD for the sole purpose of validation is a mistake … and then tell when it is the right thing to do.

Spruced-Up Site Maps

by Kim Siever

Issue 197March 30, 2005

The clean-n-simple site map gets a nice haircut and and a shoe-shine as Kim Siever shows us how to hook custom bullet styles to troublesome nested lists.

Validating a Custom DTD

by J. David Eisenberg

Issue 194February 01, 2005

In his article in this issue, Peter-Paul Koch proposes adding custom attributes to form elements to allow triggers for specialized behaviors. The W3C validator won’t validate a document with these attributes, as they aren’t part of the XHTML specification. Not to worry! This article will show you how to create a custom DTD that will add those custom attributes, and will also show you how to validate documents that use those new attributes.

The Way It’s Supposed to Work

by Erin Kissane

Issue 192January 18, 2005

Groundbreaking accessibility information. Project management and information architecture theory from old-school experts. Plug-and-play solutions to universal design and development problems. Experimental CSS/DOM hacks that use non-semantic elements to do funky design tricks. One of these things is not like the others…which is why we’re introducing a tiny new feature to the magazine.

Invasion of the Body Switchers

by Andy Clarke, James Edwards

Issue 189November 19, 2004

Wouldn’t it be great if we could update the classic ALA Style Switcher to accommodate multiple users and devices, including some that aren’t even traditional browsers, all from a single JavaScript and CSS file? Well, now we can! Enter the Body Switcher.

Drop-Down Menus, Horizontal Style

by Nick Rigby

Issue 184June 29, 2004

Multi-tiered drop-down menus can be a hassle to build and maintain — especially when they rely on big, honking chunks of JavaScript. Nick Rigby presents a way to handle this common navigation element with a cleanly structured XHTML list, straightforward CSS, and only a few concessions to browser quirks.

Dynamic Text Replacement

by Stewart Rosenberger

Issue 183June 15, 2004

Let your server do the walking! Whether you’re replacing one headline or a thousand, Stewart Rosenberger’s Dynamic Text Replacement automatically swaps XHTML text with an image of that text, consistently displayed in any font you own. The markup is clean, semantic, and accessible. No CSS hacks are required, and you needn’t open Photoshop or any other image editor. Read about it today; use it on personal and commercial web projects tomorrow.

Dynamically Conjuring Drop-Down Navigation

by Christian Heilmann

Issue 183June 15, 2004

Got content? Got pages and pages of content? Wouldn’t it be nice if you could offer your readers a drop-down menu providing instant access to any page, without having to sit down and program the darned thing? By marrying a seemingly forgotten XHTML element to simple, drop-in JavaScript, Christian Heilmann shows how to do just that. There’s even a PHP backup for those whose browsers lack access to JavaScript. Turn on, tune in, drop-down.

Separation: The Web Designer’s Dilemma

by Michael Cohen

Issue 181May 14, 2004

Presentation separated from structure. Structure separated from content. The foot bone connected to the … what were we talking about? Michael Cohen steps in to examine our assumptions and relieve our separation anxiety.

Power To The People: Relative Font Sizes

by Bojan Mihelac

Issue 176April 09, 2004

Relative font sizes may make websites more accessible — but they’re not much help unless the person using the site can find a way to actually change text size. Return control to your audience using this simple, drop-in solution.

The Table Ruler

by Christian Heilmann

Issue 175March 26, 2004

Make your site easier to use by giving your visitors a virtual “ruler” to guide and track their progress down long data tables. With a pinch of JavaScript and a dash of the DOM, your table rows will light up as your visitors hover over them.

Accessible Pop-up Links

by Caio Chassot

Issue 174March 19, 2004

Sometimes we have to use pop-ups — so we might as well do them right. This article will show you how to make them more accessible and reliable while simplifying their implementation.

Zebra Tables

by David F. Miller

Issue 173March 05, 2004

While misused tables are becoming increasingly rare, the table retains a legitimate role in data formatting. A little CSS and JavaScript magic can make tables better at what they do best: displaying tabular data.

Striped tables without all the CSS classes

CSS Sprites: Image Slicing’s Kiss of Death

by Dave Shea

Issue 173March 05, 2004

Say goodbye to old-school slicing and dicing when creating image maps, buttons, and navigation menus. Instead, say hello to a deceptively simple yet powerful sprite-based CSS solution.

CSS Sprites

CSS Design: Creating Custom Corners & Borders Part II

by Søren Madsen

Issue 172February 27, 2004

Part I showed how to create fluid, dynamic CSS layouts with customized borders and corners. Part II advances to the next level, extending the technique to work with more complicated backgrounds such as gradients and patterns.

JavaScript Image Gallery

by Jeremy Keith

Issue 170February 06, 2004

Making an online gallery of pictures should be a quick process. The gap between snapping some pictures and publishing them on the web ought to be a short one. Here’s a quick and easy way of making a one-page gallery that uses JavaScript to load images and their captions on the fly.

Exploring Footers

by Bobby van der Sluis

Issue 170February 06, 2004

With old-school table layout methods, vertical positioning is a piece of cake. With CSS layout, it’s a piece of something else. New ALA contributing writer Bobby van der Sluis shows how to regain control of footers and other vertically positioned layout elements via CSS, JavaScript, and the DOM.

CSS Design: Custom Underlines

by Stuart Robertson

Issue 169February 02, 2004

While web designers generally have a great deal of control over how a document should be presented, basic CSS doesn’t provide many options for the style of underlines below the links on a page. But with a few nips and tucks, you can take back creative control of the way your links look. Frequent ALA contributor Stuart Robertson shows how.

Night of the Image Map

by Stuart Robertson

Issue 166December 12, 2003

CSS design from beyond the grave: all the secret ingredients you’ll need to resurrect the image map using CSS and structurally sensible XHTML.

Retooling Slashdot with Web Standards Part II

by Daniel M. Frommelt

Issue 165December 04, 2003

In Part I, we showed how Slashdot could save money and reduce bandwidth requirements by converting to semantic XHTML markup and CSS layout. In Part II, we explore how standards-compliant markup and deft use of CSS could make Slashdot and your sites play nicely in print and on handheld devices.

JavaScript Image Replacement

by Christian Heilmann

Issue 164November 21, 2003

Perhaps it’s time to consider the ups and downs of a JavaScript-based alternative to the Fahrner Image Replacement technique. This version uses plain vanilla XHTML with no special IDs or CSS tricks.

Retooling Slashdot with Web Standards

by Daniel M. Frommelt

Issue 164November 21, 2003

A look at the markup behind Slashdot.org that demonstrates how simple — and cost-effective — the switch to a standards-compliant Slashdot could be. (Part I of a two-part series.)

Suckerfish Dropdowns

by Patrick Griffiths, Dan Webb

Issue 162November 07, 2003

Teach your smart little menus to do the DHTML dropdown dance without sacrificing semantics, accessibility, or standards compliance or writing clunky code.

Keeping Navigation Current With PHP

by Jason Pearce

Issue 162November 07, 2003

Turning unordered lists into elegant navigational menus has become a new favorite pastime for many web designers. A dash of PHP can add intelligence to your CSS-styled menu.

Sliding Doors of CSS, Part II

by Douglas Bowman

Issue 161October 30, 2003

In Sliding Doors of CSS Part I, Douglas Bowman introduced a new technique for creating visually stunning interface elements with simple, text-based, semantic markup. In Part II, he pushes the technique even further with rollovers, a fix for IE/Win’s CSS bugs, and lots more.

Sliding Doors of CSS

by Douglas Bowman

Issue 160October 20, 2003

Image-driven, visually compelling user interfaces. Text-based, semantic markup. Now you can have both! Douglas Bowman’s sliding doors method of CSS design offers sophisticated graphics that squash and stretch while delivering meaningful XHTML text. Have your cake and eat it, too!

Random Image Rotation

by Dan Benjamin

Issue 160October 20, 2003

Readers return to sites that appear fresh and new on each visit. On a news site, magazine, or blog, stories or headlines will be updated frequently. But how can static sites keep that fresh feeling? Dan Benjamin’s free image randomizer may do the trick, and you needn’t be a programmer to install it.

Using XHTML/CSS for an Effective SEO Campaign

by Brandon Olejniczak

Issue 159September 01, 2003

Improve your search engine ranking by harnessing the benefits of well-authored XHTML and using CSS to boost your code-to-content ratio.

Accesskeys: Unlocking Hidden Navigation

by Stuart Robertson

Issue 158June 16, 2003

Your favorite applications have shortcut keys. So can your site, thanks to the XHTML accesskey attribute. Accesskeys make sites more accessible for people who cannot use a mouse. Unfortunately, almost no designer uses accesskeys, because, unless they View Source, most visitors can’t tell that you’ve put these nifty navigational shortcuts to work on your site. In this issue, Stuart Robertson unlocks the secret of providing visible accesskey shortcuts.

A Standards-Compliant Publishing Tool for the Rest of Us?

by Jeffrey Zeldman

Issue 157June 06, 2003

Publishing with web standards is not for experts alone. A new tool hopes to make it easier for anyone. ALA interviews Six Apart’s Anil Dash about his company’s easy-to-use, standards-compliant publishing tool, TypePad.

Cross-Browser Variable Opacity with PNG: A Real Solution

by Michael Lovitt

Issue 156December 21, 2002

Think you’re stuck with wimpy GIFs and their rigid binary transparency? Well, think again, Sunshine. Michael Lovitt shows how to overcome flaky browser support for PNG so you can take advantage of this graphic format’s lossless compression, alpha transparency, and variable opacity.

Flexible Layouts with CSS Positioning

by Dug Falby

Issue 155November 15, 2002

Want to spend less time on CSS hacking and more time on design? Need your site to look as good on a 160×160 PDA screen as it does on a 1024×768 PC monitor? In Flexible Layouts with CSS Positioning, designer Dug Falby shares two techniques for practical grid-building.

Flash Satay: Embedding Flash While Supporting Standards

by Drew McLellan

Issue 154November 09, 2002

By default, Macromedia Flash generates HTML that is invalid (but it works). Can you have your Flash and web standards, too? Drew McLellan has found a way to embed Flash content using only valid tags and attributes.

Inline XML

by Lachlan Cannon

Issue 153November 01, 2002

What’s in a namespace? For one thing, the power to use multiple XML languages in a single document. Lachlan Cannon explains how inline XML can extend the capability of your sites.

CSS Design: Taming Lists

by Mark Newhouse

Issue 151September 27, 2002

Do you crave the disciplined order of proper (X)HTML lists but long for control over their presentation? You can put a stop to their wild ways and bad behavior. Mark Newhouse shows you how to tame those lists by making them submit to your CSS while maintaining logical HTML structure.

Manage Your Content With PHP

by Christopher Robbins

Issue 148August 09, 2002

XHTML for structured markup. CSS for presentation. What more could you ask? How about an easy way to manage your site, using free, open-source tools? Christopher Robbins shows how to use PHP to build an intro-level, template-driven system that handles site maintenance chores and remembers your visitors’ preferences.