Do or Div!

One of the web projects I’m working on uses a tabbed interface element which saves a lot of screen real estate. HTML-wise this is done by simply hiding all but one in a stack of divs depending on which “tab” you click. On the source side, you end up with a long file of nested divs. Since this project is a web app, the interface is composed of a number of other components like screen, titlebar, navigation, content, footer, etc. all created with specially styled and id’d divs. Much like working with the heavily nested tables in the old days, if you miss closing a div tag, the layout falls apart and tracking done the offending open div can be tricky.

Of course you could use an html comment to denote which div you’re closing, but I came up with something easier, very clear, and it appears to validate in Tidy with no ill effects in FireFox 1.5. I’m sure some “I only write valid XHTML” purists will correct me, but since I work for a captive audience behind the corporate firewall, I’m going to use it for now. The solution? Repeat the id attribute in the closing div tag so you know later which div it is actually closing.

For example….

<div id=”first”>
  …some content…
  …some more divs…
  …some content…
</div id=”first”>

Guess you could jam attributes in any closing tag if you wanted to, like tables if you’re still nesting them.