Home | Services | Free Quote | Web Design | Pricing

Introduction to HTML DIVs and SPANs

HTML DIVs and SPANs - Moving towards CSS

The ‹div› and ‹span› tags are used for adding CSS styling and for code standards. We are going to focus on the CSS styling and hopefully introduce CSS to those who are not familiar with it.

Different strokes

JThe two differences between a ‹div› and ‹span› tag are how they are treated in HTML, the ‹div› tag is it's own element and the ‹span› tag is more in-line. Basically the ‹div› has it's own personal space how ever close or far that is from other things on the page where a ‹span› mingles within text and elements.

This can initially be confusing so lets look at an example where we use CSS to change a text's color.

This is a sentence with a red text portion in the middle using a ‹span› tag.
This is a sentence with a
red text
portion in the middle using a ‹div› tag.

Lay it out for me

The ‹div› tag is it's own element so there are line breaks in the text. It initially seems to be a real detriment, but in fact it's a very useful trait when we want to use divs to layout elements.

With divs we can layout a page and add effects using a minimal amount of tags which helps with shorter page loads and search engine optimization. It's quickly becoming standard online practice and makes presentation changes easier.

Div and Span highlights

So what should I expect?

Div used for formatting
An image in a floating div
Text will flow around floated divs such
as an image as seen to the left. This particular image has a margin on 2
sides of it. The main container has some padding to it represented in purple. The highlights are to give you an idea of what the formatting is doing to the text.

As you can see using some padding and margins we can space out the text from the borders. The image is "floating" to the left which allows the text and other elements to flow around it. Although we won't go too much into why CSS is better for most web pages just understand for now that it is the next step in making better and more efficient websites.
Valid CSS! Valid HTML 4.01 Transitional
Privacy and Terms Of Service © 2004-2008 WebDesigners-Directory | RSS | Design Wall | Custom Web Design |

Web Design Directory: web design, web designer, web page and web site design, development firms, programming and HTML.

© Copyright 2008 All rights reserved.