Skip to main content

Structured HTML and CSS-based Web site templates

Bob Easton, Andrew LaHart, Marie Shafi, Jefferson Florentino, IBM


Why create a CSS-based layout template?

Over time, Web design, Web standards, and best practices have become increasingly important. Prior to the regular use of Cascading Style Sheets (CSS), proper HTML structure was often sacrificed in favor of improved visual layout. Basic HTML elements, such as < font > tags and < table > layouts, were frequently overused and structured incorrectly, while elements with specific functions were underused because they lacked visual appeal. A CSS-based layout template provides a way to have the design of the template dependent on the CSS file, rather than the HTML file, and allows the developer to avoid the use of HTML elements that are strictly for visual appearance.

The purpose of this article is to inform web developers of the advantages to updating intranet and Internet code to a CSS-based layout, which separates the content from the presentation of the site. CSS allows for easier design updates, significant cost savings to the site owner, and improved accessibility features.

Separating content from presentation

Many benefits accrue when we separate content from presentation. CSS provides a means for us to move presentation attributes out of HTML code, and coincidentally, improve the HTML?s structure.

HTML was originally intended to describe structure through headings (h1, h2, h6), lists (ul, ol, dl), text blocks (p, blockquote, cite), and form controls. Unfortunately, HTML included elements that were strictly presentational, such as bold, italic, font, and others. These elements should have been kept separate from the beginning, but styling markup wasn't available until several releases of HTML had been released.

Until CSS came along, designers achieved the look they wanted by including presentation markup directly in the HTML. Instead of using headings, designers used spans to style fonts in the size and color they wanted. Designers employed the "bed and breakfast" technique, riddling their code with bold (bed) and break (breakfast) tags. They extended the <table> tag to provide layout of positioning, straying from its appropriate use?holding tabular data.

The results of including presentation markup in the HTML were visually appealing pages with ugly underlying code that carried all sorts of costs and constraints. The code was hard to update when site designs changed. Additionally, the entire presentation markup added bloat, which increased page load times or transit cost, or sometimes both.

Structured HTML

Setting CSS aside for a moment, let's discuss "structured HTML." Structured HTML is HTML that is well-formed and uses elements with semantic value.

Some steps you can take to ensure you are using structured HTML are:

  1. Using heading elements (<h1> through <h6>) to denote a hierarchy of headings.
  2. Putting lists of things, especially menus, inside proper list forms.
  3. Ensuring that all of the text is inside an appropriate HTML element, such as a paragraph.
  4. Creating true data tables by adding the semantic elements that define structure, such as summaries and table heads.
  5. Removing every piece of presentational markup from your HTML code. Note: <strong> and <em> are the correct semantic elements that replace <bold> and <italic>.
  6. Placing all the presentation details in external CSS files.

Benefits of structured HTML

The benefits of structured HTML are immediate and impressive. Structured HTML:

  • Improves accessibility. Every screen reader has shortcuts for navigating headings, lists, and form elements. A person using the JAWS screen reader by Freedom Scientific, Inc. can quickly learn the structure of a well-defined document by requesting a list of all headings on the page. Likewise, the JAWS listener can move quickly from heading to heading by simply pressing the H key. Bingo?huge improvement. Similar navigation aids exists for lists and forms controls.
  • Improves search engine results. Every search engine gives extra weight to headings. Creating your documents with a hierarchy of headings and using clear, concise language will help to improve search results. Good headings, correct markup and text that stays "on topic" are all items from which search engines derive meaning. By using these constructs, the page you create will contain a higher percentage of text that is relevant to the topic. Given that, search engines are able to crawl through the relevant content in the Web pages more easily and quickly. This also allows the search engine to make a more educated guess about the content of each page. Therefore, Web pages that use structured layout will appear higher in the search ranking.
  • Is device-independent. While we currently view most HTML through Web browsers on personal computers, more and more we are finding HTML documents being sent to other clients and devices. Keeping the HTML clean of device dependent presentation markup allows the same code to be used in more places, such as handheld computers, kiosks, and Web browsers.
  • Performs better. When developers remove unnecessary code, referred to as bloat, the documents travel through the networks faster and load quicker. The presentation markup that was moved to CSS is cached, loaded once, and reused many times.

Accessibility benefits of CSS

Moving all presentation styles to CSS brings similar benefits for accessibility. CSS improves accessibility in five primary ways:

  1. CSS allows us to control layout. We can use CSS to control layout and allow the main content of a page to appear higher in the HTML source sequence. This makes it faster and easier to get to the content with a screen reader. Coincidentally, it makes it faster and easier for a search engine to get to the content, potentially giving it higher weight. After all, we can think of a search engine as yet another blind visitor. Most everything we do to improve accessibility for the blind user also helps search engine results.
  2. CSS allows us to use hidden elements. With CSS, we are able to hide elements from visual display while keeping them available for those who use screen readers or other assistive technology. The most common element treated this way is a skip link. The very first link, or links, on the page are for skipping to the main content and skipping to the main navigation. Like heading shortcuts described above, these help people move quickly to the material they want. Other elements that we might hide from visual display are "landmark headings" that are placed above certain areas to tell people what follows. Typically, these are h2 or h3 elements that mark the start of navigation blocks.
  3. CSS can, if we want, offer alternative schemes for viewing content. For example, we could offer alternate style sheets with high contrast color combinations, or layouts that are more accommodating to those who need huge increases in font size.
  4. CSS enables the device independence mentioned in our discussion of structured HTML. Just as we might offer alternate style sheets to change appearance, we can offer style sheets for different devices. This is currently an embryonic area. The capability has been part of CSS from the beginning, but devices such as phones and Personal Digital Assistants (PDAs) have not yet widely embraced the concept. A few are starting to use device-specific style sheets, but not many. When they do, we will be able to accommodate them.
  5. CSS enables better performance. This is the other side of the performance results cited with structured HTML. CSS files are cached in browsers, loaded once per visit or maybe less often. The presentation characteristics of every single heading on every page of a site, or every single list item on every page of a site, are styled in a cached CSS file instead of being coded hundreds or thousands of times over within the HTML. In addition, sites that modernize using the principles of separating content from presentation usually see HTML file sizes shrink by 30?40 percent. As an example, one of the sections of the ibm.com Web site that has moved to a CSS-based template saw the average file size for each Web page reduced by an average of 6KB.

Additional benefits of CSS

CSS makes maintenance easier. While we started by lamenting the ways designers tortured HTML to get the look they wanted, we can wrap up by mentioning two huge benefits for designers who become proficient with structured HTML and CSS.

First, they can achieve a level of consistency across a site that was incredibly expensive to achieve when presentation markup had to be done "just right" in every single document on the site. Stop and think about the implications of this for a moment.

Let the magnitude of editing an entire company-wide Web site sink in. Second, consider the next redesign. CSS offers the promise of executing a significant part of the inevitable redesign by simply replacing central CSS files. Today, it's blue. Tomorrow, it's a different blue!

Summary

The combination of structured HTML and CSS bring benefits in accessibility, performance, and search engine effectiveness. CSS-based templates can enable Webmasters to take advantage of these benefits, and help them to ensure their Web sites conform to industry and accessibility best practices.