Three Layers

Keeping different kinds of code as separate as possible is a good idea in any kind
of programming. It makes it easier to reuse portions of that code in future projects,
it reduces the amount of duplicate code you end up writing, and it makes it easier
to find and fix problems months and years later.

When it comes to the Web, there’s one more reason to keep your code separate: it
lets you cater for the many different ways in which people access web pages.
Depending on your audience, the majority of your visitors may use well-appointed
desktop browsers with cutting-edge CSS and JavaScript support, but many might
be subject to corporate IT policies that force them to use older browsers, or to browse
with certain features (like JavaScript) disabled.
Visually impaired users often browse using screen reader or screen magnifier software,
and for these users your slick visual design can be more of a hindrance than
a help.
Some users won’t even visit your site, preferring to read content feeds in RSS or
similar formats if you offer them. When it comes time to build these feeds, you’ll
want to be able to send your HTML content to these users without any JavaScript
or CSS junk.
The key to accommodating the broadest possible range of visitors to your site is to
think of the Web in terms of three layers, which conveniently correspond to the
three kinds of code I mentioned earlier. These layers are illustrated in Figure 1.2
When building a site, we work through these layers from the bottom up:

1. We start by producing the content in HTML format. This is the base layer, which
any visitor using any kind of browser should be able to view.
2. With that done, we can focus on making the site look better, by adding a layer
of presentation information using CSS. The site will now look good to users able
to display CSS styles.
3. Lastly, we can use JavaScript to introduce an added layer of interactivity and
dynamic behavior, which will make the site easier to use in browsers equipped
with JavaScript.

If we keep the HTML, CSS, and JavaScript code separate, we’ll find it much easier
to make sure that the content layer remains readable in browsing environments
where the presentation and/or behavior layers are unable to operate. This “start at
the bottom” approach to web design is known in the trade as progressive enhancement.
Let’s look at each of these layers in isolation to see how we can best maintain this
separation of code.