When it comes to web design and web coding, for that matter, there is usually more than one way to accomplish what you are trying to do. Often, the reason for choosing one method over another is efficiency (or logic). In talking with a friend/client the other day, the topic of CSS came up. One of the things she was asking me was, how do you know when to use the DIV element and when do you use SPAN? (Rather than confuse WordPress with trying to display the code or installing another Plug-in, I am going to use all CAPS when referring to elements)
In a nutshell, DIV is a block level element. In other words, you use it to define the characteristics you want a whole block of code to follow. It is used to break up sections of a page and it can contain additional tags. If you are familiar with HTML, the DIV element is very similar to the P (paragraph) element.
On the other hand, SPAN is an inline element. Inserting a SPAN tag into a line of code lets the browser know to apply the indicated style to a small section of text, but not to break the line. It cannot contain any additional elements. It is kind of like the old FONT element that you would apply in HTML.
Here is another way to remember it - a DIV can contain a SPAN but a SPAN cannot contain a DIV.
Related Posts:
Related posts:
where I share my favorite tips, tools, reviews and commentary on web design, marketing, blogging, new media and related topics. For more about this site and the voice behind it, check out my 
13 Comments»
Ken Xu
16. July 2007 | 19:07 hNice Duel. I seldom use span to change font color. I use FONT instead. I think I should switching to SPAN for better compatibility for IE browser.
I usually got attention from dreamweaver that FONT tag will not compatible with several browser like the old IE
Brown Baron
16. July 2007 | 23:18 hNice and clear tutorial. This should be the start of a series
I bet a lot of people would be interested in learning more.
Darren
17. July 2007 | 04:06 hHi, Nice article. It helps to understand the difference between DIV and SPAN tags especially when trying to create standards compliant sites.
Char
17. July 2007 | 06:37 hKen - I think span is more efficient and it plays nice with all the browsers.
Brown Baron - You are reading my mind… This might have been the beginning of a new series.
Darren - thanks for stopping in today. I hope you will be back soon.
Dj Flush
17. July 2007 | 08:16 hI am a very enthusiastic CSS learner and trust me this article was a great read
I have always had the confusion on how to apply styling inside a DIV without getting a break before and after
This explains a lot
April Groves
17. July 2007 | 17:50 hWoo Hoo! So I know the purpose of the post was not “favicons” but your related post link was there.
MINE WORKS NOW!!
Thanks a ton!
Carolyn Manning
17. July 2007 | 19:13 hThis was a great tutorial, Char. Just enough to understand without being overwhelming. My knowledge of CSS would be called pitifully lacking, but now I know my DIVs from my SPANs. One question: why is there no /SPAN ?
My vote is with Brown Baron. No, I wasn’t reading your mind
Char
17. July 2007 | 19:57 hCarolyn - great catch!!! There should be - I fixed my image and reloaded it.
Carolyn Manning
17. July 2007 | 23:34 hChar, as I said over at Liz’ tonight, I wasn’t looking to make a catch. Glad I did, though; now the image should stay stuck in my head.
Yvonne Russell
19. July 2007 | 21:59 hHi Char
Just when I started learning very basic HTML, CSS came in, so this is a great help! I look forward to your tutorial series.
Lara
20. July 2007 | 01:41 hAhhh, it took me a while to get the whole div/span thing down! Now I’m all specific about it.
This article is a great explanation: wish I was able to read it when I was learning
As always, great stuff Char.
Kian Ann
25. July 2007 | 23:12 hChar, great explanation. I’m a fan of DIVs and I really seldom use SPANs
Now I know when to use them.
On that note, would you know if there is a difference in the may firefox and IE displays DIVs? For most of my designs, I can really never get them to display excactly the same on both browsers!
Jarod Clark
29. April 2008 | 02:06 hAre both supported equally in IE 6?