div and span in HTML and CSS

<div> 

means divide page into logical sections or groupings.

What is a logical section: It's just a group of elements that are all realted on the page. 

Width of the content area

Total width of the box

Select  descendants

span element:

give you a way to logically separate inline content in the same way that <div> allows you to create logical separation for block-level content.