Welcome to WebmasterWorld Guest from 54.226.62.251

Forum Moderators: incrediBILL

Message Too Old, No Replies

A quick way to understand divs and spans?

     

Mark_A

3:39 pm on Aug 24, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Back when I was doing sites I used to lay out with tables. Now pages I work on are all div this and span that.

I have to get to grips with them.

Anyone give me any shortcuts to understanding them?

rocknbil

5:01 pm on Aug 24, 2010 (gmt 0)

WebmasterWorld Senior Member rocknbil is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Here's my set of rules.

Divs and spans are generic elements when no other element applies. Use them as a last resort. Inherently they have no padding or margin, most semantic elements have paddings and/or margins that are expected behavior.

If a <p> or <ul> or some other semantic element gives the text inside it meaning, use it, you can style it to act like a div if you need to. And that's really the point, use a container that says "here's the type of content I am holding." Divs and spans have no semantic meaning. A good example, often ignored: what is a navigation? A list of links.

Divs are block elements, who's original intent is to divide up a page layout. Think of them as boxes. "the perfect layout" IMO would have only divs for the main container block and boxes inside it. (Haven't seen one yet, but many come close. :-) )

Spans are inline elements, and just that, a span of text. If I want to emphasize a span of text, I'd first consider using <strong> or <em> and applying a style to it. But if I don't want to apply a semantic meaning to that span, I'll use span.

You can force **any** element to "act like" any other element with CSS, so there's really no reason to give a document div-itis simply because you're comfortable with divs. Use semantic elements wherever possible.

Mark_A

1:26 pm on Aug 25, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi rocknbil, thanks for that, am slowly getting my head round it all. I have a massive css file to try to make sense out of and lots of interesting coding in the html pages.

Mark_A

1:39 pm on Aug 25, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



To be exact, I have a 1180 line css file, wheras the actual html pages of the site are only around 290 lines.

topr8

2:09 pm on Aug 25, 2010 (gmt 0)

WebmasterWorld Senior Member topr8 is a WebmasterWorld Top Contributor of All Time 10+ Year Member



>>I have a 1180 line css file, wheras the actual html pages of the site are only around 290 lines.

most people have no idea what the cascading means in css, by understanding this you can often save lots of code both in style sheets and html documents

Mark_A

2:25 pm on Aug 25, 2010 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi topr8, I thought I kind of understood it, but I probably don't. Thanks for the tip, I will have a read up about it.

damon_cool

6:54 pm on Sep 1, 2010 (gmt 0)

5+ Year Member



Side Note:
Get the firebug plugin for firefox. After you figure out how to use it, you can select an element on the page, and it will show the CSS rules that are applied to the element, and which CSS file the CSS rule is applied from. It's VERY useful when working with someone else's design/styles.

tedster

9:08 pm on Sep 1, 2010 (gmt 0)

WebmasterWorld Senior Member tedster is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Opera also has something called Dragonfly that does the same. And it's embedded in the browser natively.

milosevic

8:42 am on Sep 2, 2010 (gmt 0)

5+ Year Member



To answer your question in the most simple way I can think of, div and span are just effectively 'boxes' that you can put content into (kind of like the cells in a table in terms of purpose).

These boxes can they be styled with CSS to get the required position on the page and style.

The difference between them is that a span is 'inline' and a div is a 'block'.

So you can have:

span span span span - on the same line

but not div div div div - it would be

div
div
div
div

As the block level element always takes up a new line (without CSS styling to alter this behaviour)

Rocknbil is correct that it's better to use other elements where there is a semantic purpose to do so. This is being improved with html5 where there will be elements like <article>, <section>, <nav>, etc which will replace what would have been divs in current html.