Block vs. Inline
Span vs. Div
and Id vs. Class

Block vs. Inline

This is an example of block vs. inline elements. The em element is an inline element that makes text appear in italics. Actually, the em element just indicates that the text is supposed to be emphasized. The default behavior is to use italics, but you can actually change that default behavior using CSS.

The code element makes text appear as if it is "computer code". It is what a graphic designer might call a monospaced font, or a typewriter style font. The font most often used for this purpose is called Courier. The word code appears in this very font.

span vs. div

If we want to mark a particular piece of text with some CSS, and we have no other element to put around it (e.g. we don't want to use code, em,strong, etc.) we can always fall back on the generic inline element, namely span.

So for example, I could have some text that is big blue and nasty, or some text that green on a yellow background, or some text that is warm, pink and friendly.

Or, I can make an entire block appear different by puting a div tag around it (possibly multiple paragraphs) and styling the div.

For example, both of these paragraphs are inside a div with a border.

This is a paragraph inside a div element with the bigBlue class.

id vs. class

See the wiki and also the source code to this page for more about id vs. class.