Grouping Elements with <div> and <span>

[chinmay]

The <div> and <span> elements allow you to group several elements to create sections or subsections of a page. On their own, they will not affect the appearance of a page, but they are commonly used with CSS to allow you to attach a style to a section of a page .For example, you might want to put all of the footnotes on a page within a <div> element to indicate that all of the elements within that <div> element relate to the footnotes. You might then attach a style to this <div> element so that they appear using a special set of style rules.

The <div> element is used to group block-level elements:

<div class=”footnotes”>
<h2>Footnotes</h2>
<p><b>1</b> The World Wide Web was invented by Tim Berners-Lee</p>
<p><b>2</b> The W3C is the World Wide Web Consortium who maintain many Web
standards</p>
</div>

The <span> element, on the other hand, can be used to group inline elements only. So, if you had a part of a sentence or paragraph you wanted to group, you could use the <span> element. Here you can see that I have added a <span> element to indicate which content refers to an inventor. It contains both a bold element and some text:

<div class=”footnotes”>
<h2>Footnotes</h2>
<p><span class=”inventor”><b>1</b> The World Wide Web was invented by Tim
Berners Lee</span></p>
<p><b>2</b> The W3C is the World Wide Web Consortium who maintain many Web
standards</p>
</div>