One div[id] per Module
Published Sunday, November 25, 2007 in (X)HTML, Semantics, Web Standards
A way I structure my markup more and more is one div with a semantic id-name around each module on the site. In almost all cases that's all you need to use divs and ids for, but you still see plenty of sites out there that suffer from class-and-id:itus.
With a (unique, obviously) id in a containing div around every module, styling it from CSS or scripting it or any of its children using Javascript becomes a breeze. Especially if you use a JS-library that supports CSS-selectors, like jQuery.
Something you see often is HTML like this:
<h2 id="recent-news-heading">Recent News</h2>
<ul id="recent-news-list">
<li><a href="#">Bla di bla</a></li>
<li><a href="#">Bla di bla</a></li>
</ul>
If you wrap those elements in a div#recent-news, you'll be able to access them from both CSS and JS through simple selectors (#recent-news h2, #recent-news ul). Granted it is a tad slower (2 function-calls rather than 1) to fetch them with JS than if they have ids, but I prefer to keep my HTML clean and completely separated from the other two layers.
<div id="recent-news">
<h2>Recent News</h2>
<ul>
<li><a href="#">Bla di bla</a></li>
<li><a href="#">Bla di bla</a></li>
</ul>
</div>
Besides, it makes your code look nicely structured in firebug if all you use ids and divs for are wrapping your modules :) Hopefully soon we'll be able to move all "grid-divs" (like #content, #sub-content, #etc) from out HTML to our CSS using the advanced layout module, that will be sooo sweet.
