The SPAN and DIV elements are very useful when dealing with Cascading Style Sheets.
People tend to use the two elements in a similar fashion, but they serve different purposes.
The DIV Element
The DIV elements defines logical divisions in your web page.
It acts a lot like a P element, by placing newlines before and after the division.
A division can have multiple paragraphs in it.
Using the DIV Tag
To use the DIV element, simply surround the area of your page that you want as a separate division with the and tags:
contents of div
The DIV element gives you the chance to define the style of whole sections of the HTML.
You can define a division of your page as a call out and give that area a different style from the surrounding text.
That area could have images, paragraphs, headlines, anything you wanted.
The DIV element also gives you the ability to ID areas of your documents so that you can change them with Ajax and dynamic HTML.
The DIV element is different from the new HTML5 SECTION element because it does not give the enclosed content any semantic meaning.
If you aren’t sure whether the block of content should be a DIV or a SECTION, think about what that content’s purpose is and why you need the DIV or SECTTION element.
If you need the element simply to add styles to that area of the page, you should use the DIV element.
If that area of the page has a specific meaning, for example it holds all your social media elements or it contains your blogroll, then you should use the SECTION element.
One thing to keep in mind when using the DIV element is that it breaks paragraphs.
It acts as a paragraph end/beginning, and while you can have paragraphs within a DIV you can’t have a DIV inside a paragraph.
The primary attributes of the DIV element are:
Even if you don’t use style sheets or DHTML, you should get into the habit of using the DIV element.
This will give you more flexibility and future proof your HTML.
Also, you can use the id to identify your divisions so that your web pages are well formed.
Because the CENTER element has been deprecated in HTML 4.0 and is obsolete in HTML5, it is a good idea to start using to center the content inside your DIV.
Learn More About the DIV Element
The SPAN Element
The SPAN element has very similar properties to the DIV element, in that it changes the style of the text it encloses.
But without any style attributes, the SPAN element won’t change the enclosed items at all.
The primary difference between the SPAN and DIV elements is that SPAN doesn’t do any formatting of it’s own.
The DIV element includes a paragraph break.
The SPAN element simply tells the browser to apply the style rules to whatever is within the SPAN.
To use the SPAN element, simply surround the text that you want to add styles to with the and tags:
Highlighted text and non-highlighted text.
The SPAN element has no required attributes, but the three that are the most useful are the same as for the DIV element:
Use SPAN when you want to change the style of elements without placing them in a new block-level element in the document.
For example, if you had a Level 3 Heading (H3) that you wanted the second word to be red, you could surround that word with 2ndWord and it would still be a part of the H3 tag, just red.
This is My Awesome Headline
Learn More About the SPAN Element
Overview of the HTML DIV Element
The SPAN Tag
When to Use the HTML5 SECTION Element
How to Prevent the Carriage Return Before and After DIV Tags
CSS Centering - How to Center a Fixed Width Layout Document with CSS
Alignments - Floating Your Elements on the Page
CSS Step by Step
CSS Lesson 2: The SPAN and DIV Elements
How to Use Span and Div Tags Video
Flexible CSS Decendants
DIV and Span Tags - How to Use DIV and Span Tags to Format in HTML Video
CSS Relationships - HTML Tag Relationships and How they Impact CSS Selector...