The elements <span> and <div> are used to group and structure a document and will often be used together with the attributes class and id.
We will take a closer look at the use of <span> and <div> as exactly these two HTML elements are of central importance with regards to CSS.
Grouping with <span>
The element <span> is what you could call a neutral element which does not add anything to the document itself. But with CSS, <span> can be used to add visual features to specific parts of text in your documents.
SPAN is an inline element, so it may be used just as elements such as EM and STRONG in HTML. The important distinction is that while EM and STRONG carry structural meaning, SPAN has no such meaning. It exists purely to apply style, and so has no effect when the style sheet is disabled.
For example
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>grouping with span</title>
<style>
.abc{color:#ff0000;
font-size:16px;}
.xyz{color:#1E3593;
font-size:10px;}
</style>
</head>
<body>
<p>This tutorial helps beginners learn the basics of creating Web sites with<span class=”abc”> HTML</span> and <span class=”abc”>Cascading Style Sheets.</span></p>
<p>This is a test to define grouping of elements in <span class=”xyz”>span </span>and <span class=”xyz”>div</span></p>
</body>
</html>
save this code and run.you will see the effects.
Grouping of elements with div
The DIV element is similar to the SPAN element in function, with the main difference being that DIV (short for “division”) is a block-level element. DIV may contain paragraphs, headings, tables, and even other divisions. This makes DIV ideal for marking different classes of containers, such as a chapter, abstract, or note
Aside from this difference, the grouping with <div> works in more or less the same way. Let us take a look at an example
<!DOCTYPE html
PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>grouping with span</title>
<style>
#democrats{color:#ff0000;
font-size:16px;}
#republicans{color:#1E3593;
font-size:10px;}
</style>
</head>
<body>
<div id=”democrats”>
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>
<div id=”republicans”>
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>
</body>
</html>
Hope u would have come to know about the use of div and span.
if any queries ,please comment on it.i will get back to you.
