A standard HTML structure for CSS
So I've generated quite a bit of HTML using CSS styles, and I decided it's time to standardise my document structure.
I noticed that quite a few big-name designers create something called a "container" division in their HTML. This is usually written as <div id="container"> in HTML.
Those designers do not put any content directly inside this container division, but instead they divide it up into subordinate divisions. Usually, those subordinate divisions are the "content" division and the "sidebar" division.
In human terms, I am talking about those web pages that are very popular today on blogs and news sites: the content area and the favorite links bar on the side. Technically, for some reason, CSS forces you to create an empty "container" and then the subordinate "contents" and "sidebar" areas inside it, when you want to create a page like this. Ok: I would have thought that the standard HTML element "body" would suffice as a "container", but no, it does not. At some point, I came to accept that.
I began making many pages in this manner. Using CSS for styling has a certain advantage: it allows you to easily tweak the style of your HTML without changing the HTML itself (if I sound like I've been rethawed from 1995, forgive me). But there's another advantage: you can use a single CSS file to style any number of pages. And now I get to my point: if you want that "any number" to be significant, you need to use the same structure on all your pages. So I thought: since everyone is building the same kind of page, with their big content containing container, perhaps there is some kind of standard, maybe a naming scheme, that I could use in my pages? Perhaps if I followed this standard, I could not just style many pages with one CSS file, but I, and all pagemakers, could easily swap CSS files and know that they would smoothly apply to all our pages.
I searched, and found a site that talked about it here.
I like the sound of that article, as it generalises the standard title-content-sidebar design, but it misses at least one feature that pops up very often, and that is that the "sidebar" area is not really navigation, but usually just a bunch of semi-related information. So I decided to call that a "periphery". It also misses the fact that CSS always forces you to wrap all your content (including your periphery) in that big dumb "container" division, even though the very site uses that very container.
And I hate that dumb name, "container". So I'm calling it "document", and here's the structure I'm settling on:
<body>
<div id="document">
<div id="header" />
<div id="content" />
<div id="periphery" />
<div id="footer" />
</div> <!-- ends "document" -->
<body>
There. Now, I'm making all my pages this way. The standard benefit is that I'll be able to build different CSS files, for fun, that will all apply to my pages. But I really started reflecting about this because of something else: I had built three other sites, and I wanted now to use the same CSS file on all of them. No can do. Why? Because their HTML followed a different structure. One was a photo album, so it naturally had divisions called "thumbnail" and "photo". So the real benefit of standardising at least my own HTML structure, is that now I can bring my branding to multiple sites, all from the same CSS file. I can keep "thumbnail" and "photo", as long as they are inside "content", which is inside "document". My wrapper stays familiar, and I only write specialised CSS files for thumbnails and photos on the album site. Same branding everywhere, and instant application of changes "worldwide". Good stuff. And if I'm writing this, it's because I think that you, or others who makes lots of HTML, will benefit from going through this same kind of reflection. Make sure you read that link to Malarkey before getting down to business.
