Recently, we unveiled a redesigned version of our DynECT Website. Within a three week time-table we updated existing content, added new content, and gave the design a major overhaul. This is the first of our websites to use strict XHTML. Its easy to get stuck using transitional XHTML, especially when doing a redesign because it is not always easy to convert legacy markup to comply with Strict requirements. However, using the Strict Doctype carries a lot of benefits with it. It encourages separation of structure and content, has better cross-compatibility between web browsers, and enforces accessibility to users with special needs.
Separation of Structure and Content
Among web designers and developers, Separation of Structure and Content is one of those phrases that is thrown around as an argument supporting strict XHTML markup. However, if you’re not a designer/developer, its meaning can seem ambiguous. Simply stated: Structure refers to the way information is presented to the user while Content refers to the information that is being presented.
Think of structure as being the skeleton and organs of the website. It includes everything from the layout of a website (skeletal frame), right down to what size font the copyright notice should be (organs with functions). Content is the reason why the user is visiting your website in the first place. Whether it be visual or text, it is the information being presented to the user. Use this page as an example. The structure encompasses the layout, what colors and fonts are used, and layout-related images like the company logo. These elements are consistent from page to page and rarely changes. The content is this blog post you are reading the title, the article, the comments, etc. This content changes on every page.
There are several advantages to separating structure and content. First, it makes it easier to maintain a website as content is added, removed or modified. This is especially true if the website is using a content management system. Second, it greatly reduces file sizes because less markup is being used, thus making page load times faster. And third, it makes for better SEO which will greatly help your search engine rankings.
Unfortunately, not everyone using the Internet is using the latest and greatest browsers available, such as Firefox or Safari. Having to cater to older, non-standard-compliant browsers (read: Internet Explorer 6) can make the development phase a little more of a challenge. Using strict XHTML drastically helps protect programmers from using invalid coding techniques, such as improperly or not closing HTML elements. Some browser rendering engines are more lenient than others, but using valid HTML will ensure that a web page will look similar across all browsers. Some other requirements of strict XHTML are no capital letters may be used in elements, and no depreciated elements or attributes may be used as well.
These days, accessibility is becoming more and more important just look at the lawsuit that Target just settled. Strict XHTML helps enforce accessibility guidelines. An example is using the alt attribute for image elements. The alt attribute contains provides alternative text describing the image. This is important for two reasons: 1) If the url to the image is broken, it will display the alt text in its place and 2) If you have a blind user using JAWS or some other screen reader to navigate the website, it will present the alt text audibly or through a braille display.
The examples given above really only scratch the surface of this topic. There are a lot of resources available regarding the use of strict XHTML. I’ve put a short list together of articles that will help shed more light on the advantage to using strict XHTML and XHTML in general.
- XHTML in Laymans Terms Nathan Smith
- Transitional Versus Strict Markup Roger Johansson
- HTML Versus XHTML WaSP
- Better Living Through XHTML Jeffrey Zeldman
- Using XHTML/CSS for an Effective SEO Campaign Brandon Olejniczak
Article authored by Dan Marino