Approach: For a long time I didn’t really understand the reason for CSS, XHTML, and standards in general. I didn’t get that the reason for the separation of CSS and HTML was to separate content from presentation. And even when I read that statement in Standards based design books, I didn’t understand why. What are the benefits of this separation?
12/42 seconds loading Cut page size and thus loading times by up to 75%. Saving strain on servers and disk space at hosting service or on machines hosting the site. Particularly for image heavy sites such as Artists would often have saving speed in the details helps insure that images of artwork will load sooner.
How to write lite HTML?
Choosing an editor
Chances are, you already have a tool that you are comfortable with, but is that tool really supporting your efforts to author valid, accessible, modern code? Validity and accessibility are ultimately not something you paste on top of an otherwise broken website. By far the easiest way to author well is to learn to do it all along. When I finish writing a template page for a website, I run it through the CSS validator and the HTML validator on the W3C website. When I first started authoring valid code this was a tedious process. I was trying to validate something broken. Now, when I finish with a site it often validates without any errors. This is the result of a change in process. A change in editors (pico just allows too many typing errors!) as well as rethinking the way to author and the reasons for separating content from presentation.
I reviewed several html editors in the article WYSIWYG Editor Accessibility Test Results: Allowing writers to contribute to the creation of accessible documents. This review was based on a search for a non-technical tool for writers. Based on your level of technical skill and the resources you have available you may consider Dreamweaver or Contribute (with options configured for accessibility and validity), Amaya, or XMLSpy.
First write XHTML Strict 1.0.
It’s just easier to work within the rules once you get used to them. This means that you use a doctype declaration at the top of every page. This declaration lets the browser (Internet Explorer, Netscape, Opera, and others) know what kind of mark-up to expect and in some cases how to interpret it. Transitional sounds easier at the outset, but diagnosing layout problems is a lot easier if you are certain these are not just the quirks of lower quality code. The initial investment is well worth its payoff in the long run.
This means that you must finish what you start! List Items, breaks, images, paragraphs, and horizontal rules must all have closing tags. This is accomplished in two ways. List items and paragraphs must have closing tags.
<ul> <li>Earrings</li> <li>Nose Rings</li> <li>Other Rings</li> </ul> <p>Text text text text.</p>
Images, horizontal rules, meta elements, and breaks remain a single tag, but they must be closed within themselves. Note the space between the end of the tag information and the back slash. This is essential for some reason I do not now recall. Just do it.
<img src="images/pearlearrings.jpg" />
<br />
<hr />
Write all tags and attributes in lowercase. Put quotes around attribute values. Use escape characters for all symbols. For instance & for the ampersand.
Planning
A return to grade school, outline the document like a research paper. Start with a roman numeral I. and work your way down to the finish. At this point don’t consider how you want to present the content, but only what it is and how it relates heirarchically to the rest. For Instance, consider this website: Flesh out
- Nicole Sullivan
- Skip Links
- Stylesheet Switcher
- Navigation
- Article Title
- Subtite
- Sub-Sub Title
- Subtite
- Extra Information
Using Lists for Navigation Elements
Using Selectors
Selectors are the key to avoiding div-itis. Probably half the weight of the first couple of sites you build using CSS will be div tags.
Meaningful Names
You’ll be kicking yourself the third time your client asks you to change to look of an element you called "redUnderline". If you choose structurally meaningful names for classes like "specialInstructions", "teamCaptain", or "salePrice" the look can change without losing cohesiveness. This will also keep a consistent appearance accross multiple pages which not only helps branding, but allows disabled visitors in particular to quickly understand how to navigate around your site and find the information they are looking for.