/pl.gif){kind=small}
Technogrette
|
Vladimir Tokmakov
HTML templates 5 August 2006 |
|
It’s more and more often that I come across websites with HTML content I would call commonplace. For example, seeing <div class="h2"></div> I find no good reasons it should be used. What’s wrong with <h2></h2>?
It is true, of course, that modern CSS allows you to employ just a couple of tags. We could even hold a contest to find the most curtailed HTML—I wound up with 10 tags to enable full functionality. So, you do require them anyhow. And there are specifications to refer to. If you use tags intelligently, it will at least ensure that older browsers and other appliances lacking CSS capabilities display information properly. Few websites feature palmtop versions or pages for use by disabled people.
And what’s in it for the developers? CSS rules are most likely to become more compact. And it will be easier to access elements through DOM.
I could, perhaps, go on about more sophisticated search engines, but that’s would inspire another article. So, lets go back to tags.
I’ve tried using different tags in all sorts of ways and developed constant combinations that can serve universal tools for making websites, which allows keeping quality high and time costs low.
Here are some of them. Lets start with tables. There are two types: layout tables and data tables.
Layout tablesUse them to visually organize the information.
|
|
|
|
Neither of the two examples has cellpadding or cellspacing attributes; they can be specified as CSS properties (with CSS disabled the values are negligible). But if you still want to set them explicitly, you may use cellpadding, however avoid non-zero cellspacing as it can’t be altered through CSS.
Nevertheless, align, valign, width and height attributes (the latter two for layout tables only) should be kept, or else the no CSS-based layout will look much different from the way intended.
Layout table and all its elements should be placed in a separate class. This allows making versions for other output devices (palmtop, printer). It is necessary to create a separate class for table elements to prevent the CSS code from being overcomplex.
For data tables you can just declare a proper class. Border attribute is used to account for the element’s data type for users of no CSS-based versions.
And what about W3C standards? Most of these attributes are deprecated. It does not mean, though, that they are incorrect. And I don’t see why not use them intelligently, especially if they are defined explicitly using CSS (and may have different values).
NavigationNavigation in itself is a list of links. This naturally calls for <ul></ul>
|
|
This HTML code is in most cases sufficient for creating any CSS rules you require.
Replacing the current link with <b></b> allows using it for design purposes or to make it stand out from the list when CSS is disabled.
Lists of news or articles are lists yet again, but they are a bit peculiar—some items have a thing in common, notably the date. Here is the code I suggest:
|
|
You can add classes (title, summary, etc.) if necessary.
My only recommendation here is to remember about proper ways to deal with text in HTML. Take advantage of them. Using <p> element instead of <layer> saves you at least 4 symbols ;)
To sum it up, here are main stages of creating a layout:
| 1. | Disregard design, organize information logically (heading, navigation, content, footer). |
| 2. | Give the layout proper appearance. |
| 3. | Create class and id attributes, write a CSS script. |
| 4. | Add HTML elements to finish design. |
| 5. | Complete the CSS part. |
| 6. | Make palmtop and print versions. |
The result is similar to the code below (its variants can be found in all the projects I was involved in):
|
|
Using tables:
|
|
