DIVs as "building blocks"

[DoubleDee]

Is it fair to say that DIV’s are basically the “building blocks” of your website’s layout (and possibly content to some degree)?

For instance, as I type, my initial post on SitePoint and look at what is in front of me on my monitor, nearly everything is a DIV that is styled, correct? (e.g. Top Menu, “Post New Thread” borders, this Message box, the “Tags” and “Post Icons” sections, etc.)

And if this first assumption is correct, then you basically flesh out your website by positioning DIVs to create a sections and a certain layout, right?

And you add dimension and aesthetics to DIVs by styling them and their contents (e.g. Borders, Backgrounds, Fonts, etc), right?

I ask this, because now that I have a pretty good page layout and menu, I need to fill up this “empty box” with stuff, and I’m not sure where to begin?!

Debbie

[Stevie_D]

@DoubleDee

Is it fair to say that DIV’s are basically the “building blocks” of your website’s layout (and possibly content to some degree)?

For instance, as I type, my initial post on SitePoint and look at what is in front of me on my monitor, nearly everything is a DIV that is styled, correct? (e.g. Top Menu, “Post New Thread” borders, this Message box, the “Tags” and “Post Icons” sections, etc.)

And if this first assumption is correct, then you basically flesh out your website by positioning DIVs to create a sections and a certain layout, right?

And you add dimension and aesthetics to DIVs by styling them and their contents (e.g. Borders, Backgrounds, Fonts, etc), right?

That is largely true now, although it will be less so once we can start to use the new HTML5 elements with more confidence in cross-browser support. <div> is short for ‘division’, ie it is a way of dividing up the content into sections.

But remember that not everything has to be in a <div>. There are times when you can just use a <ul> for navigation, for example, without wrapping it in a <div>. Soon we’ll be able to have <header>, <article> and more that can often replace <div>s.

And yes, once you’ve divided up your page into those sections, you need to do something with them - fill them with content, put them where you want them, and make them look nice.

[DoubleDee]

Well, is it a bad idea to divide up your web page into DIVs? (Is that as bad as using Tables to divide things up?)

It just seems to me that even on SitePoint I usually see people put things in “wrapper” DIVs to more easily group things together and make it easier to move, locate, style, or whatever a logical grouping of code/objects (e.g. Menu, Right Column w Advertising, News Article, etc).

Debbie

[system]

<div> is to be used like in

♪ Look for the bare necessities
The simple bare necessities ♪

[AllanP]

[QUOTE=noonnope;4820213♪ Look for the bare necessities
The simple bare necessities ♪[/QUOTE]

I agree with this statement, so it always surprises me that so many people recommend <ul> and <li> tags for horizontal navigation, rather than <p>. You can float <p> elements, so why not?

[system]

♪ Look for the bare necessities
The simple bare necessities ♪

… that and semantics!

A navigation implies a list. The problem is why use an additional <div>, when you have <ul> as a container for you <li>.

[Stevie_D]

@DoubleDee

Well, is it a bad idea to divide up your web page into DIVs? (Is that as bad as using Tables to divide things up?)

As far as possible, you should use appropriate elements. Often, you will want to wrap things up and there is no semantically appropriate element other than the all-encompassing <div>, and that’s fine. Where it gets messy is when people who have been so drilled in the table layout school of design try to replicate the same structure using a <div> for every table cell. That’s rarely necessary or helpful - much leaner and more efficient code can usually make use of padding, margins, borders and backgrounds to create the desired outcome without lots of empty <div> tags slopping around all over the place.

@noonnope

<div> is to be used like in

♪ Look for the bare necessities
The simple bare necessities ♪

Nice

@AllanP

I agree with this statement, so it always surprises me that so many people recommend <ul> and <li> tags for horizontal navigation, rather than <p>. You can float <p> elements, so why not?

Navigation is a list of items, so <ul> and <li> is entirely appropriate. Menu items are not in themselves paragraphs, and nor is the menu as a whole a paragraph, so <p> is entirely inappropriate.

[DoubleDee]

@Stevie_D

As far as possible, you should use appropriate elements. Often, you will want to wrap things up and there is no semantically appropriate element other than the all-encompassing <div>, and that’s fine. Where it gets messy is when people who have been so drilled in the table layout school of design try to replicate the same structure using a <div> for every table cell. That’s rarely necessary or helpful - much leaner and more efficient code can usually make use of padding, margins, borders and backgrounds to create the desired outcome without lots of empty <div> tags slopping around all over the place.

Okay, then I have the perfect example for you!

Since my website is dealing with articles, in each section (e.g. “Small Business”), I want to have a listing of all articles with a short synopsis to get people interested. Each Article Summary will include:

[INDENT]- Article Title

• Date Written
• Author
• Summary Paragraph
• Picture (optional)
  [/INDENT]

Here is a mock-up of what the end result should look like… (It looks pretty good except that sometimes the next article Title is not “clearing” the previous image, but that is for another thread!)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<title>Sample Article Highlights</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
/*				outline: 1px dotted #F00;		/* */
			}

			.summary{
				margin: 2em;
				padding: 0;
			}
			h2{
				margin: 0.5em 0;
				font: bold 1.2em/1.2 arial;
			}

			.byline{
				font: 0.7em/1.2 arial;
			}

			p{
				margin: 0.2em 0;
				font: 0.8em/1.3 arial;
			}

			img{
				float: left;
				margin: 0 1em 0 0;
				outline: 1px dotted #F00;		/* */
				clear: both;
			}
		</style>
	</head>
	<body>
		<div class="summary">
			<h2>
				For animals, the bigger the group, the more distinct its members
			</h2>
			<img src="images/prairiedogss_133x75.jpg" alt="Pic of Prairie Dogs" width="133" height="75" />
			<span class="byline">
				<b>2 days ago - by Kate Shaw</b> | Posted in: Nobel Intent
			</span>
			<p>
				Individuality increases with group size in rodents, making it
				easier to recognize group members among lots of potential targets.
			</p>
		</div>

		<div class="summary">
			<h2>
				Apple's Lala purchase appears to have been "insurance"
			</h2>
			<img src="images/appleslala_133x75.jpg" alt="Pic of Apple's LaLa" width="133" height="75" />
			<span class="byline">
				<b>1 day ago - by Lisa Smith</b> | Posted in: Mac Central
			</span>
			<p>
				Apple has reportedly "clarified" its plans for the cloud to music
				industry execs, emphasizing that it doesn't want to undermine its
				dominance in the download market by rolling out yet another streaming
				service. Instead, the company supposedly wants to offer digital locker
				services for existing iTunes purchases.
			</p>
		</div>

		<div class="summary">
			<h2>
				Thoughtcrime? The ethics of neuroscience and criminality
			</h2>
			<span class="byline">
				<b>about 3 hours ago - by Linda Jones</b> | Posted in: Science
			</span>
			<p>
				Advances in brain imaging and neurobiology are revealing that the
				brains of criminals often differ from those of everyone else. A session
				at AAAS looked at some of those differences and considered the thorny
				ethical questions they raise.
			</p>
		</div>

	</body>
</html>

So, based on the end result of the attached code, and my crude attempt to organize things, what do you think is the best way to mark up this example so that it is Simple and Semantically Eloquent?

Thanks,

Debbie

[dresden_phoenix]

IMHO,
thats is a really BAD assumption and one that may be a result of oversimplification when trying to learn to code. This is not because there is no truth to it, but because it can lead to inefficient coding. If you can hook your page’s design into existing semantically relevant tags you should instead of adding DIVs. There are situations in which you need divs and spans. Simplest example… if you had a P that needed to have half its content be one color and the rest another you need a tag to differentiate on half from the other… <p>text of one color<span> thext of another color</span></p> there is no other way round it. however to wrap a DIV around a UL merely for positioning… is bloating your code. As always web coding is about evaluating each situation. Divs can be USEFUL FOR what you said, but that not their designated function.

As far as elegance of code…

what you have done is not too bad, ( would put the byline and img in the first P… that floating inline element… is kinda unnerving )

you could also consider using a definition list ( if these aren’t the full fledged articles, but mere teasers to the story)

    <dl class="summary">
        <dt> Apple's Lala purchase appears to have been "insurance"</dt>
        <dd>
        <img src="images/appleslala_133x75.jpg" alt="Pic of Apple's LaLa" width="133" height="75" />
        <span class="byline"><b>1 day ago - by Lisa Smith</b> | Posted in: Mac Central</span>

<p>
Apple has reportedly “clarified” its plans for the cloud to music
industry execs, emphasizing that it doesn’t want to undermine its
dominance in the download market by rolling out yet another streaming
service. Instead, the company supposedly wants to offer digital locker
services for existing iTunes purchases.<p>
</dd>
</dl>

hope these tips are useful.

[DoubleDee]

@dresden_phoenix

IMHO,
thats is a really BAD assumption and one that may be a result of oversimplification when trying to learn to code.

Before I finish reading what you said…

WHAT is a “bad assumption”??

WHO are you talking to? Me or someone else?

(Just want to be sure I understand you!)

Thanks,

Debbie

[dresden_phoenix]

I meant I went through the same phase when I started to code CSS/HTML. I look at my old sites from the era in which I though… “hey I will just lay this out with divs” and shiver.

I also said it was an oversimplification, because looking back I cant blame myself, or anybody for coming to the same conclusions, even when the divs and spans arent being used for soley presentational purposes.

let say you had a DIV … you a needed one… which was your main content container
within it you have a number of stories…
one could say oh… well just wrap the stories in divs… ( even if they are not being moved around the page)… again i can see the appeal. but remember … a div doesnt hold any semantic meaning. so the div is just there for when you review the code… since you arent adding a bg/ or moving the story chunk… it is actually a superfluous tag…

BUT, dres… you say… what if I wanted to add white-space or size the story container…

sometimes, that is necessary… yes. but also sometimes, it can just as easly be done by styling the contained tags instead… for example…

#main div.right{ 200px; background (decorative.jpg)}

is quite similar to getting rid of the div, putting the decorative bg in the #main container… and adding a #main > p, h1, h2, h3, …{margin-left:200px;}

of course this isnt practical if you need the left column to hold content, or if the main container already has a bg…

but what I was getting at was that if you start by thinking that divs are necessary, you wont look in the possibilities of when they are NOT. you have to examine each page’s case individually… rather than look ( or assume) there is a tag in HTML that was made for layout purposes. that belief… or search… will lead your code astray.

[system]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Sample Article Highlights</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
/*        outline: 1px dotted #F00;  /* */
            }
 
            .summary{
                margin: 2em;
                padding: 0;
            }
            h2{
                margin: 0.5em 0;
                font: bold 1.2em/1.2 arial;
            }
 
            .byline{
                font: 0.7em/1.2 arial;
            }
 
            p{
                margin: 0.2em 0 3em 0;
                font: 0.8em/1.3 arial;
            }
 
            img{
                float: left;
                margin: 0 1em 0 0;
                outline: 1px dotted #F00;      /* */
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="summary">
            <h2>
                For animals, the bigger the group, the more distinct its members
            </h2>
            <img src="images/prairiedogss_133x75.jpg" alt="Pic of Prairie Dogs" width="133" height="75" />
            <span class="byline">
                <b>2 days ago - by Kate Shaw</b> | Posted in: Nobel Intent
            </span>
            <p>
                Individuality increases with group size in rodents, making it
                easier to recognize group members among lots of potential targets.
            </p>
 
            <h2>
                Apple's Lala purchase appears to have been "insurance"
            </h2>
            <img src="images/appleslala_133x75.jpg" alt="Pic of Apple's LaLa" width="133" height="75" />
            <span class="byline">
                <b>1 day ago - by Lisa Smith</b> | Posted in: Mac Central
            </span>
            <p>
                Apple has reportedly "clarified" its plans for the cloud to music
                industry execs, emphasizing that it doesn't want to undermine its
                dominance in the download market by rolling out yet another streaming
                service. Instead, the company supposedly wants to offer digital locker
                services for existing iTunes purchases.
            </p>

            <h2>
                Thoughtcrime? The ethics of neuroscience and criminality
            </h2>
            <span class="byline">
                <b>about 3 hours ago - by Linda Jones</b> | Posted in: Science
            </span>
            <p>
                Advances in brain imaging and neurobiology are revealing that the
                brains of criminals often differ from those of everyone else. A session
                at AAAS looked at some of those differences and considered the thorny
                ethical questions they raise.
            </p>
        </div>
 
    </body>
</html>

Better? Less divs?

[DoubleDee]

@dresden_phoenix

I meant I went through the same phase when I started to code CSS/HTML. I look at my old sites from the era in which I though… “hey I will just lay this out with divs” and shiver.

Oh, okay.

(Let’s hope you can spare me the same painful process and get to the good stuff!)

I also said it was an oversimplification, because looking back I cant blame myself, or anybody for coming to the same conclusions, even when the divs and spans arent being used for soley presentational purposes.

Life is complicated!!

let say you had a DIV … you a needed one… which was your main content container

within it you have a number of stories…

one could say oh… well just wrap the stories in divs… ( even if they are not being moved around the page)… again i can see the appeal. but remember … a div doesnt hold any semantic meaning. so the div is just there for when you review the code… since you arent adding a bg/ or moving the story chunk… it is actually a superfluous tag…

If you don’t use it, I agree.

BUT, dres… you say… what if I wanted to add white-space or size the story container…

sometimes, that is necessary… yes. but also sometimes, it can just as easly be done by styling the contained tags instead… for example…

#main div.right{ 200px; background (decorative.jpg)}

is quite similar to getting rid of the div, putting the decorative bg in the #main container… and adding a #main > p, h1, h2, h3, …{margin-left:200px;}

of course this isnt practical if you need the left column to hold content, or if the main container already has a bg…

Okay.

but what I was getting at was that if you start by thinking that divs are necessary, you wont look in the possibilities of when they are NOT. you have to examine each page’s case individually… rather than look ( or assume) there is a tag in HTML that was made for layout purposes. that belief… or search… will lead your code astray.

Okay.

Well, I was originally thinking of using <DL><DT><DD> but since my paragraph has multiple parts (e.g. Author, Date, Summary, Image), I wasn’t sure if that would work.

I guess you just combine “sub Tags” in the <DD>?

And, yes, obviously I saw that DIVs could be abused, and that is why I made this post.

When you are dealing with lots of data and complex relationships, marking up your web pages gets trickier!

Debbie

[DoubleDee]

@noonnope

        <div class="summary">
            <h2>
                For animals, the bigger the group, the more distinct its members
            </h2>
            <img src="images/prairiedogss_133x75.jpg" alt="Pic of Prairie Dogs" width="133" height="75" />
            <span class="byline">
                <b>2 days ago - by Kate Shaw</b> | Posted in: Nobel Intent
            </span>
            <p>
                Individuality increases with group size in rodents, making it
                easier to recognize group members among lots of potential targets.
            </p>
 
            <h2>
                Apple's Lala purchase appears to have been "insurance"
            </h2>
            <img src="images/appleslala_133x75.jpg" alt="Pic of Apple's LaLa" width="133" height="75" />
            <span class="byline">
                <b>1 day ago - by Lisa Smith</b> | Posted in: Mac Central
            </span>
            <p>
                Apple has reportedly "clarified" its plans for the cloud to music
                industry execs, emphasizing that it doesn't want to undermine its
                dominance in the download market by rolling out yet another streaming
                service. Instead, the company supposedly wants to offer digital locker
                services for existing iTunes purchases.
            </p>
        </div>
 
    </body>
</html>

Better? Less divs?

The problem with that is that you lose the semantic value/relationship between all of that data.

Its not random Titles, Images, Bylines, and Summaries.

Rather, it is one “Article Summary” that contains a “Title”, Image (optionally), “Byline”, and “Summary”.

I think the <DL><DT><DD> works well, as long as I can have sub-components (e.g. Author, Date, Category, Image, Summary, etc) in one <DD>.

Debbie

[system]

@DoubleDee

The problem with that is that you lose the semantic value/relationship between all of that data.

Its not random Titles, Images, Bylines, and Summaries.

Hmmm… What do you think, maybe h2 is the one important element in there?

http://www.w3.org/TR/html401/struct/global.html#h-7.5.5:

A heading element briefly describes the topic of the section it introduces.

Now, if you think that putting divs around those elements makes them less random, you are wrong. Especially since div is used SPECIFICALLY because it has no semantic meaning. The fact that you use a class=“summary” on it, doesn’t change this fact at all This, I believe, is your biggest mistake: attribute values have no semantic purpose or meaning. Zip. Nada.

Yes, you can div everything in your way, but the art of using div in web dev is exactly this:

♪ And don’t spend your time lookin’ around
For something you want that can’t be found
When you find out you can live without it
And go along not thinkin’ about it
I’ll tell you something true

The bare necessities of life will come to you ♪

[rguy84]

To back up noonnope; less tags = less can go wrong, therefore you =

[DoubleDee]

@noonnope

Hmmm… What do you think, maybe h2 is the one important element in there?

Not as much as wrapping the disparate data in a <DD> tag.

Now, if you think that putting divs around those elements makes them less random, you are wrong.

I think I established that using <DL><DT><DD> looks appealing to me if I can also have nested tags inside the <DD>.

Especially since div is used SPECIFICALLY because it has no semantic meaning. The fact that you use a class=“summary” on it, doesn’t change this fact at all This, I believe, is your biggest mistake: attribute values have no semantic purpose or meaning. Zip. Nada.

First, see my last comment.

Second, what is XML them? Doesn’t its whole paradigm revolve around marking things up that way? (Not that that is what I want.)

Yes, you can div everything in your way, but the art of using div in web dev is exactly this:

♪ And don’t spend your time lookin’ around
For something you want that can’t be found
When you find out you can live without it
And go along not thinkin’ about it
I’ll tell you something true

The bare necessities of life will come to you ♪

Is this “Name That Tune” or what?!

Debbie

[system]

“Jungle book - Bare necessities” is actually a pretty good paradigm for html mark up

Your last comment mentioned that me losing some div’s in your original code means losing “semantic value/relationship”. Which is not true. And I proved to you that the actual sections can be semantically draw by h2s.

You seem decided to go with dl. Did you know you can’t have h2 or p in dt?

[DoubleDee]

@noonnope

“Jungle book - Bare necessities” is actually a pretty good paradigm for html mark up

Your last comment mentioned that me losing some div’s in your original code means losing “semantic value/relationship”. Which is not true. And I proved to you that the actual sections can be semantically draw by h2s.

Right, but I just figured wrapping it someway might improve it.

You seem decided to go with dl. Did you know you can’t have h2 or p in dt?

Well, I asked that uestion a couple of times.

If I cannot have <h2> or <p> or <img> in a <DD> then that wouldn’t work.

It was just an idea.

Debbie

P.S. BTW, how do I make my next “summary” drop below the one above it? It seems like I am having a “clearing” issue with my floated picture.

[system]

You’re confused about dl, dt and dd

You CAN have <h2> or <p> or <img> in a <dd>, which is the definition data, but not in <dt>, which is the definition term.

<dl>just  dt and dd: they can be as many dt for one dd, one dt for as many dd or as many dt for as many dd
 
  <dt>just inline: a, img, span</dt>
  <dd>flow: inline OR block, not both!</dd>

 [...]

</dl>