Certified HTML5 Developer Learning Resources div and span tags

Learning Resources
 

div and span tags


Div tag:

The div tag (division) is a block level generic container element. The division tag doesn't do anything all by itself, but when you add CSS styles to it the division becomes a webmaster's best friend.

Being a "block level" element, most browsers will place a line break before and after the division.

By using CSS you can use a division to style whole blocks of content. Here's an example:

Beginning today, treat everyone you meet as if they were going to be dead by midnight. Extend to them all the care, kindness and understanding you can muster, and do it with no thought of any reward. Your life will never be the same again. - Og Mandino

I tossed a bunch of CSS into that division just to give you a small idea of what you can do with the division tag. Here's the code I used:

Content goes here...

Span tag:

The span element is a generic container element. It's similar to the division tag only it's an inline element rather than a block level element.

The span element doesn't do anything by itself, but it become a powerhouse when you use CSS to define what the span element will do.

Here's an example:

The book, 

Three Magic Words is...

That would show up on a web page like this...

The book, Three Magic Words is...

You can use the span tag and CSS to change the font color or the font size, to underline or overline text, to add a background color, to box in text and many more things.

 For Support