Quick Tip #1: Don't use a containing div.
I'm always looking for ways to simplify my HTML, especially as I move ever closer to HTML5. So today's tip will, I hope, prod you to stop using extra markup you really don't need.
Body of Lies
The most common over use of the div tag is to surround page content in order to limit the page width. You will find these container layers are named things like #content, #container, #page, etc. I submit to you this is a duplication of effort since we can do the same thing with the body.
body { width: 960px; margin: 0 auto; } works just as well on the body tag as it does an extra div. After all, body is already containing the, well, the body of our document.
Don't Fence in Your Lists
Did you know the unordered and ordered lists are in fact block elements? That's right, their on the same level as a div, so don't surround them in a div then you can define the list in the same way. Consider this code:
.nav {width:100%;background:#ff0;}
.nav ul {margin:0;list-style:none;}
.nav ul li {float:left;}
<div class="header">
<div class="nav">
<ul>
<li>Home</li>
</ul>
</div>
</div>
It's not so bad right? Sure it's functional, but is it efficient use of space? I submit you can accomplish the same thing like this:
.header > ul {width:100%;background:#ff0;margin:0;list-style:none;}
.header > ul li {float:left;}
<div class="header">
<ul>
<li>Home</li>
</ul>
</div>
So simplify your work life by thinking about how to use HTML elements to their full potential. Your thoughts and ideas are greatly appreciated.
Comments [0]