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