Site navigation.
HTML Best Practices
- Use XHTML (See the W3C's What
is XHTML?) Why XHTML and CSS? (modified from NYPL
Online Style Guide)
- Smoother upgradability and increased interoperability.
Unlike old–style HTML pages, valid, well–formed XHTML
documents can easily be “transported” to wireless devices,
Braille readers and other specialized web environments. Moreover,
XHTML’s insistence on clean, rule–based markup helps us
avoid the kind of errors that can make web pages fail even in traditional
browsers like Microsoft Internet Explorer, Netscape Navigator, and
Opera Software’s Opera browser.
- Easier maintainability. Styles can be controlled
centrally and global changes can be made simply. Also code will be
more durable and easier to troubleshoot if structure is separated
from design and the pages are validated. In other words, decreased
development and maintenance costs.
- Pages download and render faster. CSS should result
in smaller pages since all of the design elements are in a central
stylesheet that is cached by the browser. Furthermore, although IE
and Netscape frequently render malformed HTML pages OK, it takes the
browser some time to calculate and compensate for poorly written pages.
- Greater accessibility. Strict separation of structure
(XHTML) from style (CSS) is central tenet of the W3C's User
Agent Accessibility Guidelines 1.0. Search engine optimization
is an added bonus.
- A painless transition to more advanced technology.
The web is moving to XML, a powerfully enabling technology. Writing
well–formed, valid XHTML pages is the easiest way to begin this
transition.
- Skip XML Prologue. (See Designing
with Web Standards, p. 157)
- Validate pages (See Site
Valet - Why Validate? and Why
Validate Your HTML)
- Separate Cascading Style Sheets and JavaScript into separate files.
(See Tips
For Authoring Fast-loading HTML Pages)
- Internet Explorer treats external JavaScript and CSS files in much
the same way as graphics, caching the files in case other pages use
them. If the same CSS or JavaScript is used on multiple pages, the
later pages will benefit from the cached copy already having been
downloaded. That means your visitors will only need to download the
files once. The more bloated your JavaScript, the better this load
time improvement will be. (Put
Your Web Pages on a Diet)
- Use DIVs instead of TABLEs for layout to enhance underlying semantics,
accessiblity, and reach. (From
Table Hacks to CSS Layout: A Web Designer's Journey and Practical
CSS Layout Tips, Tricks, & Techniques). HTML should be used for
content and structure; CSS should be used for presentation.
- See div_form.html as an example of a
form using DIVs instead of TABLEs
- Hybrid, transitional layout = streamlined table layout with structured
textual markup and accessibility enhancements. (Designing
with Web Standards, p. 198) See also i3forum
and Eric Meyer, projects 1-6.
- Make sure your pages load quickly. If a page doesn't load in 8 seconds
you forfeit 1/3 of your visitors. See 1-Hit.com
Load Time Checker.
- HTML page with no pictures should be under 150 KB.
- Do not compress Dreamweaver templated pages with HTML
Compress 5, since the comments that indicate the template are
removed. Otherwise, compressing files can improve download speed.
- Hide
from e-mail spiders. See also The
Enkoder.
- Avoid meta refresh tag, frames.
Accessibility
- Always use
alt attribute for images. Use alt=""
for images that are intended to create purely visual design effects. Use
alt attribute to convey meaning rather than describing the
image. For example, use alt="Smith Company home page" rather
than alt="Smith Company logo"
- Use
noscript tag for those who can't use JavaScript.
- Use table summary and identify table.
- Use
skip navigation, tabindex, and accesskey.
- Forms. See Building
Accessible Websites by Joe Clark.
