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.
Why Should You Separate the Layers?
Some of the benefits of separating the layers are:
- Shared resources
- 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
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
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.
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.
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.