Generalist Tags—div and span

Throughout this book many tags will be mentioned, most of which have very specific
purposes and are used to mark up very specific elements (such as images, tables,
or quotes). There are two “generalists” that apply little meaning but are commonly
used to group together sections of HTML and apply CSS to those groupings.
div is a division. It’s a block-level element that groups together a chunk of HTML,
and might look something like this:

<div id=”content”>
<h1>How to make a falafel</h1> <p>Buy a falafel seed and plant
it in your garden.</p>
</div>

 “Layout,” where it is used to define
navigation and content areas of a page, for example.
span is an inline element that groups together a chunk of inline HTML, such as
single words or short phrases.

<h1>How to make a <span>falafel</span></h1>

span tags should be used sparingly because when a more meaningful tag can be
used as an alternative  that is more beneficial
to the HTML structure. So, in the previous example, <em>falafel</em> would
be better if you were actually attempting to emphasize the word falafel.