Essential Keystrokes is…

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 About page.

Connect

SubscribeFollow me on TwitterLinked In Stumble Upon What I Digg Email me
Jul
16

CSS Classroom – Div vs Span

By Char

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.

Div sample

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.

span_sample1.jpg

Here is another way to remember it – a DIV can contain a SPAN but a SPAN cannot contain a DIV.

Related Posts:

14 Comments

1

Nice 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

2

Nice and clear tutorial. This should be the start of a series :)
I bet a lot of people would be interested in learning more.

3

Hi, Nice article. It helps to understand the difference between DIV and SPAN tags especially when trying to create standards compliant sites.

4

Ken – 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.

5

I 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 :)

6

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

7

This 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 :)

8

Carolyn – great catch!!! There should be – I fixed my image and reloaded it.

9

Char, 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.

10

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

11

Ahhh, 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.

12

Char, 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!

13

Are both supported equally in IE 6?

14

Great info, here is how i typically use div vs span.

DIV I use to create the building blocks or panels of the webpage.

SPAN is used when created little accents, lets say I wanted a paragraph that is italicized with font color of green, I will create a span class, because more then likely I will use it again!

Always hundreds of ways to do the same thing, but there is always the fastest, most efficient and with out code bloat!

Leave a Comment

RECENT PROJECTS

Team Training NE Celiac Family