Divs and Spans

The <div> tag defines a division or a section in an HTML document. The <div> element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript.

				<div style="background-color:lightblue">
  <h3>This is a heading</h3>
  <p>This is a paragraph.</p>
</div>

This div has been styled to have a background colour of light blue with the help of in-line CSS.

Spans much like divs, are also a section in HTML. They are used to group inline elements making it different to a div. For an example:

<p>My mother has <span style="color:blue">blue</span> eyes.</p>

So what exactly is the difference between Divs and Spans? Div is a block element, span is inline. This means that to use them semantically, divs should be used to wrap sections of a document, while spans should be used to wrap small portions of text, images, etc. An easy way to remeber the difference its to think that Div defines a section in a document (block-level), while Span defines a section in a document (inline).