The Separation of Layers within an HTML document is a somewhat recent convention within the Web design community. It is centered on standards for the ultimate purposes, shared with all other best practices, of cross-browser compatibility and a concept of the ideal functionality for the Web. The focus is more on the latter for this specific convention, but cross-browser compatibility augments how to achieve that goal, to the point of making exceptions where necessary.
The specific idea behind it is the separation of concerns via modular programming, i.e., the maximal independence of each piece of software, or module, from each other piece. A module, in any sub-field of programming, typically follows the Unix philosophy to "do one thing well" and is therefore as small as it can be while still doing its job well. ("Programming" here is used loosely, although the use of "software" for HTML and CSS is technically accurate.)
The modules in this case are HTML (content), CSS (style), and JavaScript (behavior). When a server-side scripting language such as PHP is available, content is often further separated into structure (where content is placed in a document) and semantics (the meaning of bits of content on a minute scale).
Content[]
Structure[]
When the concerns for a page's structure and the content's semantics are separated, they are commonly divided at the border between block-level and inline elements. While the template provided by the server may contain inline elements, they are usually not within the area designated for the separated content. Additionally, most block-level elements can validly contain all the others, so the content may add to the structure.
In the case of this wiki (a sophisticated content-management system), content is stored in special files as wikitext which the server periodically translates into HTML. This HTML is then placed into the skin specified in the user's preferences when the content is requested. Menus and other constant page elements need not be stored separate from the rest of the skin, and the appropriate CSS and JavaScript are applied when the page reaches the browser.
Semantics[]
Semantics are specified with HTML elements such as tables, forms, lists, headings, paragraphs, and generally any that is inline. They affect how a typical Web browser or other program, such as a screen reader or Web crawler, will "understand" the content. Some are rendered in typical browsers in a similar manner as those used for formatting, although their purpose is significantly more specific.
Wikis such as this one provide syntax which is primarily geared toward such markup, although the div element is provided for structural purposes (perhaps the only such exception). Some unconventional, even non-standard, tags and attributes are allowed but the same best practices apply to wiki authoring as to Web design.
Style[]
Style affects the color, size, decoration, and, with some constraints applied by the HTML structure, the placement of elements. Handles for CSS selectors, such as class and id attributes, are typically the only sign within the HTML that CSS is being used, allowing stylesheets to be interchanged seamlessly in true modular fashion.
This and other MediaWiki wikis are a great example of this, even going to the extent of allowing the user to specify CSS styles in addition to those supplied by the wiki's staff and the wiki software itself.
