Firstly the HTML div element represents a division, as HTML is just structure
you can think of div as defining a logical division of the structure.
The div element is block level, meaning that it can only be contained by block level elements and not by inline level elements, though note the p (paragraph) element cannot
contain any block level elements; only inline.
Then we have the HTML span element, which represents an inline division, it spans around it's given content. As mentioned the span is inline level, not block. What this means is that it can be contained by both block and inline level elements, and that it can contain other inline elements, but not block level elements.
Meaning that this would be valid:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>My day at the park</title>
</head>
<body>
<p>
It was a jolly <span>good <em>day</em></span>.
</p>
</body>
</html>
because the em (emphasis) element is inline, but this would not:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>How often do you go to the park?</title>
</head>
<body>
<span>
<form action="park.php" method="post">
<!-- ... -->
</form>
</span>
</body>
</html>
because as explained span is inline and thus can only contain fellow inline elements, as and form is block level this is invalid.
However there is a problem with div and span, they bare hardly any semantics on a document, meaning that if you just have an HTML document with no styling nor behaviour chances are you won't need them, they are mainly used for specific styling, e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>I can make specific letters blue!</title>
</head>
<body>
<p>
<span>c</span>raiggles.
</p>
</body>
</html>
because now I can select that span and specifically make it blue with CSS, like:
span {
color: #00F;
}
the same problem bares with div, it is used for divising the page and thus you can then style or manipulate elements as a whole making markup bloated with divs.
this issue also leads on to people thinking you have to use div and span to style your document, which is of course incorrect, thus they may create unnescesary markup such as:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>I write silly markup!</title>
</head>
<body>
<div>
<p>this paragraph contains red text!</p>
</div>
</body>
</html>
and styling such as:
div {
color: #F00;
}
whereas the div could just be removed and the p (paragraph) styled such as:
p {
color: #F00;
}
I hope that clears up your understanding a little, if you have any questions feel free to post here or send me a personal message.
