jasonspage.net / blog / nodiv

  1. link
  2. link
  3. link
  4. link
More No Div
Div Mania
DIVless
et (tabelfrit) design uden brug af div- og span-elementer
HTML uden div’er
No <div>, <span>, #id, or .class
Positioneren zonder divjes
Web Ring
Beukeys Webdesign
Maurtopia

No <div>, <span>, #id, or .class

That's right. No div span id or class was used in the XHTML markup of this page. If you have stylesheets enabled in your browser, then you should see a familiar looking blog-type of page setup, with a green header and navigation links, a short left column with some more links, a content area (which you are currently reading), and a green footer at the bottom of this document.

Not one div?

That is correct. I composed this page as a test to remove both <div> and <span> tags from the markup, and still have the ability to style the document using basic CSS. And why shouldn't it be? Every major element I'm using in the HTML to create this structure (header, sidebar, content, footer) is block-level by default. So why not take advantage of this natural behavior, sans unnecessary <div> tags? To make things even more challenging, I also decided for this exercise to remove all uses of both #id and .class from either the markup or the style sheets. This is merely overkill my friends, and not at all necessary to belong to the No Div Web Ring. You just can't use <div>.

The following is the breakdown...

#header (<h1> and an <ol>)

The green header of this document was constructed with two of your most basic block-level elements: a heading-level tag (<h1>) and an ordered list (<ol>). The <h1> tag is simply modified a little in this case with a link to create the hyperlinked text: jasonspage.net, blog, and nodiv.

The second step of creating this header area of the site exploits the behavior of the ordered list. Functioning as a navigational scheme, using a listing system that degrades to numbers is a far more semantic way of offering a user choices. If you don't believe this, just call any big company you can think of and listen to their menu of options: they are all numbered.

This is probably a good time to suggest using the universal selector to erase the default paddings and margins that browsers give to certain html elements, like heading-level tags and ordered lists. By using this line of code in the css:

* {margin:0; padding:0}

we are telling browsers to erase all margins and paddings to ZERO. This gives us more control over our layout as we can add padding or margins back to any element we choose. Sound interesting? Read more about this method.

After crunching down the margins and paddings to ZERO for both the <h1> and the <ol>, adding {background-color: green} to both, and {border-bottom} to the <ol>, VOILA! A very neat and tidy header area: clean, valid, accessible, and totally stripped of <div>, <span>, #id, and .class.

dl {float: left}

The left column was a cinch. Definition lists (<dl>) make for a great sidebar, especially when that sidebar will include links. The overall behavior of the <dl> makes it great for styling. Using the <dt> of the list as a link heading with the relavent links below it wrapped in <dd> tags begins to show you how you are really offered a multitude of styling options using <dl>. Heck, Dan Cederholm wrote a whole article about it over at ALA.

Besides these benefits, using <dl> in this sidebar instance simply allows for the creation of completely different set of style rules from the above-mentioned <ol>. In other words, we don't have to use an ID or class. If you want to use an <ol> or an <ul> here, go ahead. Just make sure to give it a unique identifier. Like id="sidebar".

Since this section will be floated, it will appear in the markup immediately after the above-designed header, and must have a defined width. Since all margins and padding are automatically reset to ZERO for the <dl>, <dt>, and the <dd>, we only need to set the overall <dl> width. I chose 200px for this example.

#content

This content area is just as easy as the above-mentioned "floated" definition list. This area contains nothing more than <h2> and <p> tags. I used a similar treatment as above for both margins and paddings, and applied a {border-left} to both as well. Because both of these elements are pretty much a mirror of one another, I was able to change the {background-color} to light gray on both without having any breaks or inconsistencies.

#footer

As luck would have it, I also typically use <ul> for my footers, primarily because I normally employ a list of links here, like creative commons and validator stuff. Again, if you don't use the global reset method (* padding:0; margin:0), then crunch margins and paddings to ZERO for the h2 and p, or whatever elements you may be using. Note: Margin needs to be set to ZERO or else you will not completely clear the float in IE6/Win.

The only thing left is to change the {background-color} if you so desire, and declare for the <ul> to {clear:both}. Pretty basic.

.extras

The entire layout was centered by centering the <body>, setting its margins to {margin:0 auto}, and setting the width to 800px. And as TG reminded me, always always always remember to specify a background-color for your body. In this example, I simply chose white.

Although it is understood that this design is not the bastion of remarkability for its overall visual impact, the layout is noteworthy by the very nature of its substantial reduction of code. The extreme cases of both classitis and divitis have been documented. This test, though extreme itself, shows that we can mitigate some of our steps in design much like we do with our oft-used hacks.

Using a superb method of defining text size, this page resizes so very nicely, especially in Firefox.

/* compromises */

I have tested this method on a few different sites, and have found that sometimes using a <div> wrapper is absolutely necessary. In the case of using forms, nothing could be further from the truth. Save yourself the headaches and forego this method with extensive form use.

Another issue arises with the use of the floated definition list. Unless an extraneous <div> is used, then the {background-color} must always be the same as its parent element - in this case, the same as the <body>, or white. Try as you might, you at least need something as block-level and expansive as a <div> tag to be able to completely color a similar float, even when using the faux columns method.

Because all of the padding and margin has to be tweaked to realize this layout, some hacks may be necessary for visual consistency. If you scroll all the way down you will notice how the text ends and the footer immediately begins. In this example, I did not use any classing. Here, you would probably want to create one to add some additional padding between sections.

Web Ring?

If you came here from my blog, you will have clicked a button that says "No Div". The whole 'Web Ring' thing is kind of a joke. I guess I am always intrigued by the various buttons I see on so many sites, some that I recognize, but very many that I have never heard of. In fact, I came across a site with a button that said "I hate these buttons"! How great! So I follow suit here, but really more to use this as a link to this test I've done.

Feel free to use/take/edit the "No Div" button. It is located here. You can even use it to link back to this document if you like. Just make sure you copy and paste the image into your own server. Do not link to the button from my site.

I am not expecting many members to this club, but if you can honestly claim it, then there is absolutely nothing wrong with showing your pride and admitting to the world that you too are a proud member of the "No Div Web Ring!"

**Update: 5/9/05**

This method is currently being used on my actual site as well. Due to increased traffic I am receiving from the CSS Reboot, and because I have been considering upgrading to Wordpress 1.5, I will be installing WP 1.5 here so that people can leave comments directly on this page about the No Div method. You can now leave comments!

CSS

The following CSS was used to build this document:

h1, ol, ul, dl a:hover {background-color:green}
ol a:hover, p a:hover {background-color:yellow}
h2, p, pre, address, hr {background-color:#f5f5f5}
html body {border:1px solid #000}
ul a:hover, ol {border-bottom:1px solid #000}
p a {border-bottom:1px solid blue}
h2, p, pre, address {border-left:1px solid #000}
ul {border-top:1px solid #000}
ul {clear:both}
a {color:blue}
h2, dt, code, em, ol a:hover, pre, address, label {color:green}
h1 a, ol a, ul a, dl a:hover {color:yellow}
li {display:inline}
dl {float:left}
a, dl, code, em, pre, address, label {font-family:verdana,sans-serif}
h2, p {font-family:georgia,serif}
body {font-size:62.5%}
h1 {font-size:3em}
h2, dl {font-size:2em}
p, li, pre {font-size:1.2em}
code, em, address, label {font-size:.95em}
dt {font-size:.6em}
dd {font-size:.5em}
em {font-style:normal}
dt {font-weight:bold}
p {line-height:200%}
ol, ul {list-style:none}
h1, h2, ol, ul, p, dl, dd, pre, address, hr, form {margin:0}
html body {margin:10px auto}
h2, p, pre, address, hr {margin-left:200px}
html body {padding:0} /* necessary for Opera */
h1, h2, p, ol, ul, dl, dt, li, dd, pre, address {padding:.5em 0}
h1, h2, p, ol, dl, pre, address {padding-left:25px}
p, li {padding-right:25px}
h2, dt {padding-top:2em}
html body, ul {text-align:center}
h1, h2, p, ol, dl, pre, address {text-align:left}
a {text-decoration:none}
dl {width:200px}
html body {width:800px}

XHTML

Removing the description of how this document was built (what you have just read), link addresses, and titles, here is the <div>-less, <span>-less, #id-less, and .class-less markup that renders this page:

<html>
<body>

<h1 title=""><a href="" title="">jasonspage.net</a></h1>

<ol>
  <li><a title="" href="" >blog</a></li>
  <li><a title="" href="" >link</a></li>
  <li><a title="" href="" >link</a></li>
  <li><a title="" href="" >link</a></li>
</ol>

<dl>
  <dt></dt>
    <dd></dd>
</dl>

<h2 title="">No <div>, <span>, #id, or .class</h2>
<p></p>

<ul>
  <li><a title="" href="">cc</a></li>
  <li><a title="" href="">css</a></li>
  <li><a title="" href="">xhtml</a></li>
  <li><a title="" href="">wp</a></li>
</ul>

</body>
</html>

Feedback?

May 10th, 2005

Got something say about this method? Feedback is welcome here so leave a comment.

17 Comments »