So far in this series, we’ve really just talked about building links to improve your rankings. Internal links should be descriptive and link to pages with similarly descriptive titles and headings. External links to your site should come from relevant and preferably, authoritative sources. In Part 3, we will now talk about using proper semantic markup in your web pages, and delve into some of the considerations of building standards-compliant web pages, discuss some issues related to 508 compliance and handicap accessibility, and take a brief foray into the merits of CSS vs. table-based layout. Phew, that’s a lot to cover, so perhaps some of that will have to wait until next week, but let’s get started and see how far we get today.
When the web was invented, there was just one standardized markup language called HTML that was supported by all the browsers. HTML included all kinds of “tags” to allow authors to mark up standard text documents which that would cause the document to be displayed with various text styles that actually had structural meaning in the document. Various levels of <h> (heading) tags were provided for headings, <li>(list) tags for bulleted lists, <table>(table) tags for displaying sets of data. As the web has evolved, the original intent of HTML to provide both structure and style in a document has caused many HTML authors to forsake proper document structures for the sake of visual layout. As many programmers know, it is a big “no-no” to mix display logic with functionality or content, but web designers had little choice until the past couple of years, resulting in a mish-mash of non-standard techniques for building web pages. Recently, with the broader adoption of standards by major web browsers and the advent of XHTML and Cascading Stylesheets (CSS), many web developers have started taking advantage of proper document structure and the ability to separate the content and document structure from the display logic. There are many reasons this is a good thing, but here’s a list of the most obvious ones:
- The ability to control the look of all your pages via a single CSS file, making sitewide style changes quick and easy.
- Possibly reducing the amount of code required to display your content (this often touted to have SEO benefits by improving your code to content ratio)
- The ability to provide stylesheets to properly display the same content on a variety of different devices, such as displaying mobile or print versions of your content. This is especially relevant to handicap accesibility issues where blind users might use a screenreader to consume your content.
So what exactly is a properly structured web page? Take the visible textual content on an given web page and dump it into a plain text file. Order the content in the most sensible way you can think of, as if you were going to send it to someone as a MS Word document. Use proper heading tags for varying levels of headings, and use bullet lists for items that belong in lists. Forget about how the document looks and concentrate on making the most LOGICAL document you can. When you are done, your content should be pretty well structured so that it can be read as plain text with no styling and still make perfect sense. Once that’s done, you simply design a stylesheet to control where and how the various structural elements are displayed on the user’s screen.
You can sort of tell how good a job you’ve done on structuring your code by running your page through an automated outlining program such as the one built into the WC3 Validator, which uses headings tags to summarize your page. If the automated outline reads well, then you’ve probably done a pretty good job of marking up your text.
This may all sound very daunting to the inexperienced web developer and to be honest, it is. Due to differences in the ways different browsers interpret XHTML and CSS, it can be very difficult to both design a properly structured XHTML document and achieve the desired layout through CSS. The tools available for creating standards-compliant documents are slowly getting better, but for now, your best bet is to either stick to a tried a true template developed by a 3rd party, or hire someone who is an expert at CSS and XHTML development.
So at this point you may be asking yourself, “Why go through all the trouble of building a standards compliant web site at all, when I could build it the old way in less time with better backwards-compatability with older browsers?” The answer really depends on the requirements of your organization. Large organizations will probably see more immediate benefits from a standards-compliant web site than smaller organizations. Specifically, it can protect you from lawsuits such as the one filed by The National Association of the Blind against Target for failure to have a handicap accessible web site. You can read about it on the Disability Rights Advocates web site (which ironically, is not valid XHTML).
Clearly, there are advantages and disadvantages to creating standards-compliant web sites. As the web continues to mature, you can expect that standards-compliant web sites will become the norm and we will see fewer and fewer table-based layouts, so if you have the means, it’s probably wise to future-proof your site by making it standards-compliant. You’ll have the piece of mind that goes with using the latest and greatest technology, and you may even help your placement in the major search engines.
That about wraps up part 3 of this series. Check back next week for more great tips.