What are the Three Layers of Web Development?

What are the Three Layers of Web Development?

Content or Structure

The content or structure layer is what your readers are coming to get when they come to your Web page. Content can consist of text or images and includes the pointers that your readers need to navigate around your Web site. In Web development,
XHTML makes up the content layer and it also structures the Web document.
Style or Presentation

The style or presentation layer is how the document will look to your readers. This layer is defined by the
CSS or styles that indicate how your document should be displayed and on what media types.
Behavior

The behavior layer is the layer of a Web page that does something. If you use Ajax or DHTML, it is the JavaScript that makes the page do something. If you have a PHP or CGI back-end, it is the PHP or CGI scripts that take action when your reader clicks something.
For most Web pages, the first level of behavior is the JavaScript interactions on the page.

Why Should You Separate the Layers?

When you're creating a Web page, it is important to keep the layers separate. As I pointed out in
an earlier article, using external style sheets is the best way to separate your content from your design. And the same is true for using external JavaScript files.

Some of the benefits of separating the layers are:

Shared resources

When you write an external CSS file or JavaScript file, you can use that file by any page on your Web site. There is no duplication of effort, and whenever the file changes, it changes for every page that uses it without you making more than one change.
Faster downloads

Once the script or stylesheet has been downloaded by your customer the first time, it is cached. Then every other page that is downloaded loads more quickly in the browser window.
Multi-person teams

If you have more than one person working on a Web site at once, you can divide up the workload without worrying about permissions or content management. You can also hire people who are style/design experts to work on the CSS while your scripters work on the
JavaScript, and your writers work in the content files.
Accessibility

External style sheets and script files are more accessible to more browsers, because they can be ignored more easily, and because they provide more options. For example, you can set up a style sheet that is displayed only for screen readers or a script library
that's only used by people on cell phones.
Backwards compatibility

When you have a site that is designed with the development layers, it will be more backwards compatible because browsers that can't use technology like CSS and JavaScript can still view the HTML. Your Web site can then be prorgressively enhanced with features
as browsers support them.

XHTML - the Content Layer

The content layer is where you store all the content that your customers want to read or look at. This includes text and images as well as multimedia.

It's important that your content layer be as standards-compliant as you can make it, whether it's HTML or XHTML. That way, it will merge more easily with your style and behavior layers. I strongly recommend using valid XHTML (either transitional or strict)
because that is the most up-to-date content layer technology and will set your site up to be usable well into the future.

When you use valid XHTML that provides clearer hooks into the content for your styles and behaviors to grab onto. For example, in HTML, the paragraph tag (<p>) doesn't require an end tag. Most of the time this isn't a problem, but some browsers may interpret
the end of a paragraph in a different location than you expect. And when your styles are applied, your page will look wrong. Just using the end paragraph tag (</p>) tells the browser exactly where you expect the paragraph and any associated styles to end.

It's also important to make sure that every aspect of your site is represented in the content layer. That way, your customers who have JavaScript turned off or can't view CSS will still have access to the entire site, if not all the functionality.

CSS - the Styles Layer

Store all your styles for your Web site in an external style sheet. This defines the way the pages should look, and you can have separate style sheets for various media types.

Store your CSS in an
external style sheet so that you can get the benefits of the style layer across the site.

JavaScript - the Behavior Layer

JavaScript is the most commonly used language for writing the behavior layer, but as I mentioned before, CGI and PHP can also generate Web page behaviors. However, when most developers refer to the behavior layer, they mean that layer that is activated directly
in the Web browser - so JavaScript is nearly always the language of choice. You use this layer to interact directly with the
DOM or Document Object Model. Writing valid XHTML in the content layer is also important for DOM interactions in the behavior layer.

When you build in the behavior layer, you should use external script files just like with CSS. You get all the same advantages of using an external style sheet.

The Three Layers

XHTML
CSS
JavaScript