• Lesson Index:
• Overview
• Basics
• Starting Dreamweaver
• XHTML
• Background
• Span vs Div
• Fonts
• First CSS
• Create Links
• The Website
• Starting Website
• Table Layout
• Adding Image
• Title Image
• Testing and Finish
• Testing
• Finishing

Chapter 11 of this book: Divs and Spans   This book makes learning fun with lots of fun visuals such as characters with thought bubbles and explanatory side notes to diagram and graphics. More than 100 customers gave this book a 5-star rating -- amazing.

Span versus Div

What is the difference between <span> tag and a <div> tag? The main difference is that a <span> tag is an inline element and <div> tag is a block element. To demonstrate what this means, replace the <span> with a <div> tag...

And see that you get ...

The <div> tag takes as much of the width of the page as it can. It blocks out the whole section of the page, so that anything following it has to go to the next line beneath it. The <span> tags takes as little space as possible, only enough to contain its contents.

For the purpose of illustration, I have put a border around the element so that you can see the difference.

Here it is using a div tag...

And here it is using a span tag...

I like it better with the span tag, so remove the div tag and put back the span tag so that your code looks like ...

As another example, note that the <p> tag is a block element; while the <strong> tag is an inline element. So now you can see the difference between an inline element and a block element.

Next Time

Here is what we have so far: firstpage.html

We will continue working more with firstpage.html in the next lesson where we will learn about fonts.

HTML Utopia: Designing Without Tables Using CSS   p.112: "Using the Span Element" Editorial and Customer Reviews on Sitepoint