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
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.
So what should I expect?
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.
Div borders
Div padding
Div margin
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.
