homepage Welcome to WebmasterWorld Guest from 54.166.122.86
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

    
A quick way to understand divs and spans?
Mark_A

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4191969 posted 3:39 pm on Aug 24, 2010 (gmt 0)

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

WebmasterWorld Senior Member rocknbil us a WebmasterWorld Top Contributor of All Time 5+ Year Member



 
Msg#: 4191969 posted 5:01 pm on Aug 24, 2010 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4191969 posted 1:26 pm on Aug 25, 2010 (gmt 0)

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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4191969 posted 1:39 pm on Aug 25, 2010 (gmt 0)

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

topr8

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



 
Msg#: 4191969 posted 2:09 pm on Aug 25, 2010 (gmt 0)

>>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

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4191969 posted 2:25 pm on Aug 25, 2010 (gmt 0)

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

5+ Year Member



 
Msg#: 4191969 posted 6:54 pm on Sep 1, 2010 (gmt 0)

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

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



 
Msg#: 4191969 posted 9:08 pm on Sep 1, 2010 (gmt 0)

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

milosevic



 
Msg#: 4191969 posted 8:42 am on Sep 2, 2010 (gmt 0)

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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved