Structure Patterns in HTML

petey · Apr 21, 2004

When I try to design sites with valid XHTML/CSS I often mull over this as I'm trying to find the best way to arrange my HTML tags. For lack of a better term I call it HTML structure patterns, borrowing a concept from the software world's idea of design patterns, where successful ways of doing things are documented, published and repeated across the community.

A definition of an HTML structure pattern would be: 'A way of arranging HTML elements to allow the clearest abstract representation of the content while maximizing accessibility, repurposability, and styleability with CSS.' I'd also clarify that this goes beyond simple validation and gets into how markup elements are combined and arranged. I'd be curious to see what kind of structure patterns are used by folks here on Tek Tips, and why those patterns have been successful for them. They can be as specific or as general as you want, but shouldn't be no-brainers or universally known. Hopefully we can all learn something. I'll start by listing a couple I'm familiar with:

BODY TAG CLASSES AND IDS:

Code:

<body class="twosects article" id="fishingtutorial">

By doing this I have fine-grained control over the page style and can selectively apply layout styles at the page level rather than the global level, plus the markup is natural and readable. For example the class "twosects" might trigger a multi-column layout in my CSS. Perhaps I want links on pages with class "article" to not have underlines for better readability. Perhaps I want a fish-scale background on only the fishing tutorial page:

Code:

body.twosects div.primarycontent { width: 70%; }
body.twosects div.secondarycontent { width: 30%; position: absolute; top: 80px; right: 0px; }
body.article a { text-decoration: none; }
body#fishingtutorial { background-image: url(scales.jpg); }

An example is

http://gcc-online.org/

SUBELEMENTS IN LINK TAGS:

Code:

<a href="...">Stock Quotes <span class="description">Today's hottest picks according to Bill</span></a>

From an accessibility and SEO point of view, having more descriptive text in a link is a good thing. From a design point of view it can take up too much space. By using subelements and some creative CSS you can get the best of both worlds, plus some nice effects like a roll-over description field. See this example:

http://drpeterjones.com/gchdemo/

Code:

a:link span.description { display: none; }
a:hover span.description { display: block; position: absolute; left: 0px; top: 0px; }

Looking forward to seeing other ideas from designers on Tek Tips!

http://www.drpeterjones.com/

News and views of some obscure guy

tviman · Apr 22, 2004

What you've described is the stuff that we do on a daily basis. IMHO, HTML and it's permutations (xhtml, dhtml, etc) have become nothing more than the "fence" that web pages are contained in. CSS has taken the forefront of structuring the content while JAVASCRIPT, ASP, PHP, and PERL (to name a few) are the tools used to manipulate dynamic content.

By necessity, the various browsers are dictating the actual placement of page tags and we, as developers, are forced to work within those confines. In other words, actual tag placement and tag grouping is not something that has evolved, but rather has been dictated by the lack of uniform HTML standards implementation among the various browsers. Case in point - of the five major browsers (IE, NS, Mozilla, Opera, and Firebird) only the most basic static web page will display uniformly among these. The same applies to the implementation of CSS - none of these browsers uniformily supports style sheets. In fact, I don't think I would be going too far in saying that a given CSS property is supported by ALL of these borwsers, except for the most basic ones, of course. (And those that are supported are not implemented the same way!)

Maybe you should be posing this question to the browser manufacturers?

There's always a better way. The fun is trying to find it!

petey · Apr 22, 2004

However that may be, these techniques were helpful to me in my effort to develop standards-compliant web pages. I thought I'd post some of them and hopefully learn some new ones from other posters.

Here's another technique I've often used: div tags with ID attributes whose names are content-centric rather than layout-centric. For example these two pieces of code:

Code:

<div id="topbar">...</div>
<div id="leftcolumn">...</div>
<div id="centercolumn">...</div>
<div id="rightcolumn">...</div>
<div id="bottombar">...</div>

Code:

<div id="logo">...</div>
<div id="navigation">...</div>
<div id="primarycontent">...</div>
<div id="secondarycontent">...</div>
<div id="copyright">...</div>

Either option allows me to redesign with CSS only, but with the second method my markup stays relevant and my CSS stays readable, since it makes more sense to say:

Code:

div#secondarycontent { float:left; }

than to say:

Code:

div#rightcolumn { float:left; }

http://www.drpeterjones.com/

News and views of some obscure guy

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Structure Patterns in HTML

petey

Programmer

tviman

Programmer

petey

Programmer

Similar threads

Part and Inventory Search

Sponsor